AJAX 是什么

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

AJAX 請(qǐng)求步驟

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

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

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

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

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

注意：

• async 用于表示該請(qǐng)求是否異步處理，默認(rèn)是 true ，所以一般不會(huì)寫
• post 請(qǐng)求不同于 get 請(qǐng)求，send(string) 方法 post 請(qǐng)求時(shí)才使用字符串參數(shù)，否則不用帶參數(shù)
• post 請(qǐng)求一定要設(shè)置請(qǐng)求頭的格式內(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 異步處理
   異步處理比較麻煩，要在請(qǐng)求狀態(tài)事件中處理。

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

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

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

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

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