1. 什么是AJAX艇潭？它又能做什么诫硕？

先來看看這個(gè)名稱的構(gòu)成：Asynchronous JavaScript and XML
顧名思義祠饺，也就是異步的javascript和XML伍俘，而XML 被設(shè)計(jì)用來傳輸和存儲(chǔ)數(shù)據(jù)粘咖。所以也可以理解為異步的請(qǐng)求數(shù)據(jù)蚣抗。
來看看度娘給的答案：

• AJAX 不是一門編程語言，是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)(方法)
• AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁面的情況下瓮下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容翰铡。
• AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執(zhí)行讽坏。

因?yàn)榻?jīng)常使用 jQuery 來做請(qǐng)求的原因锭魔，經(jīng)常會(huì)把 AJAX 理解為是jQuery獨(dú)有的東西，其實(shí)完全不是路呜，AJAX和jQuery是兩個(gè)東西迷捧，只不過是jQuery對(duì)其做了封裝而已。

2. AJAX能做什么胀葱？

在傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容漠秋，必須重載整個(gè)網(wǎng)頁頁面淹遵。
可以創(chuàng)建一個(gè) form 表單模擬一下扼仲，當(dāng)點(diǎn)擊 submit 提交表單的時(shí)候吕晌，瀏覽器就會(huì)刷新頁面降传，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由于網(wǎng)絡(luò)太慢或者其他原因航棱，就會(huì)得到一個(gè)404頁面骇两。
如果要讓用戶留在當(dāng)前頁面中宴咧，同時(shí)發(fā)出新的HTTP請(qǐng)求朝群，就必須用JavaScript發(fā)送這個(gè)新請(qǐng)求燕耿，接收到數(shù)據(jù)后，再用JavaScript更新頁面姜胖，這樣一來誉帅，用戶就感覺自己仍然停留在當(dāng)前頁面，但是數(shù)據(jù)卻可以不斷地更新右莱。也就是以回調(diào)函數(shù)的形式蚜锨，進(jìn)行一個(gè)異步的操作，例如點(diǎn)擊 submit 按鈕慢蜓，頁面并未刷新亚再，等數(shù)據(jù)返回成功之后，直接渲染到頁面晨抡。
通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換氛悬，AJAX可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下耘柱，對(duì)網(wǎng)頁的某部分進(jìn)行更新如捅。也就是我們常說的局部刷新。-----這就是AJAX的作用

2. AJAX怎么用调煎？

來看看如何實(shí)現(xiàn)一個(gè)AJAX：

• XMLHttpRequest 對(duì)象是 AJAX 的基礎(chǔ)镜遣。
  XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下士袄，對(duì)網(wǎng)頁的某部分進(jìn)行更新悲关。
  所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。

• 所以首先要?jiǎng)?chuàng)建一個(gè) XMLHttpRequest 對(duì)象

  // 第一步：創(chuàng)建一個(gè) XMLHttpRequest 請(qǐng)求
  var xmlhttp;
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  console.dir(xmlhttp );// 看一下 XMLHttpRequest 對(duì)象都有哪些東西
  

  在控制臺(tái)娄柳，先看一下 XMLHttpRequest 對(duì)象都有哪些東西：
  

  XMLHttpRequest
  
  XMLHttpRequest 對(duì)象及其原型上有很多屬性和方法坚洽，看看這些屬性和方法如何構(gòu)成一個(gè)異步請(qǐng)求：

  1. 向服務(wù)器發(fā)送請(qǐng)求 -------- open() 和 send()
