AJAX?是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術。通過在后臺與服務器進行少量數(shù)據(jù)交換,可以使網(wǎng)頁實現(xiàn)異步更新思灌。這意味著可以在不重新加載整個網(wǎng)頁的情況下,對網(wǎng)頁的某部分進行更新恭取。
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)泰偿。
XMLHttpRequest 是 AJAX 的基礎。所有現(xiàn)代瀏覽器均支持 和內嵌XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject)蜈垮。XMLHttpRequest 用于在后臺與服務器交換數(shù)據(jù)耗跛。
創(chuàng)建 XMLHttpRequest 對象的語法:variable=new XMLHttpRequest();
不確定瀏覽器是否支持時:
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); ?}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
向服務器發(fā)送請求:
xmlhttp.open(method,url,async);//規(guī)定請求的類型、URL 以及是否異步處理請求攒发。 //method:請求的類型调塌;GET 或 POST。url:文件在服務器上的位置惠猿。 ? ? ? ? ? ? ? //async:true(異步)或 false(同步)
xmlhttp.send(string);//將請求發(fā)送到服務器羔砾。String:僅用于POST請求
一個簡單的 GET 請求:
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
一個簡單 POST 請求:
xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();
區(qū)分:與 POST 相比,GET 更簡單也更快偶妖,并且在大部分情況下都能用姜凄。
然而,在以下情況中趾访,請使用 POST 請求:
1.無法使用緩存文件(更新服務器上的文件或數(shù)據(jù)庫)
2.向服務器發(fā)送大量數(shù)據(jù)(POST 沒有數(shù)據(jù)量限制)
3.發(fā)送包含未知字符的用戶輸入時态秧,POST 比 GET 更穩(wěn)定也更可靠
當使用 async=true 時,請規(guī)定在響應處于 onreadystatechange 事件中的就緒狀態(tài)時執(zhí)行的函數(shù):
xmlhttp.onreadystatechange=function() ?//onreadystatechange存儲函數(shù)(或函數(shù)名)扼鞋,每當 readyState 屬性改變時申鱼,就會調用該函數(shù)。
{ ?if (xmlhttp.readyState==4 && xmlhttp.status==200) ? {????????????// ??readyState存有 //XMLHttpRequest 的狀態(tài)云头。從 0 到 4 發(fā)生變化(0: 請求未初始化捐友;1: 服務器連接已建; //2: 請求已接收盘寡;3: 請求處理中楚殿;4: 請求已完成撮慨,且響應已就緒)?status只有兩種狀態(tài): //200: "OK"竿痰;404: 未找到頁面
? ? document.getElementById("Div").innerHTML=xmlhttp.responseText; ? ?} }
//之后再執(zhí)行GET或POST請求
當使用 async=false 時脆粥,不要編寫 onreadystatechange 函數(shù) - 把代碼放到 send() 語句后面即可:
//GET或POST請求
document.getElementById("Div").innerHTML=xmlhttp.responseText;
注釋:onreadystatechange 事件被觸發(fā) 5 次(0 - 4),對應著 readyState 的每個變化影涉。
需獲得來自服務器的響應:
使用 XMLHttpRequest 對象的 responseText (獲得字符串形式的響應數(shù)據(jù))或 responseXML(獲得 XML 形式的響應數(shù)據(jù)) 屬性变隔。
上面的例子用到的就是responseText 屬性。
如果來自服務器的響應是 XML蟹倾,而且需要作為 XML 對象進行解析匣缘,則使用 responseXML 屬性:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++)
? { ?txt=txt + x[i].childNodes[0].nodeValue + "<br />"; ?}
document.getElementById("Div").innerHTML=txt;
注釋:若網(wǎng)站上存在多個 AJAX 任務,那么您應該為創(chuàng)建 XMLHttpRequest 對象編寫一個標準的函數(shù)鲜棠,并為每個 AJAX 任務調用該函數(shù)肌厨。