ajax其實(shí)是實(shí)現(xiàn)異步刷新庙楚,他的用處是在不重新載入頁面的情況下面哥,與與服務(wù)器交換數(shù)據(jù)并更新網(wǎng)頁哎壳。
看下面的例子,不著急看懂,后面我會(huì)詳細(xì)解釋
<span>輸入賬號(hào)</span>
<input id="name" name="name" onkeyup="check()" type="text">
<span id="checkResult"></span>
<script>
var xmlhttp;
function check(){
var name =document.getElementById('name').value;
var url="/study/checkName.jsp?name="+name;
xmlhttp =new XMLHttpRequest();
xmlhttp.onreadystatechange=checkResult; //響應(yīng)函數(shù)
xmlhttp.open("GET",url,true); //設(shè)置訪問的頁面
xmlhttp.send(null); //執(zhí)行訪問
function checkResult(){
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
</script>
第一步:ajax請(qǐng)求的示意圖如下幢竹,大概了解是怎么走的:
第二步:創(chuàng)建XMLHttpRequest(XHR)
XHR是一個(gè)javascript對(duì)象耳峦,他是在幕后通過一個(gè)小線程與服務(wù)器進(jìn)行數(shù)據(jù)交互的,從而實(shí)現(xiàn)無刷新效果焕毫。
<script>
var xmlhttp = new XMLHttpRequest();
documen.write(xmlhttp);
</script>
結(jié)果:
[object XMLHttpRequest]
第三步:設(shè)置響應(yīng)函數(shù)
XHR對(duì)象的作用是和服務(wù)器進(jìn)行交互,所以不僅發(fā)送消息給服務(wù)器驶乾,也接受服務(wù)器返回的響應(yīng)邑飒。當(dāng)從服務(wù)器返回響應(yīng)時(shí)我們想做點(diǎn)什么該怎么辦?
通過xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函數(shù)進(jìn)行處理级乐。
第四步:設(shè)置并發(fā)出請(qǐng)求
通過open函數(shù)設(shè)置幕后的小線程疙咸,將要訪問的url。在本例中就是 /study/checkName.jsp
xmlhttp.open('GET',url,true);//規(guī)定請(qǐng)求的類型风科、URL 以及是否異步處理請(qǐng)求撒轮。method:請(qǐng)求的類型;GET 或 POST url:文件在服務(wù)器上的位置 async:true(異步)或 false(同步)
通過send函數(shù)進(jìn)行實(shí)際的訪問
xmlhttp.send(null);//send(string),將請(qǐng)求發(fā)送到服務(wù)器贼穆。
第五步:處理響應(yīng)信息
在checkResult 函數(shù)中處理響應(yīng)
function checkResult(){
if(xmlhttp.readyStats==4 && xmlhttp.status ==200)
document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
xmlhttp.readyState 4 表示請(qǐng)求已完成
xmlhttp.status 200 表示響應(yīng)成功
xmlhttp.responseText; 用于獲取服務(wù)端傳回來的文本
document.getElementById('checkResult').innerHTML 設(shè)置span的內(nèi)容為服務(wù)端傳遞回來的文本
再返回來看第一段代碼题山,是不是就理解了呢