AJAX (Asynchronous JavaScript and XML) 是一種使用現有標準的新方法。

AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。

傳統的網頁如果需要更新內容，則需要過載整個頁面。

AJAX 是一種用於建立快速動態網頁的技術。通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

XMLHttpRequest

XMLHttpRequest 是 AJAX 的基礎。

所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與伺服器交換資料。

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject ：

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

XMLHttpRequest 物件屬性

XMLHttpRequest 物件方法

向伺服器傳送請求

如需向伺服器傳送請求，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法。下面來了解下這兩個方法的使用。

open(method, url, async)：

• method：GET or POST。
• url：伺服器檔案位置。該檔案可以是任何型別的檔案，如 .txt 和 .xml，或伺服器指令碼檔案，如 .asp 和 .php。
• asnyc：true（非同步）或 false（同步）。

通過非同步傳送，JavaScript 不必等待伺服器響應，而是可以：

• 在等待伺服器響應時執行其他指令碼
• 當響應就緒時處理響應

所以不推薦同步的 XMLHttpRequest (async = false)，因為 JavaScript 將停止執行直到伺服器響應就緒。如果伺服器繁忙或緩慢，應用程式將掛起或停止。

GET 比 POST 更簡單更快，可用於大多數情況下。

不過，在以下情況要始終使用 POST：

• 快取檔案不是選項（更新伺服器上的檔案或資料庫）
• 向伺服器傳送大量資料（POST 無大小限制）
• 傳送使用者輸入（可包含未知字元），POST 比 GET 更強大更安全

GET 請求：

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

如果需要用 GET 方法來發送資訊，可以 直接在URL 中新增這些資訊：

xhttp.open("GET", "ajax_info.txt?info1=value1&info2=value2", true);
xhttp.send();

POST 請求:

xhttp.open("POST", "ajax_info.txt", true);
xhttp.send();

如需像 HTML 表單那樣 POST 資料，先通過 setRequestHeader() 新增一個 HTTP 頭部，然後在 send() 方法中規定您需要傳送的資料：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("info1=value1&info2=value2");

處理伺服器響應

每當 readyState 發生變化時就會呼叫 onreadystatechange 函式。

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化。

通過 XMLHttpRequest 物件，您可以定義當請求接收到應答時所執行的函式。這個函式是在 XMLHttpResponse 物件的 onreadystatechange 屬性中定義的：

xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) { //當 readyState 為 4，status 為 200 時，響應就緒
    document.getElementById("demo").innerHTML = this.responseText;
  }
};	
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

如果來自伺服器的響應是 XML，而且需要作為 XML 物件進行解析，使用 responseXML 屬性。

XMLHttpRequest 物件有一個內建的 XML 解析器。ResponseXML 屬性以 XML DOM 物件返回伺服器響應。使用此屬性，您可以把響應解析為 XML DOM 物件。

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。

如果您的網站中有多個 AJAX 任務，那麼您應該建立一個執行 XMLHttpRequest 物件的函式，以及一個供每個 AJAX 任務的回撥函式。

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}

function myFunction1(xhttp) {
  //處理響應程式碼
} 
function myFunction2(xhttp) {
  // 處理響應程式碼
} 

讀取 JSON 檔案

假設 JSON 檔案內容是一個數組

function loadXMLDoc() {
  var xhttp;
  if (window.XMLHttpRequest) {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
    xhttp = new XMLHttpRequest();
  } else {
    // IE6, IE5 瀏覽器執行程式碼
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(this)
    }
  }
  xmlhttp.open("GET","json_url",true);
  xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  xmlhttp.send();
}
function myFunction(xhttp) {
  var arr = JSON.parse(xhttp.responseText);
  //處理 arr
}