367
AJAX入門---五步使用XMLHttpRequest對象
XMLHttpRequest簡介：
XMLHttpRequest對象可以在不向服務器提交整個頁麵的情況下，實現局部更新網頁。當頁麵全部加載完畢後，客戶端通過該對象向服務器請求數據，服務器端接受數據並處理後，向客戶端反饋數據。XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，並且能以文本或者一個 DOM 文檔形式返回內容。盡管名為 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。
五步使用XMLHttpRequest對象
1． 建立XMLHttpRequest對象如下：
（不同瀏覽器中XMLHttpRequest對象建立的方式不同：IE7以上，FireFox，Safari，Opera等中直接newXMLHttpRequest()；IE6，IE5.5等則需要通過用一個正確的ActiveXObject控件名稱通過new ActiveXObject(控件名)的方式）
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",
"MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",
"MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];
for (var i = 0; i <activexName.length; i++) {
try {
xmlhttp=new ActiveXObject(activexName[i]);
} catch (e) {
}
}
}
2． 注冊回調函數
（設置回調函數是，不要在函數名後麵加括號。加括號表示將回調函數的返回值注冊給onreadystatechange屬性）
xmlhttp.onreadystatechange=callback;
3． 使用open方法設置服務器端交互的基本信息
（open方法最多有五個參數局，其中頭三個參數是必須的）
//使用GET方式時，請求數據位於url鏈接中，後麵的send方法的參數直接寫null
xmlhttp.open("GET","Ajax?name="+ userName,true );
//使用POST方式時，open方法後麵需要先調用setRequestHeader方法，來設置Content-Type的值，然後調用send方法，send的參數就是請求的數據
xmlhttp.open("POST","Ajax", true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4． 設置發送的數據，開始和服務器端交互
//GET方式
xmlhttp.send(null);
//POST方式
xmlhttp.send("name=" + userName);
5． 在回調函數中判斷交互是否結束，響應是否正確，並根據需要獲取服務器端返回的數據，更新頁麵的內容
（回調函數中，最好將判斷readyState和status的兩個if條件，分開來寫）
function callback(){
//5.判斷和服務器端的交互是否完成，還要判斷服務器端是否正確返回了數據
if (xmlhttp.readyState == 4) {
//表示和服務器端的交互已經完成
if (xmlhttp.status==200) {
//表示和服務器的響應代碼是200，正確的返回了數據
//純文本數據的接受方法
var message =xmlhttp.responseText;
//Xml數據對應的Dom對象的接受方法
//使用的前提是，服務器端需要設置content-type為text/xml
//var domXml=xmlhttp.responseXML;
//向div標簽中填充文本內容的方法
var div=document.getElementById("message");
div.innerHTML=message;
}
}
}
總結：
當然通過這個小小的例子，我們隻能說是經曆了一個從不知道到知道的過程，初步了解了一下XMLHttpRequest對象的用法，更加深刻的理解還需要我們更加深入的學習和在實踐中加以利用。
文中demo源碼免費下載鏈接：https://download.csdn.net/detail/senior_lee/7707257
最後更新：2017-04-03 05:39:40