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