{%hackmd /au2gfdvHR0mEjvR_NzROqA?both %} ###### tags: `AJAX` [AJAX] 網路請求 === [TOC] <h2 class="title">什麼是網路請求？</h2> > ![](https://i.imgur.com/R8oqOWe.png) > <small>get資料流程</small> > ![](https://i.imgur.com/kkHCwTS.png) > <small>從console看AJAX資料</small> - 瀏覽器發出網路請求 1. 透過瀏覽器在網址列輸入網址 - https://zh.wikipedia.org/wiki/AJAX 2. 按下 Enter 進行傳送網路請求 3. 透過 **網址** 轉換成對應的 **IP**，找到對應的伺服器 - zh.wikipedia.org -> 轉換成 **IP** 4. 伺服器會檢查 - 是甚麼人 - 從哪邊來 - 想要甚麼資訊 -> /wiki/AJAX 5. 伺服器 從 資料庫 撈出想要的資料 -> /wiki/AJAX 6. 資料庫 回傳資料給 伺服器 -> /wiki/AJAX 7. 伺服器 再回傳資料給 使用者瀏覽器端 - 不一定要用瀏覽器，可以透過其他硬體或軟體，只要是可以發出網路請求，就可以做到 - 像是可以直接使用 JS 來發出請求 <h2 class="title">從網頁架構瞭解網頁請求</h2> - 如果要在瀏覽器開啟本地端檔案，當瀏覽器發出網路請求，本地端伺服器會透過路徑尋找檔案，成功後然後將內容回傳到瀏覽器。 > ![](https://i.imgur.com/ExmiftJ.png) > <small>get本地端資料流程</small> - 如何查看網頁所有的網路請求 - 開發人員工具(console) > Network - Network 只會在有開啟時才會紀錄工作，所以如果要記錄網頁載入過程，就需要在網頁剛載入時就開起 Network 頁面 - 網頁載入的過程為 1. 發出第一次請求，找到 `index.html` 檔案，然後逐行解析程式碼。 2. 遇到 `img` ，來源為外部檔案，發出第二次請求跟伺服器要圖片。 3. 遇到 `<script>`，來源為外部檔案，發第三次請求載入 JS 程式碼。 ```htmlembedded= <!-- localhost.8080/index.html --> <html> <head></head> <body> <h1 class="hrader">標題</h1> <ul class="list"></ul> <img src="xxx.jpg" alt=""/> <script src="all.js"></script> </body> </html> ``` > ![](https://i.imgur.com/y9vCJKO.png) > <small>Network 顯示資料載入過程</small> > ![](https://i.imgur.com/OLXZVlT.png) > <small>載入順序從 Waterfall 由上至下，雖然不太明顯，但每個檔案在載入時間上還是有一點點間隔</small> > ![](https://i.imgur.com/HGPAC39.png) > <small>看起來像同時載入，但是有順序的</small> > ![](https://i.imgur.com/l8zDI7t.png) > <small>為何會在網頁的all.js後面還會載入東西？因為瀏覽器跟伺服器也會傳送資料，但網頁只會使用需要的資料(`index.html`、`img`、`all.js`)</small> <h2 class="title">網頁請求狀態碼</h2> > 解析傳送結果 - [MDN - HTTP 狀態碼](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status) | 狀態碼 | 狀態解析 | | ------- | -------- | | 200 | 請求成功 | | 304 | 沒有編輯(Not Modified)。之前已經載入過了，記憶體有快取，不會跟伺服器重新要資料，可節省記憶體資源。 | | 404 | 找不到請求的資源 | | 500 | 伺服器有未知錯誤 | <h2 class="title">request、response</h2> :::info - 無論是 request 還是 response 都有 headers。 - headers 用來記錄網頁的資訊，不會呈現到網頁上。 ::: > ![](https://i.imgur.com/ecPXbnW.png) > <small>request (請求)，response (回傳)</small> <h3 class="title">request (請求)</h3> - 通常會在網址列中夾入伺服器發出的個人資訊 - 如何查看傳送的請求中有哪些資訊 - 開發人員工具 > Network > 點擊要查看的請求 > Headers > Request Headers > ![](https://i.imgur.com/2y90Uzs.png) > <small>Headers</small> > ![](https://i.imgur.com/ePiWgAD.png) > <small>Request Headers，傳送的基本資訊(從甚麼瀏覽器、有什麼樣的資料、我的身分...)</small> <h3 class="title">response (回傳)</h3> - response headers - 不會顯示在畫面上，是為了讓瀏覽器知道 response headers 有甚麼內容 - 路徑：開發人員工具 > Network > 點擊要查看的請求 > Headers > Response Headers - content-type：可得知回傳的資料格式，會依據此回應來決定如何顯示。 > ![](https://i.imgur.com/8hC2wtM.png) > <small>text/html：此次 response 為 html 格式，這樣就會把收到的資料顯示成網頁格式</small> - response data：實質上回傳的資料內容 - 路徑：開發人員工具 > Network > 點擊要查看的請求 > Response > ![](https://i.imgur.com/Bx2cteI.png) > <small>Response 顯示的才是回傳內容</small> ## CORS - cors-anywhere <iframe height="300" style="width: 100%;" scrolling="no" title="axios 測試" src="https://codepen.io/luxyenni-the-bold/embed/powYBpV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/luxyenni-the-bold/pen/powYBpV"> axios 測試</a> by AndersonShen (<a href="https://codepen.io/luxyenni-the-bold">@luxyenni-the-bold</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>