什么是AJAX:
1奶浦、AJAX:異步的javascript和xml兄墅;
2、通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換澳叉,AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新隙咸。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下,對網(wǎng)頁的某部分進(jìn)行更新成洗。
3五督、傳統(tǒng)的網(wǎng)頁(不使用ajax)如果需要更新內(nèi)容,必須重載整個(gè)頁面
4瓶殃、有很多使用ajax的應(yīng)用程序案例:新浪微博充包、Google地圖、開心網(wǎng)等等遥椿。
使用ajax請求數(shù)據(jù):
1.創(chuàng)建 XMLHttpRequest 對象基矮,用于和服務(wù)器交換數(shù)據(jù)
if (window.XMLHttpRequest){
? ? xhr = new XMLHttpRequest();
? ?} else {
? ? xhr = new ActiveXObject('Microsoft.XMLHTTP');//兼容ie 5 6 7
? ?}
//常使用三目運(yùn)算來創(chuàng)建XMLHttpRequest 對象
var xhr = window.XMLHttpRequest ?? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
2.向服務(wù)器發(fā)送請求
xmlhttp.open("GET","test1.txt",true);//規(guī)定請求的類型、URL 以及是否異步處理請求冠场。
xmlhttp.send();//將請求發(fā)送到服務(wù)器家浇。
open(method,url,async)
?method:請求的類型;GET 或 POST
?url:文件在服務(wù)器上的位置
?async:true(異步)或 false(同步)
當(dāng)是異步時(shí)慈鸠,瀏覽器把請求發(fā)送后就繼續(xù)做自己的事蓝谨,當(dāng)onreadystatechange事件到來時(shí)說明服務(wù)端的數(shù)據(jù)來了,這時(shí)再處理數(shù)據(jù)青团。類似于一個(gè)節(jié)點(diǎn)綁定點(diǎn)擊事件后就做后面的事譬巫,當(dāng)用戶點(diǎn)擊了再執(zhí)行綁定的處理函數(shù)。
當(dāng)是同步時(shí)督笆,JavaScript 會(huì)等到服務(wù)器響應(yīng)就緒才繼續(xù)執(zhí)行芦昔。如果服務(wù)器繁忙或緩慢,應(yīng)用程序會(huì)掛起或停止娃肿。 當(dāng)使用 async=false 時(shí)咕缎,不用編寫 onreadystatechange 函數(shù)珠十,把代碼放到 send() 語句后面即可.
注釋:當(dāng)您使用 async=false 時(shí),請不要編寫 onreadystatechange 函數(shù) - 把代碼放到 send() 語句后面即可.
send(string)
?string:僅用于 POST 請求
3.服務(wù)器響應(yīng)
responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)凭豪。
responseXML 獲得 XML 形式的響應(yīng)數(shù)據(jù)焙蹭。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
4.onreadystatechange 事件;當(dāng)請求被發(fā)送到服務(wù)器時(shí)嫂伞,我們需要執(zhí)行一些基于響應(yīng)的任務(wù)孔厉。
每當(dāng) readyState 改變時(shí),就會(huì)觸發(fā) onreadystatechange 事件帖努。 readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息撰豺。 下面是 XMLHttpRequest 對象的三個(gè)重要的屬性:
onreadystatechange: 存儲函數(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: 未找到頁面
以下為部分js代碼:
// 1、 創(chuàng)建請求對象
var xhr = window.XMLHttpRequest ?? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
// 2亭姥、配置請求對象
// 在open方法中配置請求對象梭纹,有三個(gè)常用參數(shù):
// 1、請求方法:GET/POST
// 2致份、請求接口路徑:絕對路徑/相對路徑
// 3、是否發(fā)起異步請求础拨,默認(rèn)是true氮块,可以改為同步請求(false)
// 第二個(gè)參數(shù)情況取決于第一個(gè)參數(shù),如果是GET請求诡宗,請求的接口需要參數(shù)滔蝉,則把參數(shù)字符串拼接在接口后,使用“塔沃?”鏈接蝠引;
// 如果是POST請求,請求的接口需要參數(shù)蛀柴,就把參數(shù)字符串當(dāng)做send()方法的參數(shù)傳遞給服務(wù)器
xhr.open('GET', 'data.json', true);
// 3螃概、發(fā)送請求
xhr.send(null);
// 4、監(jiān)聽請求情況
xhr.onreadystatechange = function(){
// 只有在服務(wù)器處理完畢請求鸽疾,且處理成功時(shí)才可以獲取服務(wù)器返回的數(shù)據(jù)
// 當(dāng)xhr.readyState值是4時(shí)吊洼,代表服務(wù)器請求處理完畢
// 當(dāng)xhr.status值是200-300或304時(shí),表示服務(wù)器成功的把數(shù)據(jù)返回下來制肮。一般情況下值為200
if (xhr.readyState == 4 && xhr.status == 200) {
// 獲取服務(wù)器返回的值
// 如果傳輸?shù)臄?shù)據(jù)格式是JSON格式冒窍,則需要從responseText屬性中獲取值
// console.log(xhr.responseText);
// 如果服務(wù)器傳輸?shù)臄?shù)據(jù)格式是XML格式递沪,則需要從responseXML屬性中取值
console.log(xhr.responseXML);
console.log(xhr.responseText);
}