GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹

GET和POST是兩種基本的網頁請求方法,Ajax是網頁填寫表單時常見技術,瞭解這些概念有助於程式網路爬蟲。本文以Google Chrome瀏覽器的開發人員工具操作範例介紹。

一、Google關鍵字

在Google輸入「贊贊小屋」進行關鍵字搜尋,到它的網址會自動在後面加上「search?client=opera&q=贊贊小屋&sourceid=opera&ie=UTF-8&oe=UTF-8」,這裡的「search」表示是要呈現搜尋結果的網站頁面,問號「?」後面是搜尋相關參數,例「client=opera」意思是表示瀏覽器為Opera,「q=贊贊小屋」代表搜尋(query)關鍵字查詢是贊贊小屋,後面則是像是來源或編碼原則之類的搜尋設定,這是從瀏覽者使用端的角度來看這個事件。

如果是以Google主機的角度來看,它是透過網際網路收到了opera瀏覽器的請求,並且從傳來的網址便可以知道請求的搜尋內容為贊贊小屋,經過主機資料庫處理之後傳回相關的檔案文件給opera瀏覽器,透過html解讀後呈現,便是瀏覽者所看到的資料。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 1

二、網址參數縮減

經過上個步驟瞭解了網址規則,當然可以進行變更,把一些不必要的參數排除掉,得到一個同樣有效但是比較乾淨簡短的網址:「/search?q=贊贊小屋」。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 3

三、開發人員工具

接下來移到Google瀏覽器,同樣輸入剛才網址,點選右上角三個點的工具圖標,選擇「更多工具>開發人員工具」,它是的快速鍵是「Ctrl+Shift+I」。

這個步驟是使用較為常見的Google Chrome瀏覽器,讀者有興趣可以試看看,Opera瀏覽器或者是其他主流的瀏覽器,大部分都有提供同樣的開發工具。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 5

四、GET網頁請求

開啟開發人員頁面之後,上方工具列預設的應該是「Network」,如果不是的話可以切換到這個頁籤,表示要瞭解網路連線相關資訊。中間保留預設的「ALL」,下方點選「search/?」開頭的項目,表示要查看整個網頁的連線資訊。右邊就是這個網頁的「Headers」,這個「Headers」(開頭)有點類似Google伺服器主機收到瀏覽器請求時,在信封開頭的文字資料,在「General」的「Request method」是「GET」,表示是純粹想取得資料,並且資料相關的關鍵字參數已經寫在「Request URL」網址上了。

這裡的「request. URL」網址「?q=」後面似乎是亂碼,但其實它就是中文「贊贊小屋」,只不過在傳送時變成是以英文字碼的形式收發。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 7

五、公開資訊觀測站

瞭解了Google開發人員工具,接下來到另外一個網站:公開資訊觀測站,進入「財務報告公告」頁面,它的網址為:「mops.twse.com.tw/mops/web/t163sb01」。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 9

六、財務公告査詢

沿續上個步驟,「公司代號」欄位輸入「2330」,按下「査詢」,網頁便會顯示台積電最新的財務報告。注意到這裡查詢前後的網址並沒有變更,但是網頁所呈現的內容已經改變,很顯然和之前Google關鍵字搜尋是不一樣的機制。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 11

七、Request Method

和本文第四步驟同樣操作,很快可以瞭解到這個網頁跟Google搜尋同樣是GET網頁請求方法,但是卻又沒辦法和Google一樣在網址上看到所輸入的查詢字:「2330」。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 13

八、網頁內容預覽

在上個步驟的基礎將査詢資訊從「Headers」切換到「Preview」,打算進行網頁內容預覽,會發現到這個頁面其實並沒有任何査詢內容,即使在剛才輸入了「2330」,也看到了2330台積電財務報告,但網頁預覽卻看不到。

這個便是所謂的Ajax技術,它有點像是把網頁框架跟框架內的某一塊內容分開,因此在一開始瀏覽「mops.twse.com.tw/mops/web/t163sb01」時只有這裡看到的查詢框架,在這個網頁上輸入査詢字詞「2330」,再按下「査詢」,相關的內容會在這個框架裡面呈現,在這過程中整個框架是不變的,因此也伺服器毋須再傳送一次框架,只要傳送框架內容即可。

Ajax技術最早大量應用是在Gogle的Gmail上,可以想見當我在網頁上進行電子郵件的收發閱讀時,比較有效率的方式是信箱框架維持不動,每次進行操作時郵差只要傳送信件清單及內即可,不用把整個「信筒」搬來搬去。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 15

九、網頁使用POST

開發人員工具的介面中間切換到「Fetch/XHR」,表示想要瞭解透過Ajax所傳送所傳送的內容,可以看到這裡的網址有包含「AjaxCheck」,伺服器先確定Ajax傳送是否可行,然後在「Headers>General」中的「Request Method」便是「POST」,這個網址的網頁請求方法便是「POST」。類似於我寄的是一封完整的信,在信上有收件人地址,亦即AjaxCheck結尾的網址,而信件主文則是封包密存在信封裡的。﹐

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 17

十、Ajax用法範例

連續上個步驟,再將資訊內容切換到「Preview」預覽網頁,終於看到真正在査詢後所看到財務報告內容,瀏覽器和公開資訊觀測站之間透過Ajax傳送的那封信,如果中間攔截起來打開看,便是這裡的預覽網頁內容:台積電財務報告」。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 19

十一、GET和Post差別

最後簡單整理一下GET和POST兩種網頁請求方法的差別,提供給讀者參考。

GET和POST差異?Ajax是什麼?瀏覽器操作範例介紹 21

網頁基本知識與網路爬蟲

由於現在網路上的資訊相當豐富,實務上蠻多場合會希望透過程式網路爬蟲,系統性和大量性的取得資料,想要順利完成任務,除了要對於程式爬蟲技術有所讚研,網頁相關知識也必須有所涉獵。例如這篇文章所介紹的GET和POST便是很需要,因為通常初階網路爬蟲都是透過網址取得資料,那如果遇到像這篇文章公開資訊觀測站它的網址不會變動,很顯然會遇到困難。贊贊小屋VBA大全集課程有一大部分是介紹如何網路爬蟲,預計之後會以文章形式補充網站網頁相關知識。