Day 22：专案05 - KKBOX风云榜01 | AJAX

欧嗨哟~ 大家昨天有睡饱吗? 今天又是一个新的专案，当然一样是爬虫，但是我完全不用BeautifulSoup一样可以取得资料，这是怎麽做到的? 好奇吗? 就让我们看下去吧!

KKBOX 华语新歌日榜

今天要来爬的是KKBOX的华语新歌日榜，可以看到这个网站底下列出了当天新歌的排行榜。

你心中一定想说：「反正你一定又是叫我右键>>检查对不对?」

NONONO~ 要是这麽简单就不用我教了，不信你可以试试看直接用requests抓，看看抓不抓的到。

url = "https://kma.kkbox.com/charts/daily/newrelease?terr=tw&lang=tc"
response = requests.get(url)
root = BeautifulSoup(response.text, "html.parser")
print(root.prettify())

的确会有回应，但你会发现你不管怎麽找，都找不到你要的资料。这是为什麽呢? ?

答案其实前天就讲过了，只是我没说出来而已。没错，KKBOX也是一个动态网站，他用的是名叫AJAX的技术。

什麽是AJAX?

AJAX即「Asynchronous JavaScript and XML」（非同步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。

传统的Web应用允许使用者端填写表单（form），当送出表单时就向网页服务器传送一个请求。服务器接收并处理传来的表单，然後送回一个新的网页，但这个做法浪费了许多频宽，因为在前後两个页面中的大部分HTML码往往是相同的。由於每次应用的沟通都需要向服务器传送请求，应用的回应时间依赖於服务器的回应时间。这导致了使用者介面的回应比本机应用慢得多。

与此不同，AJAX应用可以仅向服务器传送并取回必须的资料，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的资料大量减少，服务器回应更快了。同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。

-- 维基百科

传统的网页应用上，如果想要改变网页上部分的资料，就一定要将整个网页重新渲染才行。而AJAX的做法就是只向服务器取得部分的资料，并使用JavaScript将资料写上去，这样的优点是在用户端和服务器间传递的资料比较少，而且处理速度也会比较快。

资料传递的格式通常是用XML或JSON。

回到KKBOX的例子，就是使用AJAX技术汇入资料的。KKBOX先传给我们一个只有HTML框架的空壳，再用JavaScript将资料填上去，最後才是我们所见的网页。

AJAX 爬虫

讲再多还不如实际操作一次，首先到KKBOX 华语新歌日榜的网站，F12打开开发人员选单，接着到Network并重新整理。就会看到网站实际上发送了哪些request和收到哪些response。

如果原本已经有东西，请先按clear清除。

第一个档案的名字就跟网站的URL一样，从preview就可以看出没有任何资料，这就是我刚才讲的空壳，这下就不难理解为什麽用requests怎麽样都抓不到了吧?

但我们要的资料究竟在哪里呢? 前面说过资料通常是以XML或JSON格式传送，因此我们要向下找出比较可疑的request，毕竟每个网站资料传送的名称都不同，这部分就比较凭经验了。

总之，最後找到是 daily?category=297&date=2021-09-22... 这个档案，要如何验证呢? 只要preview有出现我们要的资料就好罗!

KKBOX是用JSON格式传送，JSON的部分Day19有讲过，没看过的建议看一下。KKBOX还很贴心地都把资料都整理好了呢，我们就心怀感激地拿来用吧~~

我们还可以观察到这个request是用GET的method传递参数的，多切换几页後，大致上就可以猜出参数代表的含意。

• category：分类，华语是297，西洋是390，日语是308
• date：日期，哪一天的排行榜
• limit：回传排名前N名的资料
• type：歌曲类型，新歌or单曲

只要抓到这个规则後，以後想要什麽资料就直接改GET的参数就行了。

这种根据参数传回资料的request又称作API(Application Programming Interface)，简单讲就是在用户端和服务器间传递资料的媒介，好比餐厅中位於客人和厨房间的服务生。

其实现在这种动态网站还满多的，经常用API的形式来交换前端和後端的资料，甚至有API设计的风格规范RESTful API，像是GET就是用来取得资料，就当作是补充，有兴趣不妨多研究看看。

小结

今天教了动态网页常用到的技术--AJAX，了解KKBOX是先传HTML的空壳，之後再用JavaScript填上资料，并找到KKBOX用来传递资料的request，直接取得资料。明天就来讲怎麽使用Python将这些资料抓下来吧!

如果喜欢这系列文章麻烦帮我按Like加订阅，你的支持是我创作最大的动力~

本系列文章以及范例程序码都同步更新在GitHub上，後续会持续的更新，如果喜欢也麻烦帮我按个星星吧~

有任何问题或建议，都欢迎在底下留言区提出，还请大家多多指教。