JS part6_Ajax_axios

 #AJAX:非同步的JS與XML技術

不重整改動頁面的情況下能取得部分頁面資料

-vertical dots->更多工具>網路開發工具->network -> 可以看到網頁有多少個網路請求

載入順序 index.html->img.src(html順序)->all.js(html順序)

 #網路請求狀態碼(由伺服器回傳)

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

 # 3xx為 已有暫存資料 所以不重新抓取 直接從暫存抓 節省記憶體資源

(若要清除重抓 可以打開開發人員工具 對重新整理右鍵 清除快取...)

 #Request 請求  Response回傳

-Chrome->vertical dots->更多工具>網路開發工具->network -> 網路請求->Headers

請求資料: Request Header +Request Data

回傳資料:Response Header+Response  Data

 #AJAX

(1)JS的網路請求原生寫法: XMLHttpRequest (冗長), Fetch(回傳要轉json)

(2)套件，需額外載入JS: axios

#可CDN載入

#axios整理好的response資訊

axios.get('https://hexschool.github.io/ajaxHomework/data.json')
  .then(function (response) {  //response是axios整理好的資訊
    console.log(response.data);//data本身
    console.log(response.status);//狀態馬
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

#取出資料後顯示在網頁上https://codepen.io/xarielleex/pen/eYWMpMp?editors=1010

 #Axios非同步

因為在資料還未回傳時，js允許程式先繼續往下跑(防止使用者看到整個頁面空白)，所以可能會有資料來不及回傳、賦值的問題

function內資料還未回傳所以未執行，而下方console.log程式先跑，所以是空陣列

#用函式處理非同步.
https://codepen.io/xarielleex/pen/GRmxopz?editors=1010

#Http請求方法

#POST 

api練習 https://github.com/hexschool/nodejs_ajax_tutorial

#POST 四種常見contentType

請求資料格式Request header contentType

1. application/x-www-form-urlencoded
2.multipart/form-data (請求為檔案)
3. application/json(axios預設,練習的api也適用此)
4. text/xml(記事本)

#練習API

CODEPEN

成功CONSOLE會回傳

"message": "帳號註冊成功"

失敗CONSOLE會回傳

 "message": "此帳號已被使用"

-Chrome ->vertical dots->更多工具>網路開發工具->network 

API --> preflight : 先個網址是否支援跨網域有的話執行xhr 

API --> xhr : 請求網址

#帳號註冊練習

#自行練習註冊登入功能(同一api)

SHARE

ariel

• 
• 
• 
• 
•