AJAX 是一種用于創建快速動態網頁的技術。它可以令開發者只向服務器獲取數據(而不是圖片，HTML文檔等資源)，互聯網資源的傳輸變得前所未有的輕量級和純粹，這激發了廣大開發者的創造力，使各式各樣功能強大的網絡站點，和互聯網應用如雨后春筍一般冒出，不斷帶給人驚喜。

一、什么是AJAX

Ajax是一種異步請求數據的web開發技術，對于改善用戶的體驗和頁面性能很有幫助。簡單地說，在不需要重新刷新頁面的情況下，Ajax 通過異步請求加載后臺數據，并在網頁上呈現出來。常見運用場景有表單驗證是否登入成功、百度搜索下拉框提示和快遞單號查詢等等。

Ajax的目的是提高用戶體驗，較少網絡數據的傳輸量。同時，由于AJAX請求獲取的是數據而不是HTML文檔，因此它也節省了網絡帶寬，讓互聯網用戶的網絡沖浪體驗變得更加順暢。

二、AJAX原理是什么

Ajax相當于在用戶和服務器之間加了一個中間層,使用戶操作與服務器響應異步化。并不是所有的用戶請求都提交給服務器，像一些數據驗證和數據處理等都交給Ajax引擎自己來做，只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求。

Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發送異步請求，從服務器獲得數據，然后用JavaScript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是JavaScript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。

三、AJAX的使用

1. 創建Ajax核心對象XMLHttpRequest(記得考慮兼容性)

let xhr = null;
if (window.`XMLHttpRequest`) {// 兼容 IE7+, Firefox, Chrome, Opera, Safari  
    xhr = new `XMLHttpRequest`();  
} else {// 兼容 IE6, IE5 
    xhr = new ActiveXObject("Microsoft.XMLHTTP");  
}

2. 向服務器發送請求

xhr.open(method, url, async);  
send(string);//`POST`請求時才使用字符串參數，否則不用帶參數。

• method：請求的類型;GET 或 POST
• url：文件在服務器上的位置
• async：true(異步)或 false(同步)

注意：POST請求一定要設置請求頭的格式內容

xhr.open("`POST`", "test.html", true);  
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
xhr.send("fname=Henry&lname=Ford");  //`POST`請求參數放在send里面，即請求體

 一個Promise對象實現的 Ajax 操作的例子：

const getJSON = function(url) {
  const promise = new Promise(function(resolve, reject){
    const handler = function() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    };
    const client = new XMLHttpRequest();
    client.open("GET", url);
    client.onreadystatechange = handler;
    client.responseType = "json";
    client.setRequestHeader("Accept", "application/json");
    client.send();
  });
  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出錯了', error);
});

3. 服務器響應處理(區分同步跟異步兩種情況)

responseText 獲得字符串形式的響應數據。

responseXML 獲得XML 形式的響應數據。

同步處理

xhr.open("`GET`","info.txt",false);  
xhr.send();  
document.`GET`ElementById("myDiv").innerHTML = xhr.responseText; //獲取數據直接顯示在頁面上

異步處理(推薦)

相對來說比較復雜，要在請求狀態改變事件中處理。

xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4 && xhr.status == 200){    
    document.`GET`ElementById("myDiv").innerHTML = xhr.responseText;  
    }
}

什么是readyState?

readyState是XMLHttpRequest對象的一個屬性，用來標識當前XMLHttpRequest對象處于什么狀態。

readyState總共有5個狀態值，分別為0~4，每個值代表了不同的含義：

0：未初始化 — 尚未調用.open()方法;

1：啟動 — 已經調用.open()方法，但尚未調用.send()方法;

2：發送 — 已經調用.send()方法，但尚未接收到響應;

3：接收 — 已經接收到部分響應數據;

4：完成 — 已經接收到全部響應數據，而且已經可以在客戶端使用了;

什么是status?

HTTP狀態碼(status)由三個十進制數字組成，第一個十進制數字定義了狀態碼的類型，后兩個數字沒有分類的作用。HTTP狀態碼共分為5種類型：

1xx(臨時響應)：表示臨時響應并需要請求者繼續執行操作的狀態碼。

2xx(成功)：表示成功處理了請求的狀態碼。

3xx(重定向)：表示要完成請求，需要進一步操作。通常，這些狀態代碼用來重定向。

4xx(請求錯誤)：這些狀態碼表示請求可能出錯，妨礙了服務器的處理。

5xx(服務器錯誤)：這些狀態碼表示服務器在嘗試處理請求時發生內部錯誤。這些錯誤可能是服務器本身的錯誤，而不是請求出錯。

常見的狀態碼

僅記錄在 RFC2616 上的 HTTP 狀態碼就達 40 種，若再加上 WebDAV(RFC4918、5842)和附加 HTTP 狀態碼 (RFC6585)等擴展，數量就達 60 余種。接下來，我們就介紹一下這些具有代表性的一些狀態碼。

• 200 表示從客戶端發來的請求在服務器端被正常處理了。
• 204 表示請求處理成功，但沒有資源返回。
• 301 表示永久性重定向。該狀態碼表示請求的資源已被分配了新的URI，以后應使用資源現在所指的URI。
• 302 表示臨時性重定向。
• 304 表示客戶端發送附帶條件的請求時(指采用GET方法的請求報文中包含if-matched,if-modified-since,if-none-match,if-range,if-unmodified-since任一個首部)服務器端允許請求訪問資源，但因發生請求未滿足條件的情況后，直接返回304Modified(服務器端資源未改變，可直接使用客戶端未過期的緩存)
• 400 表示請求報文中存在語法錯誤。當錯誤發生時，需修改請求的內容后再次發送請求。
• 401 表示未授權(Unauthorized)，當前請求需要用戶驗證
• 403 表示對請求資源的訪問被服務器拒絕了
• 404 表示服務器上無法找到請求的資源。除此之外，也可以在服務器端拒絕請求且不想說明理由時使用。
• 500 表示服務器端在執行請求時發生了錯誤。也有可能是Web應用存在的bug或某些臨時的故障。
• 503 表示服務器暫時處于超負載或正在進行停機維護，現在無法處理請求。

 以上就是“ajax的原理以及常見面試題整理”，你能回答上來嗎?如果想要了解更多的Java面試題相關內容，可以關注動力節點Java官網。