jQuery ajax之XMLHttpRequest (一)

一.什麼是ajax
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML)。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術，在不重新加載整個頁面的情況下。
XMLHttpRequest 是 AJAX 的基礎, 而AJAX是對XMLHttpRequest對象的封裝和簡化。所以，我們很有必要理解XMLHttpRequest對象的使用。

二. XMLHttpRequest對象的創建
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。

創建 XMLHttpRequest 對象的語法：

var xhr=new XMLHttpRequest();

三.向服務器發送request
如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法：

xhr.open("GET","test1.txt",true);
xhr.send();

語法格式：
1.open(method,url,async) ，規定請求的類型、URL 以及是否異步處理請求。
（1）method：請求的類型；GET 或 POST
（2）url：文件在服務器上的位置
（3）async：true（異步）或 false（同步）

2.send(string) ，將請求發送到服務器。
（1）string：僅用於 POST 請求
（2）GET 還是 POST ？與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：
–無法使用緩存文件（更新服務器上的文件或數據庫）
–向服務器發送大量數據（POST 沒有數據量限制）
–發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

GET 請求
一個簡單的 GET 請求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是緩存的結果。
爲了避免這種情況，請向 URL 添加一個唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" +Math.random()
,true);
xmlhttp.send();

如果您希望通過 GET 方法添加參數，請向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();

POST 請求
一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然後在 send() 方法中規定您希望發送的數據：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

異步 - True 或 False
XMLHttpRequest 對象如果要用於 AJAX 的話，其 open() 方法的 async 參數必須設置爲 true：

xmlhttp.open("GET","ajax_test.asp",true);//true表示異步，false表示同步

通過 AJAX，JavaScript 無需等待服務器的響應，而是：
（1）在等待服務器響應時執行其他腳本
（2）當響應就緒後對響應進行處理

1.當使用 async=true 時（大部分情況都是true），請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函數：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
//響應函數
xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

1. 如需使用 async=false，請將 open() 方法中的第三個參數改爲 false。我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。當您使用 async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句後面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

請記住，JavaScript 會等到服務器響應就緒才繼續執行。如果服務器繁忙或緩慢，應用程序會掛起或停止，所以慎用！

四. 處理服務器的response

如需獲得來自服務器的響應，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。responseText 獲得字符串形式的響應數據，而responseXML 獲得 XML 形式的響應數據。
I.responseText 屬性返回字符串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

II.如果來自服務器的響應是 XML，而且需要作爲 XML 對象進行解析，請使用 responseXML 屬性：
html頁面：http://www.w3school.com.cn/example/xmle/books.xml

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
     txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。每當 readyState 改變時，就會觸發 onreadystatechange 事件。下面是 XMLHttpRequest 對象的三個重要的屬性：
（1）onreadystatechange   
    存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

（2）readyState   
   存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
    0: 請求未初始化
    1: 服務器連接已建立
    2: 請求已接收
    3: 請求處理中
    4: 請求已完成，且響應已就緒
 (3)status  
    200: "OK"
    404: 未找到頁面

當 readyState 等於 4 且狀態爲 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function() {
   if (xmlhttp.readyState==4 && xmlhttp.status==200) { 
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
     } 
}

使用 Callback 函數
callback 函數是一種以參數形式傳遞給另一個函數的函數。
如果您的網站上存在多個 AJAX 任務，那麼您應該爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。該函數調用應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次調用可能不盡相同）：

function myFunction(){
        loadXMLDoc("ajax_info.txt",function() {
               if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
              } 
        });
}

備註：
此筆記是本人根據w3cSchool資料整理而來，對於ajax的內容，請參考後續的文章。希望能與大家相互學習，喜歡的客官記得點贊收藏。