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

一、什么是AJAX

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

Ajax的目的是提高用戶體驗(yàn)，較少網(wǎng)絡(luò)數(shù)據(jù)的傳輸量。同時(shí)，由于AJAX請求獲取的是數(shù)據(jù)而不是HTML文檔，因此它也節(jié)省了網(wǎng)絡(luò)帶寬，讓互聯(lián)網(wǎng)用戶的網(wǎng)絡(luò)沖浪體驗(yàn)變得更加順暢。

二、AJAX原理是什么

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

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

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

三、AJAX的使用

1. 創(chuàng)建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. 向服務(wù)器發(fā)送請求

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

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

注意：POST請求一定要設(shè)置請求頭的格式內(nèi)容

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

 一個(gè)Promise對象實(shí)現(xiàn)的 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('出錯(cuò)了', error);
});

3. 服務(wù)器響應(yīng)處理(區(qū)分同步跟異步兩種情況)

responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML 獲得XML 形式的響應(yīng)數(shù)據(jù)。

同步處理

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

異步處理(推薦)

相對來說比較復(fù)雜，要在請求狀態(tài)改變事件中處理。

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

什么是readyState?

readyState是XMLHttpRequest對象的一個(gè)屬性，用來標(biāo)識當(dāng)前XMLHttpRequest對象處于什么狀態(tài)。

readyState總共有5個(gè)狀態(tài)值，分別為0~4，每個(gè)值代表了不同的含義：

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

1：啟動 — 已經(jīng)調(diào)用.open()方法，但尚未調(diào)用.send()方法;

2：發(fā)送 — 已經(jīng)調(diào)用.send()方法，但尚未接收到響應(yīng);

3：接收 — 已經(jīng)接收到部分響應(yīng)數(shù)據(jù);

4：完成 — 已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了;

什么是status?

HTTP狀態(tài)碼(status)由三個(gè)十進(jìn)制數(shù)字組成，第一個(gè)十進(jìn)制數(shù)字定義了狀態(tài)碼的類型，后兩個(gè)數(shù)字沒有分類的作用。HTTP狀態(tài)碼共分為5種類型：

1xx(臨時(shí)響應(yīng))：表示臨時(shí)響應(yīng)并需要請求者繼續(xù)執(zhí)行操作的狀態(tài)碼。

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

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

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

5xx(服務(wù)器錯(cuò)誤)：這些狀態(tài)碼表示服務(wù)器在嘗試處理請求時(shí)發(fā)生內(nèi)部錯(cuò)誤。這些錯(cuò)誤可能是服務(wù)器本身的錯(cuò)誤，而不是請求出錯(cuò)。

常見的狀態(tài)碼

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

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

 以上就是“ajax的原理以及常見面試題整理”，你能回答上來嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動力節(jié)點(diǎn)Java官網(wǎng)。