AJAX在網站的資料互動中起著重要的作用，它在不用重新整理整個網頁的情況下，能對網頁的區域性內容進行更新。當然它並不是一種新的程式語言，而是一種使用現有標準的方法。

      我們知道，在傳統的網頁資料互動中，都是遵循這樣一個流程：首先是客戶端向伺服器傳送請求，伺服器收到相應請求後，將所有頁面內容的資料一起返回到客戶端，也就是整個html文件。這樣做一個很明顯的缺點是當頁面中的某個位置需要更新時，資料整體提交，整個html文件都會載入，這樣就會浪費網路頻寬，還有就是使用者體驗不好，同時它一個響應對應一個請求，如無響應，不能再繼續。

       AJAX就可以解決以上傳統網頁資料互動中所存在的問題。以內容主要介紹一下如何用原生JS實現AJAX的基本思路。

      在這之前，首先要知道的是在AJAX機制下，客戶端和伺服器之間的資料互動是以AJAX引擎為中介進行的。客戶端可以用GET和POST兩種方式和伺服器完成資料互動，其中兩者都可以用於傳輸資料，但GET主要用於從伺服器獲取資料，相對來說它的安全性較POST方式低，加為所傳送的資料都是通過URL來傳輸的，同時傳輸的資料量較少。而POST主要用於傳送資料，安全性相對較高，同時輸送的資料量較大。

      客戶端要和伺服器進行資料互動時，大致的流程是:首先發送一個連線請求，建立連線，然後進行資料請求，等待伺服器返回的響應，最後對收到的資料進行解析處理。

       傳送一個連線請求，建立連線程式碼如下：

          var xhr;       //建立XMLHttpRequest或ActiveXObject物件

         if(window.XMLHttpRequest){

                xhr=new XMLHttpRequest();

         }

         else{

               xhr=new ActiveXObject("Microsoft.XMLHTTP");    //相容低版本IE

          }

         xhr.open(method,url,true);//method：傳輸資料的方式，url：資源地址，第三個引數通常為true表示非同步模式

        xhr.open(method,url,true);//建立連線

      資料請求:

         if(method=='GET'){//當使用GET方法時send()函式的引數可不寫或置null

xhr.send(null);
}
else{     //POST方法需設一個要傳輸的資料
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}

       對收到的資料進行解析處理（程式碼如下）：

        xhr.onreadystatechange=function(){
if(xhr.readyState==4){

                       /*readyState分4種狀態。

                      0表示（未初始化）還沒有呼叫open()方法

                      1表示（載入）已呼叫send()方法，正在傳送請求     

                      2表示（載入完成）send()方法完成，已收到全部響應內容                 

                      3表示（解析）正在解析響應內容

                   4表示（完成）響應內容解析完成，可以在客戶端呼叫了

                       */
if(xhr.status==200){   //200表示確定。客戶端請求已成功。 
funsucc&&funsucc(xhr.responseText);
}
else{
alert(" 出錯了，狀態碼為"+xhr.status);
}
}
}

        收到的內容對於以XML方式組成的則呼叫xhr.responseXML，這在老版本的網站中可能會乃至。而對於以字串，JSON，html儲存的資料，則應以xhr.responseText的方式來獲取。

      封裝後的程式碼如下：

    function ajax(method,url,data,funsucc){  //method：資料傳輸的方式，url:資料地址，data要傳送的資料，
var xhr;                                                //funsucc:回撥函式，用於在客戶端對返回的資料進行處理
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}
else{
xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
if(method=='GET'&&data){
url+='?'+data;
}
xhr.open(method,url,true);
if(method=='GET'){
xhr.send(null);
}
else{
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
funsucc&&funsucc(xhr.responseText);
}
else{
alert(" 出錯了，狀態碼為"+xhr.status);
}
}
}
}