iT邦幫忙

2022 iThome 鐵人賽

DAY 25
0

後面幾天我們要來介紹 AJAX ,也就是非同步的 JavaScript 技術,在那之前我們要先來了解何謂網路請求

透過瀏覽器發出網路請求

首先我們先來了解甚麼是網路請求

當我們在瀏覽器上面的網址列輸入網址,按確認 (Enter) 後網頁會重新整理,按確認 (Enter) 這個動作,就是透過這個瀏覽器發出一個網路請求,跟瀏覽器說我想要取得 (get) 一個網頁資訊,瀏覽器就會知道我們想要獲得這個網址的資訊,並且去幫忙找尋這個網址有沒有對應的伺服器。

google 伺服器收到請求後,會透過 request 的表頭資訊去了解發出請求的是甚麼樣的人、是否符合回傳的資格,都沒問題後,就會回應想要的資訊:


如果想要獲得該伺服器更多的服務,該伺服器接收到網址請求後就會去它們的資料庫去撈取我們想要的資料,資料庫會判斷是否有該筆資料,有或沒有都會再透過伺服器處理後回傳對應的資料或狀態。

透過開發人員工具查看網路請求

透過 Chrome 的開發人員工具裡面的網路 (Network) 可以詳細地看到發出網路請求的過程與接收到的資訊,此範例中在接收到第一個 HTML 檔案後便開始由上而下依序地解析,並依序發出請求去試著抓取想要的檔案。

網頁請求狀態碼

HTTP 狀態碼表明一個 HTTP 要求是否已經被完成。回應分為五種:

  • 資訊回應 (Informational responses, 100–199),
  • 成功回應 (Successful responses, 200–299),
  • 重定向 (Redirects, 300–399),
  • 用戶端錯誤 (Client errors, 400–499),
  • 伺服器端錯誤 (Server errors, 500–599).

摘錄自 MDN

這邊介紹一些比較常見的狀態碼:

  1. 404 (Not Found):伺服器找不到請求的資源,會變為紅字
  2. 200 (OK):請求成功
  3. 304 (not modified):表示該檔案之前就載入過了,且中間沒有被編輯過,所以會用之前暫存的檔案,不會再跟伺服器重複索取,這樣可以有效降低記憶體的空間
  4. 500 (Internal Server Error):伺服器端發生未知或無法處理的錯誤,令伺服器無法完成請求。

參考資料

線上課程
MDN


上一篇
Day24 更多陣列資料處理 (3) - join()、find()、findIndex()
下一篇
Day26 AJAX 非同步的 JavaScript 技術 (1) - 透過 JavaScript 發出網路請求
系列文
從基礎開始,用 JavaScript 從頭建立起程式肌肉 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言