Ajax 全名為Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

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

在傳統方法中，當我們需要向服務器請求數據時，瀏覽器需要等待該請求完成之後才能夠進行下一步的操作，而在此之前是不能夠對網頁進行其他的操作，如果因請求的數據過大或者網絡延遲等原因而造成的等待服務器響應的時間過久，無疑會使得用戶的體驗感降低，甚至有可能直接導致程序掛起。

而如果我們采用AJax技術，則可以避免這種情況的發生，對於 web 開發人員來說，發送異步請求是一個巨大的進步。很多在服務器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程序掛起或停止。

通過 AJAX，JavaScript 無需等待服務器的響應，而是：

• 在等待服務器響應時執行其他腳本
• 當響應就緒後對響應進行處理

XMLHttpRequest 是 AJAX 的基礎。

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

創建 XMLHttpRequest 對象的語法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 對象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");

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

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");
  }

向服務器發送請求：

我們可以利用XMLHttpRequest的open(method,url,async)和send(string)方法向服務器發送請求。

其中open的三個參數分別是：規定請求的類型、URL 以及是否異步處理請求。

• method：請求的類型；GET 或 POST

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

• • • 無法使用緩存文件（更新服務器上的文件或數據庫）
    • 向服務器發送大量數據（POST 沒有數據量限制）
    • 發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

//示例代碼
//get
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
//post
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//為了能夠像表單那樣操作，需使用setRequestHeader方法
xmlhttp.send("fname=Bill&lname=Gates")//字符串只能用於post

• url：文件在服務器上的位置，請求的服務器地址
• async：true（異步）或 false（同步）

send的string則是只能用於post。

完整示例代碼（訪問Yahoo的天氣API，查看返回的JSON數據）：

// 實例化異步請求對象
var xhr = new XMLHttpRequest();
// 監聽狀態
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {//狀態碼200 -> ok
            var result = JSON.parse(xhr.responseText);
            console.log(result);
        }
    }
}
// 初始化請求
xhr.open(‘GET‘, ‘https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20%3D%202151330&format=json‘, true);
// 發送請求
xhr.send();

簡單AJAX請求JSon數據