平時(shí)我們?cè)谧鲰?xiàng)目時(shí)通常利用jQuery封裝好的ajax函數(shù):$.ajax(),
$.get(),$.post(),用起來(lái)很方便演侯,但是很多小伙伴都不知道ajax底層實(shí)現(xiàn)原理,了解原理有助于我們更好的開發(fā)更卒,拓展
#######Ajax:異步的ajax和xml
- 建立XMLHttpRequest對(duì)象
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.設(shè)置回調(diào)函數(shù)
XmlHttp.onreadyStatechange = callback;
callback=function(){}
3.與服務(wù)器建立連接并向服務(wù)器發(fā)送請(qǐng)求
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
get請(qǐng)求寫法:
xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();
post請(qǐng)求需加請(qǐng)求頭
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
4.服務(wù)器響應(yīng),在回調(diào)函數(shù)中對(duì)不同狀態(tài)作出處理
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
如需獲得來(lái)自服務(wù)器的響應(yīng)伊群,用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;