1. Ajax是什么

   Ajax（Asynchronous JavaScript + XML）即異步JavaScript + XML。講Ajax之前得先聊聊HTTP。HTTP（超文本傳輸協(xié)議）協(xié)議規(guī)定了Web瀏覽器如何從服務(wù)器獲取信息或者向服務(wù)器提交內(nèi)容， 是Web數(shù)據(jù)通信的基礎(chǔ)。

   Web瀏覽器通常會(huì)處理大量的HTTP請(qǐng)求，一般主要對(duì)HTTP的控制算是有兩類

   • 非腳本控制

     • 點(diǎn)擊頁(yè)面中的超鏈接，如<a >baidu</a>
     • 點(diǎn)擊提交表單 <button type="submit">submit</submit>， 會(huì)將頁(yè)面信息提交到<form>標(biāo)簽的action地址，并跳轉(zhuǎn)。
     • 直接在地址欄輸入一個(gè)新的URL

   • 腳本控制（通過(guò)JavaScript代碼來(lái)操作HTTP）

     • 通過(guò)對(duì)window.location 相關(guān)屬改變或者方法的調(diào)用

     • 調(diào)用表單對(duì)象的submit方法

然而上述方法對(duì)HTTP請(qǐng)求的控制都會(huì)導(dǎo)致頁(yè)面的重載，這就導(dǎo)致用戶操作之后必須等到整個(gè)頁(yè)面更新之后才能夠做后續(xù)的操作，體驗(yàn)很差。但是通過(guò)Ajax應(yīng)用可以實(shí)現(xiàn)操作HTTP和Web服務(wù)器之前的數(shù)據(jù)交換，而不導(dǎo)致頁(yè)面的重載。

Ajax的實(shí)現(xiàn)也有很多中，從廣義上來(lái)講我們通過(guò)異步的方式和服務(wù)器進(jìn)行數(shù)據(jù)的通訊，就算是一個(gè)Ajax的實(shí)現(xiàn)。例如：

1. <img src="https://www.baidu.com/img/bd_logo1.png" /> 通過(guò)img的src屬性，雖然可以異步加載數(shù)據(jù)但是這種方式無(wú)法試下完整的數(shù)據(jù)交互，因?yàn)閿?shù)據(jù)交互是單向的。

2. 通過(guò)<iframe>的src屬性。

   1. 客戶端指定一個(gè)需要請(qǐng)求的URL；
   2. 設(shè)置<iframe>的src屬性為此URL;
   3. 瀏覽器解析<iframe>標(biāo)簽，像服務(wù)器發(fā)送一個(gè)請(qǐng)求；對(duì)應(yīng)的服務(wù)器創(chuàng)建一個(gè)包含響應(yīng)內(nèi)容的HTML文檔，把它返回給瀏覽器，并在<iframe>中顯示。

3. 通過(guò)<script>設(shè)置src屬性開發(fā)起HTTP GET請(qǐng)求。

4. XMLHttpRequest API, 它定義了腳本操作HTTP的一些API 從而實(shí)現(xiàn)異步通信，這也是我們通常說(shuō)說(shuō)的Ajax核心，所以我們一般常說(shuō)的Ajax就是使用 XMLHttpRequest 對(duì)象與服務(wù)器通信。

Ajax最主要的兩個(gè)特性

• 在不重新加載頁(yè)面的情況下發(fā)送請(qǐng)求給服務(wù)器。

• 接受并使用從服務(wù)器發(fā)來(lái)的數(shù)據(jù)。

2. Ajax原理

   Ajax的原理簡(jiǎn)單來(lái)說(shuō)通過(guò)XMLHttpRequest對(duì)象來(lái)向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用javascript來(lái)操作DOM而更新頁(yè)面。因此所以這里我們必須弄清楚 XMLHttpRequest。

   XMLHttpRequest：XMLHttpRequest 是一個(gè) API，它為客戶端提供了在客戶端和服務(wù)器之間傳輸數(shù)據(jù)的功能。它提供了一個(gè)通過(guò) URL 來(lái)獲取數(shù)據(jù)的簡(jiǎn)單方式，并且不會(huì)使整個(gè)頁(yè)面刷新。這使得網(wǎng)頁(yè)只更新一部分頁(yè)面而不會(huì)打擾到用戶。XMLHttpRequest 在 AJAX 中被大量使用。下面是一個(gè)完整的通過(guò)腳本湊操作HTTP的過(guò)程。

   /**
   * => Ajax請(qǐng)求的整個(gè)過(guò)程
   * 1. 創(chuàng)建httpRequest對(duì)象；
   * 2. 設(shè)置響應(yīng)的處理方法來(lái)處理服務(wù)器的響應(yīng)；
   * 3. 調(diào)用httpRequest對(duì)象的open()方法定義要請(qǐng)求的URL和請(qǐng)求方式(GET、POST等)；
   * 4. 調(diào)用httpRequest對(duì)象的send()方法向服務(wù)器發(fā)送請(qǐng)求。
   */
   
   // 這里兼容了早起版本的 IE6，創(chuàng)建了一個(gè)httpRequest對(duì)象
   var httpRequest = null;
   if (window.XMLHttpRequest) { // 標(biāo)準(zhǔn)瀏覽器
       httpRequest = new XMLHttpRequest();
   } else if (window.ActiveXObject) { // IE6或早期瀏覽器
       httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   if (!httpRequest) {
       alert('無(wú)法創(chuàng)建 XMLHTTP 實(shí)例');
       return;
   }
   
   // 客戶端處理響應(yīng)的方法
   httpRequest.onreadystatechange = function () {
       if (httpRequest.readyState === XMLHttpRequest.DONE) {
         if (httpRequest.status === 200) {
           console.log(httpRequest.responseText); // 處理請(qǐng)求成功數(shù)據(jù)
         } else {
           console.log('請(qǐng)求錯(cuò)誤！');
         }
       }
   };
   httpRequest.open('GET', 'http://www.example.org/some.file', true);
   httpRequest.send();
   

   詳細(xì)說(shuō)明： https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started

   關(guān)于XMLHttpRequest對(duì)象： https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest

3. Ajax相關(guān)面試題目

   • ajax常見(jiàn)面試題
   • AJAX面試題都在這里
   • 經(jīng)典的20道AJAX面試題
   • ajax跨域，這應(yīng)該是最全的解決方案了