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

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

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

3、這個對象是什麼呢？

類名：XMLHttpRequest

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

江湖地位：被稱爲AJAX“引擎”

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

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

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

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

現在可以向服務器發請求，並攜帶了參數。

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

捕捉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);
    }
}

6、 以下列出完整的代碼及註釋

//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);