跳到主要內容

[2021 IT鐵人賽] 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上，後續會持續的更新，如果喜歡也麻煩幫我按個星星吧~

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

如果喜歡這篇文章，請訂閱我並且拍五下手給予回饋(使用Google或Facebook帳號免費登入，只需要30秒)，資金由LikeCoin提供，完全不會花到各位半毛錢!

因為您的支持，我才更有動力創作出更優質的文章~

Labels:

留言

張貼留言

這個網誌中的熱門文章

[遊記] 2022/07/22 南寮漁港、香山濕地

前言： 2022年的暑假，我來到新竹的工研院實習，因此有了兩個月好好探索這座陌生城市的機會。我在來之前就計畫好了，每周五要選一個地方去旅行，目標是在兩個月內把整個新竹玩透透! 來到了第三個禮拜，今天我約了新竹在地人的大學朋友，請他騎機車載我到處逛逛😆 不過因為他早上有事情，所以我們就約中午吃飯。中午我們去吃城隍廟附近的 阿桂羊牛雜 ，我點了朋友很推的 羊肉炒麵 ，這家的炒麵很特別，醬汁很濃稠，沙茶味很香~ 我點加辣但有點太辣了，下次可能點小辣就好。另外有附飲料和冷氣這點很加分。 (只顧跟朋友聊天，就忘記拍照了😂) 阿桂羊牛雜 羊肉炒麵 $100 推薦指數：4⭐ 吃完飯後，本來想去南寮漁港，但因為今天的太陽真的太大了! 所以朋友就提議先去 新竹巨城 吹冷氣，晚點再去南寮漁港。雖然已經來過巨城一次，但跟別人一起逛就是不太一樣。我們去逛了服飾店、書局和湯姆熊，不知不覺就三點了。於是就離開巨城前往南寮漁港囉~ 本來以為 南寮漁港 很遠，但騎機車一下子就到了，果然在新竹還是要有機車比較方便阿! 我們先去南寮漁港的遊客中心，展望台的景色很不錯，室內還有溜滑梯可以玩呢! 接著我們在附近的魚市場、國際風箏場等地方邊聊邊走，最後走到 魚鱗天梯 。 魚鱗天梯看起來的確很像魚鱗，但聽說他的功能其實是消波塊，還真酷! 底下就有一小片沙灘，因為我今天穿拖鞋，就有下去踩一下海水。不過這裡的海水沒很乾淨，上來後腳上全都是沙子，幸好旁邊就有可以洗腳的地方。 其實旁邊有個滿有名的 17公里海岸自行車道 ，不過我們比較晚才到，所以就沒租腳踏車去騎了。 接著就往南到 香山濕地 ，騎機車也是一下就到了。 香山濕地就像小型的高美濕地，一旁的 賞蟹步道 可以直接走在溼地上方。 賞蟹步道兩旁真的很多螃蟹，照片裡的白點都是螃蟹哦! 當時剛好碰上漲潮，於是我們就在步道上拍起縮時攝影，從影片中可見漲潮的速度有多快! 香山濕地也是看夕陽的好景點，只是有點太早來了，於是我們走去旁邊的 綠色隧道 ，等待夕陽下山。 最後終於等到夕陽了! 加上倒影還滿漂亮的，只可惜今天海面有點雲，無緣看到夕陽落到海平面之下的景色。 最後順路繞去附近的 青青草原 ，雖然天色已經暗了下來，不過因此溜滑梯都不用排隊，可以多溜了幾趟😁 我們也去看了一眼大草原，但因為傍晚有一堆蚊蟲，所以就趕緊撤退了! 最後晚餐去吃 蛋包飯 ，這家也是朋友推薦的...
張貼留言
閱讀全文 »

[Python] async def & await 重點整理

最近實習要用到 FastAPI ，我發現 FastAPI 的 path operation function 會使用 async def ，還會搭配使用 await ，因為對這兩個關鍵字沒很熟，所以就藉機紀錄一下，也避免之後忘記。 async def & await 使用情境 我直接利用下面這個例子來展示什麼情況下可以使用 async 和 await 。 import time def dosomething ( i ): print ( f"第 {i} 次開始" ) time.sleep( 2 ) print ( f"第 {i} 次結束" ) if __name__ == "__main__" : start = time.time() for i in range ( 5 ): dosomething(i+ 1 ) print ( f"time: {time.time() - start} (s)" ) 執行後應該會像這樣。 第 1 次開始 第 1 次結束 第 2 次開始 第 2 次結束 第 3 次開始 第 3 次結束 第 4 次開始 第 4 次結束 第 5 次開始 第 5 次結束 time: 10.048049688339233 (s) 這非常直覺，因為每次呼叫 dosomething() 時都會等待2秒，等完才會執行下一輪，所以最後執行總時間是10秒相當合理。 但仔細想想，如果那2秒是做網路請求或檔案讀寫(IO)，這2秒是不需要CPU的，但CPU就只能發呆2秒，痴痴地等待回傳結果，其他什麼事都不能做，豈不是太浪費了嗎!? (學過作業系統的人就知道，絕對不能讓CPU發呆XD) 因此 Python 就有了 asyncio 這個工具，來徹底的利用(X) 榨乾(O) CPU的效能。 我把剛才的例子改成 asyncio 的版本。 import time import asy...
張貼留言
閱讀全文 »

[Python] 關於 with 你所不知道的事

相信用 C 語言寫過檔案讀取的人都知道，經常開檔後就忘記關檔，或者程式中間跳出例外，因此沒有關檔。這些問題常常讓人非常頭痛😱。 所幸 Python 中有 with 這個語法糖，可以自動幫你開關檔，跳出例外也難不倒他，真的非常好用。 但你真的了解 with 背後的運行原理嗎? 🤔 不知道沒關係，因為你現在就會知道了! context manager 在講 with 之前，必須先介紹一下 context manager ，中文可以翻成 情境管理器 。 為什麼叫做 情境管理器 呢? 我們試想一個情境… 當你進入房間時，就要開啟房間的燈：然後當你離開房間時，就要關閉房間的燈。 像這樣理所當然一定要做的事情，我們就稱為一個情境。而 Python 就是透過情境管理器處理這些情境。 要自己實作 context manager 其實很簡單，只要在 Class 中實作 __enter__() 和 __exit__() 即可。 就以進入房間當作例子。 class Room (): def turn_on_light ( self ): print ( "開燈" ) def turn_off_light ( self ): print ( "關燈" ) def __enter__ ( self ): print ( "進入房間" ) self.turn_on_light() return "在房間裡" def __exit__ ( self, exc_type, exc_value, traceback ): self.turn_off_light() print ( "離開房間" ) with Room() as room: ...
張貼留言
閱讀全文 »