一、ajax介紹
ajax(Asynchronous Javascript And XML), 在前端的開發(fā)中主要是用來(lái)進(jìn)行數(shù)據(jù)的交互,它不是一門新的編程語(yǔ)言属愤,只是前端js中的一種異步的數(shù)據(jù)交互技術(shù)。
二酸役、ajax實(shí)現(xiàn)異步數(shù)據(jù)交互
ajax最核心的就是XMLHttpRequest對(duì)象住诸,要使用ajax第一步就是通過(guò)new XMLHttpRequest()穿件一個(gè)對(duì)象(假設(shè)叫xhr),然后通過(guò)xhr的open()方法請(qǐng)求數(shù)據(jù)該方法需要傳入三個(gè)參數(shù)第一個(gè)是請(qǐng)求數(shù)據(jù)的方法涣澡,我們常用的方法有GET和POST贱呐,第二個(gè)參數(shù)是請(qǐng)求數(shù)據(jù)的url,第三個(gè)參數(shù)是一個(gè)布爾值入桂,表示是否使用異步方式奄薇,當(dāng)為true時(shí)表示異步,反之則表示同步抗愁。在數(shù)據(jù)傳輸?shù)倪^(guò)程中會(huì)出現(xiàn)4種狀態(tài)readyState馁蒂,每一次狀態(tài)的改變都會(huì)觸發(fā)onreadystatechange方法,當(dāng)readyState的值為4時(shí)說(shuō)明數(shù)據(jù)的交互已經(jīng)完成蜘腌,我們可以通過(guò)xhr的responseText屬性獲取服務(wù)器返回的數(shù)據(jù)沫屡。整個(gè)過(guò)程的代碼實(shí)現(xiàn)如下:
var xhr = new XMLHttpRequest();
xhr.open("GET",url,true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.stadus = 200){
//可獲取返回值xhr.responseText,執(zhí)行想要執(zhí)行的代碼
}
}
如果需要想服務(wù)器發(fā)送數(shù)據(jù)逢捺,在使用GET和POST時(shí)發(fā)送數(shù)據(jù)的方法有點(diǎn)區(qū)別谁鳍,GET方法實(shí)在url后面加問(wèn)號(hào),數(shù)據(jù)通過(guò)鍵值對(duì)的形式傳遞如:url?name=value&name=value的形式劫瞳。而POST方法則是在xhr的send方法中傳入鍵值對(duì)參數(shù)的形式發(fā)送數(shù)據(jù)倘潜。