XMLHttpRequest 對(duì)象中 open() 和 send() 方法是用來向服務(wù)發(fā)送請(qǐng)求的

     • open() ：規(guī)定請(qǐng)求的類型、URL以及請(qǐng)求方式
       語法：open(method,url,async)
       參數(shù)說明：
       • method：請(qǐng)求的類型西土，GET或POST
         與 POST 相比讶舰，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用需了。
         然而跳昼，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
         - 無法使用緩存文件(需要更新服務(wù)器上的文件或數(shù)據(jù)庫（GET請(qǐng)求可能會(huì)請(qǐng)求緩存文件肋乍，狀態(tài)碼304）)
         - 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
         - 發(fā)送包含未知字符的用戶輸入時(shí)鹅颊，POST 比 GET 更穩(wěn)定也更可靠
       • url：文件在服務(wù)器上的位置，也就是請(qǐng)求的路徑
       • async：請(qǐng)求的方式墓造，true(異步)或false(同步)堪伍，默認(rèn)為 true锚烦；
         一定要考慮好什么情況下才設(shè)置為false，因?yàn)?false 狀態(tài)為同步狀態(tài)帝雇，在請(qǐng)求過程中涮俄，瀏覽器將停止響應(yīng)，直到AJAX請(qǐng)求完成尸闸。

     了解了如何發(fā)送請(qǐng)求之后彻亲，我們來通過創(chuàng)建的XMLHttpRequest對(duì)象來發(fā)送一個(gè)請(qǐng)求

     // 第二步：發(fā)送請(qǐng)求
     xmlhttp.open('GET', '/data/test.txt', true); // 這里請(qǐng)求的是一個(gè)本地的文件
     xmlhttp.send();
     

  2. 處理服務(wù)器響應(yīng)-----當(dāng)請(qǐng)求發(fā)送到服務(wù)器以后，服務(wù)器會(huì)做出響應(yīng)吮廉，需要執(zhí)行一些基于這些響應(yīng)的任務(wù)苞尝。
     XMLHttpRequest對(duì)象的三個(gè)重要的屬性：

     • onreadystatechange ：響應(yīng)的回調(diào)函數(shù)，每當(dāng) readystate 發(fā)生變化時(shí)宦芦，都會(huì)執(zhí)行該函數(shù)
     • readystate : 存有 XMLHttpRequest 的狀態(tài)信息宙址，是指運(yùn)行請(qǐng)求所經(jīng)歷的過程，無論訪問是否成功都將響應(yīng)的步驟调卑。從 0 到 4 發(fā)生變化曼氛。
       • 0：請(qǐng)求未初始化
       • 1：服務(wù)器連接已建立
       • 2：請(qǐng)求已接收
       • 3：請(qǐng)求處理中
       • 4：請(qǐng)求已完成
     • status: HTTP狀態(tài)碼，無論請(qǐng)求是否成功令野，都會(huì)返回舀患。由HTTP協(xié)議根據(jù)所提交的信息，服務(wù)器所返回的HTTP頭信息代碼气破。（由1-5開頭的三位數(shù)字組成）
       • 1xx：信息響應(yīng)類聊浅，表示接收到請(qǐng)求并且繼續(xù)處理
       • 2xx：處理成功響應(yīng)類，表示動(dòng)作被成功接收现使、理解和接受
       • 3xx：重定向響應(yīng)類低匙，為了完成指定的動(dòng)作，必須接受進(jìn)一步處理
       • 4xx：客戶端錯(cuò)誤碳锈，客戶請(qǐng)求包含語法錯(cuò)誤或者是不能正確執(zhí)行
       • 5xx：服務(wù)端錯(cuò)誤顽冶，服務(wù)器不能正確執(zhí)行一個(gè)正確的請(qǐng)求
         常見的http狀態(tài)碼：
       • 200：請(qǐng)求成功
       • 304：該資源在上次請(qǐng)求之后沒有任何修改，表示使用的為緩存文件售碳，請(qǐng)求方式為GET的時(shí)候需要注意
       • 400：無法找到請(qǐng)求資源
       • 401：訪問資源的權(quán)限不夠
       • 403：沒有權(quán)限訪問資源
       • 404：請(qǐng)求路徑錯(cuò)誤强重，需要訪問的資源不存在
       • 405：需要訪問的資源被禁止訪問
       • 407：訪問的資源需要代理身份驗(yàn)證
       • 414：請(qǐng)求的URL過長(zhǎng)
       • 500：服務(wù)器內(nèi)部錯(cuò)誤
         更多狀態(tài)碼信息說明：http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

  3. 接收服務(wù)器響應(yīng)
     responseText 和 responseXML 屬性接受服務(wù)器響應(yīng)

     • responseText :獲得字符串形式的響應(yīng)數(shù)據(jù)。
     • responseXML:獲得 XML 形式的響應(yīng)數(shù)據(jù)贸人。

     知道了如何處理服務(wù)器響應(yīng)及接收服務(wù)器響應(yīng)之后间景，我們來處理并接收服務(wù)器響應(yīng)

     // 第三步：處理服務(wù)器響應(yīng)
     xmlhttp.onreadystatechange = function (){
       // 判斷請(qǐng)求是否已經(jīng)完成
       if (xmlhttp.state === 4){
         // 判斷請(qǐng)求是否成功
         if (xmlhttp.status === 200) {
           // 第四步：接收服務(wù)器響應(yīng)
           // 將返回的數(shù)據(jù)渲染在DOM中
           document.getElementById('test').innerText = request.responseText;
         } else {
          // 如果請(qǐng)求不成功，輸出狀態(tài)碼艺智，根據(jù)狀態(tài)碼判斷錯(cuò)誤原因
           console.log(xmlhttp.status);
         }
       }
     }
     

     /data/test.txt 中的數(shù)據(jù)為字符串： Hello AJAX!
     查看頁面數(shù)據(jù)渲染的結(jié)果倘要，(需要啟動(dòng)一個(gè)本地web服務(wù)，這里使用的是live-server)：
     

     渲染結(jié)果
     
     至此十拣，一個(gè)完整的原生AJAX就出來了封拧。