# JavaScript - AJAX - 網路請求 ###### tags: `javascript` `AJAX` `axios` ## HTTP 狀態碼 * [HTTP 狀態碼](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status) * 回應分為五種： * 資訊回應 (Informational responses, 100–199), * 成功回應 (Successful responses, 200–299), * 重定向 (Redirects, 300–399), * 用戶端錯誤 (Client errors, 400–499), * 伺服器端錯誤 (Server errors, 500–599). * 常見狀態碼： * 200 OK 載入成功。 * 304 記憶體有快取，曾載入過檔案已存在瀏覽器，不重新載入。（可強制重新載入） * 404 用戶端發出錯誤請求，伺服器找不到對應檔案。 * 500 後端伺服器錯誤。 ## 各種發出網路請求的 JS 寫法種類介紹 ### JavaScript 原生寫法 #### [XMLHttpRequest](https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) ```javascript= function reqListener () { console.log(this.responseText); } var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", "http://www.example.org/example.txt"); oReq.send(); ``` #### [Fetch](https://developer.mozilla.org/zh-TW/docs/Web/API/Fetch_API/Using_Fetch) ```javascript= fetch('http://example.com/movies.json') .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); ``` ### 套件，需額外載入 JavaScript #### [axios](https://github.com/axios/axios) * Features * Make XMLHttpRequests from the browser * Make http requests from node.js * Supports the Promise API * Intercept request and response * Transform request and response data * Cancel requests * Automatic transforms for JSON data * Client side support for protecting against XSRF ```javascript= axios.get('/user/12345') .then(function (response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); }); ``` ## axios ### axios-response 參數 ```javascript= // 以 get 發出網路請求 axios.get('https://hexschool.github.io/ajaxHomework/data.json') // 伺服器回傳資料，才會觸發 then 執行裡面函式 .then(function (response) { console.log(response.data); // 資料內容 console.log(response.status); // 狀態碼 console.log(response.statusText); console.log(response.headers); console.log(response.config); }); ``` ### axios-將外部資料寫入到網頁上 ```htmlmixed= <body> <div class="main"></div> <!-- axios --> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <!-- all.js --> <script src="all.js"></script> </body> ``` ```javascript= axios.get('https://hexschool.github.io/ajaxHomework/data.json') // 伺服器回傳資料，才會觸發 then 執行裡面函式 .then(function (response) { let ary = response.data; console.log(ary[0].name); let main = document.querySelector(".main"); console.log(main); main.innerHTML = `<h1>${ary[0].name}</h1>`; }); ``` >最後會顯示大標題 "王小名" ### axios-非同步觀念 >非同步取得資料：發出 get 請求等待伺服器回傳資料較久，因此會先跳過等待 response，直接先執行後續的程式碼。 ```javascript= let ary = []; axios.get('https://hexschool.github.io/ajaxHomework/data.json') .then(function (response) { console.log('資料有回傳了'); // NO.2 ary = response.data; console.log(ary); // NO.3 }); console.log(ary); // NO.1這個最先印出 ``` ### 透過函式設計處理非同步 >確保 response data 回傳再執行渲染網頁 >管理資料狀態 ```javascript= let ary = []; axios.get('https://hexschool.github.io/ajaxHomework/data.json') .then(function (response) { console.log('資料有回傳了'); // NO.2回傳 ary = response.data; // 確保 response data 回傳再執行渲染網頁 renderData(); }); // 註冊渲染網頁函式 function renderData() { console.log(ary); // NO.3回傳 const main = document.querySelector(".main"); main.innerHTML = `<h1>${ary[0].name}</h1>`; } console.log(ary); // NO.1回傳 ```