AJAX 是什么

ajax 是一種異步請求數(shù)據(jù)的技術(shù)，對于提高用戶體驗度和程序性能有很大的幫助。

AJAX 請求步驟

1. 創(chuàng)建 ajax 核心對象 XMLHttpRequest

let xmlHttp;
if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest;
} else {
  xmlHttp = new ActiveXObject('Microsoft.XMLHttp'); // IE5、6執(zhí)行此代碼
}

2. 向服務(wù)器發(fā)送請求

xmlHttp.open(method, url, async);
xmlHttp.send();

• method: 請求的類型
• url：文件在服務(wù)器上的位置，相對位置或者是絕對位置
• async：true（異步）或者false（同步）

注意：

• async 用于表示該請求是否異步處理，默認(rèn)是 true ，所以一般不會寫
• post 請求不同于 get 請求，send(string) 方法 post 請求時才使用字符串參數(shù)，否則不用帶參數(shù)
• post 請求一定要設(shè)置請求頭的格式內(nèi)容

xmlHttp.open('POST', 'ajax+test.html', true);
xmlHttp.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xmlHttp.send('fname=Herry&lname=Ford');

3. 服務(wù)器詳情處理
   responseText 獲得字符串形式的相應(yīng)數(shù)據(jù)
   responseXML 獲得 XML 像是的相應(yīng)數(shù)據(jù)
   3.1 同步處理

   xmlHttp.open('GET', 'http://www.we.com/fight/win.php', false);
   xmlHttp.send();
   document.getElsementById('tes-box').innerHtml = xmlHttp.responseText;
   

   3.2 異步處理
   異步處理比較麻煩，要在請求狀態(tài)事件中處理。

   xmlHttp.onreadystatechange = () => {
     if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
       document.getElementById('text-box').innerHtml = xmlHttp.responseText;
     }
   }
   

   一共有五種請求狀態(tài)：

   • 0：請求未初始化
   • 1：服務(wù)器鏈接已建立
   • 2：請求已接收
   • 3：請求處理中
   • 4：請求已完成，且相應(yīng)已就緒 .

   xmlHttp.status：響應(yīng)狀態(tài)碼。

   • 200：'OK'
   • 304：該資源在上次請求之后沒有任何修改（通常用于瀏覽器的緩存機制，使用 'GET' 請求時尤其需要注意）
   • 403：（禁止）服務(wù)器拒絕請求
   • 404：（未找到）服務(wù)器找不到請求的網(wǎng)頁
   • 408：（請求超時）服務(wù)器等候請求時發(fā)生超時
   • 500：（服務(wù)器內(nèi)部錯誤）服務(wù)器遇到錯誤，無法完成請求