1.前言
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下,可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容刃泌。
2.原理
同步:一個(gè)任務(wù)一個(gè)任務(wù)連續(xù)著干,假如一個(gè)頁(yè)面需求請(qǐng)求很多資源(假設(shè)先請(qǐng)求所有用戶信息揍障,再請(qǐng)求所有文章)敢靡,那么就一個(gè)請(qǐng)求一個(gè)請(qǐng)求地去響應(yīng)脾拆,假設(shè)某一個(gè)請(qǐng)求需要耗費(fèi)很長(zhǎng)時(shí)間品腹,那么整個(gè)頁(yè)面就卡在哪里等著這一個(gè)任務(wù)地執(zhí)行了岖食。同步不要單獨(dú)考慮某個(gè)請(qǐng)求完成后頁(yè)面需要怎樣響應(yīng),因?yàn)槭琼樞驁?zhí)行的舞吭,接下來(lái)干什么已經(jīng)寫(xiě)好了泡垃。
異步:同時(shí)請(qǐng)求,優(yōu)點(diǎn)是響應(yīng)時(shí)間快羡鸥。與同步不同的是兔毙,需要單獨(dú)考慮一個(gè)異步請(qǐng)求被響應(yīng)之后需要做什么后續(xù)處理,這個(gè)會(huì)在回調(diào)函數(shù)里面寫(xiě)兄春。
AJAX:某一部分的請(qǐng)求是異步響應(yīng)的,即與主要流程并行锡溯,可以部分與服務(wù)器交換信息赶舆。
3.使用
包括三個(gè)主要步驟:創(chuàng)建請(qǐng)求,發(fā)生請(qǐng)求祭饭,回調(diào)函數(shù)芜茵。
3.1創(chuàng)建 XMLHttpRequest 對(duì)象
xmlhttp=new XMLHttpRequest();
3.2向服務(wù)器發(fā)送請(qǐng)求
xmlhttp.open("GET","ajax_info.txt",true);
三個(gè)參數(shù)分別是:請(qǐng)求方式,GET/POST倡蝙;請(qǐng)求內(nèi)容(頁(yè)面/函數(shù))九串;是否異步。
xmlhttp.send();
3.2 回調(diào)函數(shù)
xmlhttp.onreadystatechange=function(){}
函數(shù)體里面會(huì)寫(xiě)“收到了服務(wù)器返回的數(shù)據(jù)之后寺鸥,做什么處理”猪钮,可以用兩種方式響應(yīng)數(shù)據(jù):
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)胆建。
4.案例
網(wǎng)頁(yè)頁(yè)面代碼:
一個(gè)輸入框txt1烤低,通過(guò)onkeyup="showHint(this.value)"(onkeyup 事件在用戶釋放鍵(在鍵盤(pán)上)時(shí)發(fā)生)綁定在showHint(this.value)函數(shù)上
<form action="">
輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>提示信息: <span id="txtHint"></span></p>
在function showHint(str)上,判斷當(dāng)str不為空后笆载。完成異步請(qǐng)求的三個(gè)部分扑馁,第一是(根據(jù)瀏覽器不同)創(chuàng)建 XMLHttpRequest 對(duì)象涯呻。
var xmlhttp;
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執(zhí)行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
第二是寫(xiě)回調(diào)函數(shù),操作是在id="txtHint"的位置顯示提示信息:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
第三是寫(xiě)請(qǐng)求的發(fā)送腻要。
xmlhttp.open("GET","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
注意:數(shù)據(jù)傳輸路徑是先請(qǐng)求數(shù)據(jù)复罐,然后發(fā)送成功才調(diào)用回調(diào)函數(shù)。但是代碼部分回調(diào)函數(shù)寫(xiě)在前面雄家。