📚 AJAX === * AJAX是指不換頁面只換資料的技術(不需要一直浪費時間換頁面、結果重要的資料使用者卻一直遲遲撈不到) * 網頁請求不是同時發生的，是先跑HTML再跑資料(ex: img、http)，跑到什麼就請求什麼 ![](https://i.imgur.com/3hitmlN.png) 狀態碼: - 200: 成功ok - 304: 之前載過、沒有新增編輯，因此不會跟伺服器重要 - 500: 伺服器有問題、程式壞掉 - 404: not found - 101: 對方伺服器運作中(已讀) - 301: 請求資源的 URI 已被改變，會在回應內給予新的 URI 發出網路請求的種類: + JaveScript原生寫法 - XMLHttpRequest - Fetch + 套件、需額外載入js - axios(先載套件，再寫入檔案) HTML: ```html= <!--載入套件--> <body> <h1>hello world</h1> <!--axios CDN 要放在js的上方--> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="all.js"></script> </body> ``` JS: ```javascript= //get請求，括號放網址 axios.get('https://hexschool.github.io/ajaxHomework/data.json') .then(function (response) { console.log(response.data);//回傳的資料 console.log(response.status);//狀態碼 console.log(response.statusText); console.log(response.headers); console.log(response.config); }); //把請求來的資料放在網頁上 axios.get('https://hexschool.github.io/ajaxHomework/data.json') .then(function (response) { const title = document.querySelector("h1"); title.textContent = response.data[0].name }); ``` :::success 非同步特性: 在丟出請求的時候，會有1秒左右的時間在等待response，這時程式會繼續往下執行、不會等get跑完，等收到response後才會自動跑完get ::: * get:請求資料 * Post:傳送資料→對方會檢查你的網址格式與資料格式(content-type)是否正確 * delete:刪除資料 常見content-type: (要問清楚資料格式) - application/x-www-form-urlencoded (用表單格式發出網路請求) ☑️常用 - application/json (json格式、axios預設，但其實也支援其他格式) - multipart/form-data (檔案格式ex:圖檔、pdf檔)☑️常用 - text/plain (記事本格式) JS: ```javascript= //post請求語法 let data = { email: '1314520@hexschool.com', password: '000000' } axios.post("https://hexschool-tutorial.herokuapp.com/api/signup",data) .then( (response) => console.log(response)) .catch( (error) => console.log(error)) ``` > 8-> "https://hexschool-tutorial.herokuapp.com/api/signup": 第一個參數擺API網址 > 8-> data: 第二個參數為content-type ## post過程 ![](https://i.imgur.com/TyBJujM.png) > signup是此post請求的名稱 > preflight為試探性的戳伺服器看是否有支援 > xhr為確認支援後正式送出post請求 ![](https://i.imgur.com/nh7gCCv.png) > request headers為post header > request payload為post data > response headers為post response header > post response data 在 response 裡 ## 實作 HTML: ```html= <body> <div class="input"> <div> <label for="mail">帳號</label> <input type="text" placeholder="xxx@aaa.com" name="mail" class="mail"> </div> <div><label for="code">密碼</label> <input type="text" placeholder="****" name="code" class="code"> </div> <div> <input type="button" value="送出" class="send"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="all.js"></script> </body> ``` JS: ```javascript= const send = document.querySelector(".send"); const mail = document.querySelector(".mail"); const code = document.querySelector(".code"); let data = { email:"", password:"" } send.addEventListener("click",function(e){ if( mail.value==="" || code.value===""){ alert("格式不正確"); return; } data.email = mail.value; data.password = code.value; postAxios(); }) //post請求function const postAxios = ()=>{axios.post("https://hexschool-tutorial.herokuapp.com/api/signup",data) .then(response => { alert(response.data.message); mail.value =""; code.value =""; }) .catch(error => error);} ``` [codepen](https://codepen.io/super-shrimp/pen/bGRdywr)