iT邦幫忙

2021 iThome 鐵人賽

DAY 22
0
自我挑戰組

從HTML到Python爬蟲的30天之旅系列 第 22

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上,後續會持續的更新,如果喜歡也麻煩幫我按個星星吧~

有任何問題或建議,都歡迎在底下留言區提出,還請大家多多指教。


上一篇
Day 21:專案04 - Facebook爬蟲02 | Selenium
下一篇
Day 23:專案05 - KKBOX風雲榜02 | AJAX
系列文
從HTML到Python爬蟲的30天之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言