一. Ajax 是什么？

• 全稱Asynchronous JavaScript and XML；
• 異步的 JavaScript 和 XML；
• 可以在不重新加載整個(gè)頁(yè)面的情況下，與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容；
• 能夠?qū)崿F(xiàn)局部刷新，大大降低了資源的浪費(fèi)；
• 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行；
• 是一門用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)；
• 傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)；

二. Ajax工作原理

三. Ajax的使用

Ajax的使用分為四部分：
1.） 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象；
1. 兼容IE低版本瀏覽器（ie5-ie6）；
2. 使用if，else或者try，catch；
2.） 配置請(qǐng)求信息；
1. 請(qǐng)求的方式；
2. 請(qǐng)求文件的路徑；
3. 是否異步，默認(rèn)為true；
3.）發(fā)送請(qǐng)求；
1. get與post的區(qū)別；
2. get與post的使用場(chǎng)景；
4.） 監(jiān)聽(tīng)狀態(tài)變化，執(zhí)行相應(yīng)回調(diào)函數(shù)；
1. http狀態(tài)碼都有哪些？
2. 不同狀態(tài)碼代表的含義？

3.1 創(chuàng)建XMLHttpRequest對(duì)象

目前所有的現(xiàn)代瀏覽器（包括IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建有 XMLHttpRequest 對(duì)象，寫(xiě)法如下：

var xhr = new XMLHttpRequest();

低版本的 IE 瀏覽器 （主要指 IE5 和 IE6）沒(méi)有XMLHttpRequest 對(duì)象，使用 ActiveXObject 對(duì)象，寫(xiě)法如下：

var xhr =new ActiveXObject("Microsoft.XMLHTTP");

舉個(gè)兼容性寫(xiě)法的例子：

為了兼容所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，需要判斷瀏覽器是否支持 XMLHttpRequest 對(duì)象。如果支持，則創(chuàng)建 XMLHttpRequest 對(duì)象。如果不支持，則創(chuàng)建 ActiveXObject ：

var xhr;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
    xhr = new XMLHttpRequest();
}
else
{
    // IE6, IE5 瀏覽器執(zhí)行代碼
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

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

使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：

注意：

• 不推薦使用 async=false，但是對(duì)于一些小型的請(qǐng)求，也是可以的。
• 請(qǐng)記住，JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行。如果服務(wù)器繁忙或緩慢，應(yīng)用程序會(huì)掛起或停止。
• 當(dāng)你使用 async=false 時(shí)，后面不要寫(xiě) onreadystatechange 函數(shù) - 直接把代碼放到 send() 語(yǔ)句后面即可：

  xhr.open("GET","/try/ajax/ajax_demo.txt",false);
  xhr.send();
  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  
  

舉個(gè)栗子：

// 使用get方法請(qǐng)求服務(wù)器上的1.txt文件
xhr.open("GET","1.txt",true);
xhr.send();

3.2.2 GET與POST的區(qū)別

• 與 POST 相比，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用；
• GET存在緩存問(wèn)題，使用GET方法一定要記得清除緩存，不然請(qǐng)求的數(shù)據(jù)不是最新的；
• GET不安全，明文傳輸，POST更安全；
• GET適用于小文件，POST沒(méi)有數(shù)量限制；
• GET使用send方法時(shí)不傳參，POST必須傳參；

3.2.3 只能使用 POST 請(qǐng)求的情況：

• 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
• 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
• 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠

3.2.4 怎么使用POST發(fā)送數(shù)據(jù)？

它其實(shí)就類似于 HTML 表單那樣 POST 數(shù)據(jù)，我們需要使用 setRequestHeader() 來(lái)添加 HTTP 頭。然后在 send() 方法中寫(xiě)要發(fā)送的數(shù)據(jù)：
向請(qǐng)求添加 HTTP 頭方法如下：

xhr.setRequestHeader(header,value);
// header: 規(guī)定頭的名稱;
// value: 規(guī)定頭的值;

xhr.open("POST","/try/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Zhou&lname=minghang");

3.4 監(jiān)聽(tīng)事件變化

• 如果是同步請(qǐng)求的話，不需要寫(xiě)監(jiān)聽(tīng)事件變化函數(shù)；
• 一般默認(rèn)都是異步請(qǐng)求，才寫(xiě)監(jiān)聽(tīng)函數(shù)；

異步請(qǐng)求時(shí)的監(jiān)聽(tīng)事件變化函數(shù)如下：

    xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200){
        document.getElementById("myDiv").innerHTML = xhr.responseText;
    }else{
         console.log('失敗了');
    }
}

3.4.2 onreadystatechange 事件

• 當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
• 每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
• readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

3.4.2.1 onreadystatechange屬性的作用？

存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。

3.4.2.2 readyState屬性的作用？都有哪些狀態(tài)？

• 存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
  • 0: 請(qǐng)求未初始化
  • 1: 服務(wù)器連接已建立
  • 2: 請(qǐng)求已接收
  • 3: 請(qǐng)求處理中
  • 4: 請(qǐng)求已完成，且響應(yīng)已就緒

一般常見(jiàn)的狀態(tài)碼有：

• 200："OK, 成功"
• 404: "頁(yè)面找不到"

狀態(tài)碼具體含義：

• 200：服務(wù)器響應(yīng)正常。
• 304：該資源在上次請(qǐng)求之后沒(méi)有任何修改（這通常用于瀏覽器的緩存機(jī)制，使用GET請(qǐng)求時(shí)尤其需要注意）。
• 400：無(wú)法找到請(qǐng)求的資源。
• 401：訪問(wèn)資源的權(quán)限不夠。
• 403：沒(méi)有權(quán)限訪問(wèn)資源。
• 404：需要訪問(wèn)的資源不存在。
• 405：需要訪問(wèn)的資源被禁止。
• 407：訪問(wèn)的資源需要代理身份驗(yàn)證。
• 414：請(qǐng)求的URL太長(zhǎng)。
• 500：服務(wù)器內(nèi)部錯(cuò)誤。

四. 怎么處理服務(wù)器反饋的數(shù)據(jù)？

如果我們想獲得服務(wù)器上的數(shù)據(jù)，并進(jìn)行相應(yīng)的操作，這就要用到XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

• responseText屬性：
  • 獲得字符串形式的響應(yīng)數(shù)據(jù);
  • 如果來(lái)自服務(wù)器的響應(yīng)并非 XML，請(qǐng)使用 responseText 屬性；
  • responseText 屬性返回字符串 形式的響應(yīng)；

  document.getElementById("myDiv").innerHTML=xhr.responseText;
  

• responseXML屬性：
  • 獲得 XML 形式的響應(yīng)數(shù)據(jù)。
  • 如果來(lái)自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對(duì)象進(jìn)行解析，請(qǐng)使用 responseXML 屬性：

  xmlDoc=xmlhttp.responseXML;
  txt="";
  x=xmlDoc.getElementsByTagName("ARTIST");
  for (i=0;i<x.length;i++)
  {
      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
  }
  

document.getElementById("myDiv").innerHTML=txt;
```