9.入門第九課:AJAX原理及實戰技術（入門版）

一、曾經一個蠻荒的時代：客戶端向服務器的提交只能使用「表單和超連接」，這都會出現頁面的從新載入的問題，即時頁面只有一點點的改動，也只能所有重來。

二、若是能將與服務器的交互（請求與接收響應）工做，交給一個「對象」，讓該對象以一個獨立的線程在後臺進行以下工做：「請求，等待響應數據，響應服務器的響應，局部修改當前的頁面」，此時也就避免了「所有刷新頁面」的問題，此種需求即爲AJAX背景。

三、這個對象是什麼呢？

類名：XMLHttpRequest

生成對象的方法：var xhr= new  XMLHttpRequest();

江湖地位：被稱爲AJAX「引擎」

標準化程度：被目前的主流瀏覽器接受（包括奇葩IE,但不包括IE6及之前的版本）

請求發送方式：xhr.send();

四、往哪裏發送，發送什麼東西？

var xhr=new XMLHttpRequest();
//向哪發，發什麼？
xhr.send(null);

咱們須要在發送以前，設置一下工做參數，來描述請求的細節：

xhr.open("GET","url?參數1=值1&參數2=值2");

目前代碼以下：

var xhr=new XMLHttpRequest();
xhr.open("GET","url?參數1=值1&參數2=值2");
xhr.send(null);

如今能夠向服務器發請求，並攜帶了參數。

五、服務器的響應數據，要給客戶端，如何辦呢？

捕捉xhr對象的一個「事件」onreadystatechange，並給其綁定「回調函數」

xhr.onreadystatechange=function(){
    //處理代碼
}

當服務器有數據響應，xhr對象的readyState就會變化（0-1-2-3-4，最終值爲4），而每次變化都會調用「處理代碼」，很顯然這是沒必要要的，咱們作一下改良，以減小回調的次數。

xhr.onreadystatechange=function(){
   if(readyState==4){
        //最終處理代碼
    }
}

可是服務器的數據在哪裏呢？

在xhr的responseText成員變量當中，這樣咱們的代碼以下改進

xhr.onreadystatechange=function(){
   if(readyState==4){
        alert(xhr.responseText);
    }
}

六、 如下列出完整的代碼及註釋

//new 一個xhr對象
var xhr=new XMLHttpRequest();
//設定工做參數
xhr.open("GET","url?參數1=值1&參數2=值2");
//註冊回調函數
xhr.onreadystatechange=function(){
   if(readyState==4){
        alert(xhr.responseText);
    }
}
//發送請求
xhr.send(null);