一锁摔、什么是ajax?
AJAX(Asynchronous?JavaScript?and?XML):異步的JavaScript和XML运褪。
AJAX不是新的編程語言仇奶,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。是在不需要重新加載網(wǎng)頁的情況下驾窟,與服務(wù)器進(jìn)行數(shù)據(jù)交互并更新部分網(wǎng)頁的技術(shù)庆猫。
Eg:當(dāng)你在搜索引擎搜索關(guān)鍵字的時(shí)候,JavaScript就向服務(wù)器提交字段绅络,并返回得到的數(shù)據(jù)月培,實(shí)時(shí)更新網(wǎng)頁中的搜索結(jié)果嘁字。
二、如何使用AJAX杉畜?
1纪蜒、XHR的創(chuàng)建
XMLHttpRequest的作用是用于在后臺與服務(wù)器交換數(shù)據(jù)。
IE5和IE6使用ActiveXObject此叠,其余瀏覽器(IE7+纯续、Firefox、Chrome灭袁、Safari以及Opera)均內(nèi)建XMLHttpRequest對象猬错。
語法:
Avriable?=?new?XMLHttpRequest():???//創(chuàng)建XMLHttpRequest對象
或
Avriable?=?new?ActiveXObject(“Microsoft.XMLHttp”);???//???IE5和IE6使用ActiveX對象
綜合上面兩種情況,實(shí)際情況中應(yīng)該這樣寫:
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");
}
2茸歧、XHR請求
將請求發(fā)送到服務(wù)器倦炒,使用XMLHttpRequest對象的open()和send()方法。
open(method,url,async):規(guī)定請求的類型软瞎、URL以及是否異步處理請求逢唤。
method:請求的類型(GET或POST)
ulr:文件在服務(wù)器上的位置
async:true(異步)或false(同步)
send(string):將請求發(fā)送到服務(wù)器。
string:僅用于POST請求
改使用GET還是POST涤浇,具體請查看兩者的區(qū)別:http://www.w3school.com.cn/tags/html_ref_httpmethods.asp
一個(gè)簡單的GET:
xmlhttp.open("GET","demo_get.asp?t="?+Math.random(),true);
xmlhttp.send();
一個(gè)簡單的POST:
xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();
如果需要像HTML表單那樣POST數(shù)據(jù)智玻,請使用setRequestHeader()來添加HTTP頭。然后在send()方法中規(guī)定您希望發(fā)送的數(shù)據(jù):
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
setRequestHeader(header,value):向請求添加HTTP頭
header:規(guī)定頭的名稱
value:規(guī)定頭的值
3芙代、XHR響應(yīng)
獲取來自服務(wù)器的響應(yīng),使用XMLHttpRequest對象的responseText或responseXML屬性
responseText:獲得字符串形式的響應(yīng)數(shù)據(jù)
responseXML:獲得XML形式的響應(yīng)數(shù)據(jù)
以xml為例:
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for?(i=0;i<x.length;i++)
{
text = text + x[i].childNode[0].nodeValue + "<br / >";
}
document.getElementById("myDiv").innerHTML=txt;
4盖彭、Onreadystatechange事件
readyState屬性存有XMLHttpRequest的狀態(tài)信息纹烹,當(dāng)readyState改變時(shí),就會(huì)觸發(fā)onreadystatechange事件召边。
下面是XMLHttpRequest對象的三個(gè)重要的屬性:
Onreadystatechange:存儲(chǔ)函數(shù)(或函數(shù)名)铺呵,每當(dāng)readyState屬性改變時(shí),就會(huì)調(diào)用該函數(shù)隧熙。
readyState:存有XMLHttpRequest的狀態(tài)片挂。從0到4發(fā)生變化。
0:請求未初始化
1:服務(wù)器連接已建立
2:請求已接收
3:請求處理中
4:請求已完成贞盯,且響應(yīng)已就緒
Status:200:?"OK"音念;404:未找到頁面
當(dāng)readyState等于4且狀態(tài)為200時(shí),表示響應(yīng)已就緒:
xmlhttp.onreadystatechange=function(){
if?(xmlhttp.readyState==4?&&?xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}