Ajax 使用
創(chuàng)建動態(tài)網(wǎng)頁的技術(shù)
Ajax 介紹
- AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)虑省。
- AJAX 最大的優(yōu)點是在不重新加載整個頁面的情況下崇堰,可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁內(nèi)容性雄。
Ajax實現(xiàn)原理
- 創(chuàng)建XMLHttpRequest對象(此對象用于與服務(wù)器進行數(shù)據(jù)交換)
- 向服務(wù)器發(fā)送請求,依次調(diào)用對象的open()與send()方法
xmlHttpRequest.open("method","url",async);
xmlHttpRequest.send(string)
- 當(dāng)請求被發(fā)送到服務(wù)器時,我們需要執(zhí)行一些基于響應(yīng)的任務(wù),
每當(dāng) readyState(0-4) 改變時,就會觸發(fā) onreadystatechange 事件,
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息(200 or 404)。
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
- 獲取服務(wù)器的響應(yīng),使用對象的responseText或者responseXml
- responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)
document.getElemntById("id").innnerHtml=xmlHttp.responseText
- responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)
注意:url可以通過增加隨機數(shù)來避免緩存情況
使用回調(diào)函數(shù)
回調(diào)函數(shù)是一種以參數(shù)形式傳遞給另一個函數(shù)的函數(shù)
如果您的網(wǎng)站上存在多個 AJAX 任務(wù)烟馅,那么您應(yīng)該為創(chuàng)建 XMLHttpRequest 對象編寫一個標(biāo)準(zhǔn)的函數(shù),并為每個 AJAX 任務(wù)調(diào)用該函數(shù)荐吉。
該函數(shù)調(diào)用應(yīng)該包含 URL 以及發(fā)生 onreadystatechange 事件時執(zhí)行的任務(wù)(每次調(diào)用可能不盡相同):
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}