試想一個場景，你正在某個網站上上傳幾張照片，分別有幾個上傳的地方，如果上一張沒有傳完，你就不能點選下一個上傳按鈕，這樣的等待體驗是不是很糟糕呢。再試想一個場景，當你在淘寶購物的時候，如果點選了某個提交按鈕，整個頁面都跟著重新整理，這樣的感覺想必也不是好。如何解決這些問題呢？沒錯，接下來就請出我們今天的主角，Ajax！

什麼是Ajax呢，Ajax是Asynchronous Javascript And Xml的縮寫，譯為非同步的Javascript和Xml。它不是一種技術，更不是一個新的技術，它是將幾項技術包含起來的有一種非同步互動方式，它的核心物件是XMLHttpRequest物件。

接下來我們就來看看如何建立並使用Ajax

首先我們要先建立一個XMLHttpRequest物件，程式碼如下：

function getXhr(){
   var xhr = null;
if(window.XMLHttpRequest){               //其他瀏覽器
      xhr = new XMLHttpRequest();
}else{                                   //IE瀏覽器
      xhr = new ActiveXObject("Microsoft.XMLHttp");
}
   return xhr;
}

var xhr=getXhr();

這樣我們就建立好了XMLHttpRequest物件，接下來就是與伺服器進行連線了

一、GET請求型別

與伺服器連線的方法為open（method,url,async）;該方法有三個引數，含義如下：

method—設定請求型別（GET或POST）

url—設定請求地址

asynd—設定是否非同步，預設值為true，表示非同步

瞭解了open（）方法引數的含義，我們就可以與伺服器連線了，如下：

xhr.open("get","01.php?user=zhangwuji&pwd=12345");

GET方法請求時，引數以鍵值對的方式新增在請求url後面，中間用問號隔開

連線伺服器以後，我們就可以傳送請求了，方法為send（），使用GET方法請求時，send（）裡面的引數要設定為null（雖然該send方法實際上無效，但是該步驟不能省略），如果是POST方法的請求，send（）的引數直接寫要傳給伺服器的引數就好。

xhr.send(null);

接下來就是客戶端接收伺服器端的響應資料了

（1）使用onreadystatechange事件來進行監聽

（2）判斷readyState屬性是否等於4，等於4表示伺服器響應完畢

（3）判斷status是否等於200，等於200的話表示成功接收到伺服器端相應資料

成功接收到相應資料後，我們就可以對資料進行操作了，程式碼如下：

xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
      // 成功地接收伺服器端的響應資料
var data = xhr.responseText;
console.log(data);
}
}

返回的收據有兩種基本的型別，如下：

1、responseText    返回字串型別的資料

2、responseXML   返回XML格式的資料

這樣我們就拿到了伺服器返回的資料，就可以對資料進行後續的處理了。

二、POST請求型別

1、與伺服器連線

xhr.open("post","01.php");

2、設定請求頭資訊

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

使用POST方法請求伺服器，必須在傳送請求前設定請求頭資訊。

3、傳送請求

xhr.send("user=zhangwuji&pwd=12345");

這裡我們將請求的引數直接寫到send方法裡就行，與GET方法稍有不同，需要注意。

4、監聽伺服器響應狀態及響應資料

xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){
      var data = xhr.responseText;
console.log(data);
}
}

至此，我們就手動建立了XMLHttpRequest物件，並實現了向伺服器傳送Ajax請求，以及返回響應資料。