一、定義
1、什么是ajax
ajax：即異步 javascript 和xml。ajax是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，ajax可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。而傳統(tǒng)的網(wǎng)頁(不使用 ajax)如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁面。
2、同步與異步的區(qū)別
同步提交：當(dāng)用戶發(fā)送請求時(shí)，當(dāng)前頁面不可以使用，服務(wù)器響應(yīng)頁面到客戶端，響應(yīng)完成，用戶才可以使用頁面。
異步提交：當(dāng)用戶發(fā)送請求時(shí)，當(dāng)前頁面還可以繼續(xù)使用，當(dāng)異步請求的數(shù)據(jù)響應(yīng)給頁面，頁面把數(shù)據(jù)顯示出來 。
3、ajax的工作原理
客戶端發(fā)送請求，請求交給xhr，xhr把請求提交給服務(wù)，服務(wù)器進(jìn)行業(yè)務(wù)處理，服務(wù)器響應(yīng)數(shù)據(jù)交給xhr對象，xhr對象接收數(shù)據(jù)，由javascript把數(shù)據(jù)寫到頁面上，如下圖所示：
二、實(shí)現(xiàn)ajax的基本步驟
要完整實(shí)現(xiàn)一個(gè)ajax異步調(diào)用和局部刷新,通常需要以下幾個(gè)步驟:
- 創(chuàng)建xmlhttprequest對象,即創(chuàng)建一個(gè)異步調(diào)用對象.
- 創(chuàng)建一個(gè)新的http請求,并指定該http請求的方法、url及驗(yàn)證信息.
- 設(shè)置響應(yīng)http請求狀態(tài)變化的函數(shù).
- 發(fā)送http請求.
- 獲取異步調(diào)用返回的數(shù)據(jù).
- 使用javascript和dom實(shí)現(xiàn)局部刷新.
1、創(chuàng)建xmlhttprequest對象
不同瀏覽器使用的異步調(diào)用對象有所不同，在ie瀏覽器中異步調(diào)用使用的是xmlhttp組件中的xmlhttprequest對象，而在netscape、firefox瀏覽器中則直接使用xmlhttprequest組件。因此，在不同瀏覽器中創(chuàng)建xmlhttprequest對象的方式都有所不同.
在ie瀏覽器中創(chuàng)建xmlhttprequest對象的方式為:
var xmlhttprequest = new activexobject("microsoft.xmlhttp");在netscape瀏覽器中創(chuàng)建xmlhttprequest對象的方式為:
var xmlhttprequest = new xmlhttprequest();
由于無法確定用戶使用的是什么瀏覽器,所以在創(chuàng)建xmlhttprequest對象時(shí),最好將以上兩種方法都加上.如以下代碼所示:
var xmlhttprequest; //定義一個(gè)變量,用于存放xmlhttprequest對象
createxmlhttprequst(); //調(diào)用創(chuàng)建對象的方法
//創(chuàng)建xmlhttprequest對象的方法
function createxmlhttprequest(){
if(window.activexobject) {//判斷是否是ie瀏覽器
xmlhttprequest = new activexobject("microsoft.xmlhttp");//創(chuàng)建ie的xmlhttprequest對象
}else if(window.xmlhttprequest){//判斷是否是netscape等其他支持xmlhttprequest組件的瀏覽器
xmlhttprequest = new xmlhttprequest();//創(chuàng)建其他瀏覽器上的xmlhttprequest對象
}
}"if(window.activexobject)"用來判斷是否使用ie瀏覽器.其中activexoject并不是windows對象的標(biāo)準(zhǔn)屬性,而是ie瀏覽器中專有的屬性,可以用于判斷瀏覽器是否支持activex控件.通常只有ie瀏覽器或以ie瀏覽器為核心的瀏覽器才能支持active控件.
"else if(window.xmlhttprequest)"是為了防止一些瀏覽器既不支持activex控件,也不支持xmlhttprequest組件而進(jìn)行的判斷.其中xmlhttprequest也不是window對象的標(biāo)準(zhǔn)屬性,但可以用來判斷瀏覽器是否支持xmlhttprequest組件.
如果瀏覽器既不支持activex控件,也不支持xmlhttprequest組件,那么就不會對xmlhttprequest變量賦值.
2、創(chuàng)建http請求
創(chuàng)建了xmlhttprequest對象之后，必須為xmlhttprequest對象創(chuàng)建http請求，用于說明xmlhttprequest對象要從哪里獲取數(shù)據(jù)。通?？梢允蔷W(wǎng)站中的數(shù)據(jù),也可以是本地中其他文件中的數(shù)據(jù)。
創(chuàng)建http請求可以使用xmlhttprequest對象的open()方法,其語法代碼如下所示:
xmlhttprequest.open(method,url,flag,name,password);
代碼中的參數(shù)解釋如下所示:
- method：該參數(shù)用于指定http的請求方法，一共有g(shù)et、post、head、put、delete五種方法，常用的方法為get和post。
- url：該參數(shù)用于指定http請求的url地址，可以是絕對url，也可以是相對url。
- flag：該參數(shù)為可選，參數(shù)值為布爾型。該參數(shù)用于指定是否使用異步方式。true表示異步、false表示同步，默認(rèn)為true。
- name：該參數(shù)為可選參數(shù)，用于輸入用戶名。如果服務(wù)器需要驗(yàn)證，則必須使用該參數(shù)。
- password：該參數(shù)為可選，用于輸入密碼。若服務(wù)器需要驗(yàn)證，則必須使用該參數(shù)。
通?？梢允褂靡韵麓a來訪問一個(gè)網(wǎng)站文件的內(nèi)容。
xmlhttprequest.open("get","http://www.aspxfans.com/booksupport/javascript/ajax.htm",true);或者使用以下代碼來訪問一個(gè)本地文件內(nèi)容：
xmlhttprequest.open("get","ajax.htm",true);注意：如果html文件放在web服務(wù)器上，在netscape瀏覽器中的javascript安全機(jī)制不允許與本機(jī)之外的主機(jī)進(jìn)行通信。也就是說，使用open()方法只能打開與html文件在同一個(gè)服務(wù)器上的文件。而在ie瀏覽器中則無此限制（雖然可以打開其他服務(wù)器上的文件，但也會有警告提示）。
3、設(shè)置響應(yīng)http請求狀態(tài)變化的函數(shù)
創(chuàng)建完http請求之后，應(yīng)該就可以將http請求發(fā)送給web服務(wù)器了。然而，發(fā)送http請求的目的是為了接收從服務(wù)器中返回的數(shù)據(jù)。從創(chuàng)建xmlhttprequest對象開始，到發(fā)送數(shù)據(jù)、接收數(shù)據(jù)、xmlhttprequest對象一共會經(jīng)歷以下5中狀態(tài)。
只有在xmlhttprequest對象完成了以上5個(gè)步驟之后，才可以獲取從服務(wù)器端返回的數(shù)據(jù)。因此，如果要獲得從服務(wù)器端返回的數(shù)據(jù)，就必須要先判斷xmlhttprequest對象的狀態(tài)。
xmlhttprequest對象可以響應(yīng)readystatechange事件，該事件在xmlhttprequest對象狀態(tài)改變時(shí)（也就是readystate屬性值改變時(shí)）激發(fā)。因此，可以通過該事件調(diào)用一個(gè)函數(shù)，并在該函數(shù)中判斷xmlhttprequest對象的readystate屬性值。如果readystate屬性值為4則使用responsetext屬性或responsexml屬性來獲取數(shù)據(jù)。具體代碼如下所示：
//設(shè)置當(dāng)xmlhttprequest對象狀態(tài)改變時(shí)調(diào)用的函數(shù)，注意函數(shù)名后面不要添加小括號
xmlhttprequest.onreadystatechange = getdata;
//定義函數(shù)
function getdata(){
//判斷xmlhttprequest對象的readystate屬性值是否為4，如果為4表示異步調(diào)用完成
if(xmlhttprequest.readystate == 4) {
//設(shè)置獲取數(shù)據(jù)的語句
}
}4、設(shè)置獲取服務(wù)器返回?cái)?shù)據(jù)的語句
如果xmlhttprequest對象的readystate屬性值等于4，表示異步調(diào)用過程完畢，就可以通過xmlhttprequest對象的responsetext屬性或responsexml屬性來獲取數(shù)據(jù)。
但是，異步調(diào)用過程完畢，并不代表異步調(diào)用成功了，如果要判斷異步調(diào)用是否成功，還要判斷xmlhttprequest對象的status屬性值，只有該屬性值為200，才表示異步調(diào)用成功，因此，要獲取服務(wù)器返回?cái)?shù)據(jù)的語句，還必須要先判斷xmlhttprequest對象的status屬性值是否等于200，如以下代碼所示：
if(xmlhttprequst.status == 200) {
document.write(xmlhttprequest.responsetext);//將返回結(jié)果以字符串形式輸出
//document.write(xmlhttprequest.responsexml);//或者將返回結(jié)果以xml形式輸出
}注意：如果html文件不是在web服務(wù)器上運(yùn)行，而是在本地運(yùn)行，則xmlhttprequest.status的返回值為0。因此，如果該文件在本地運(yùn)行，則應(yīng)該加上xmlhttprequest.status == 0的判斷。
通常將以上代碼放在響應(yīng)http請求狀態(tài)變化的函數(shù)體內(nèi)，如以下代碼所示：
//設(shè)置當(dāng)xmlhttprequest對象狀態(tài)改變時(shí)調(diào)用的函數(shù)，注意函數(shù)名后面不要添加小括號
xmlhttprequest.onreadystatechange = getdata;
//定義函數(shù)
function getdata(){
//判斷xmlhttprequest對象的readystate屬性值是否為4，如果為4表示異步調(diào)用完成
if(xmlhttprequest.readystate==4){
if(xmlhttprequest.status == 200 || xmlhttprequest.status == 0){//設(shè)置獲取數(shù)據(jù)的語句
document.write(xmlhttprequest.responsetext);//將返回結(jié)果以字符串形式輸出
//docunment.write(xmlhttprequest.responsexml);//或者將返回結(jié)果以xml形式輸出
}
}
}5、發(fā)送http請求
在經(jīng)過以上幾個(gè)步驟的設(shè)置之后，就可以將http請求發(fā)送到web服務(wù)器上去了。發(fā)送http請求可以使用xmlhttprequest對象的send()方法，其語法代碼如下所示：
xmlhttprequest.send(data);
其中data是個(gè)可選參數(shù)，如果請求的數(shù)據(jù)不需要參數(shù)，即可以使用null來替代。data參數(shù)的格式與在url中傳遞參數(shù)的格式類似，以下代碼為一個(gè)send()方法中的data參數(shù)的示例：
name=myname&value=myvalue
只有在使用send()方法之后，xmlhttprequest對象的readystate屬性值才會開始改變，也才會激發(fā)readystatechange事件，并調(diào)用函數(shù)。
6、局部更新
在通過ajax的異步調(diào)用獲得服務(wù)器端數(shù)據(jù)之后，可以使用javascript或dom來將網(wǎng)頁中的數(shù)據(jù)進(jìn)行局部更新。
三、完整的ajax實(shí)例
<html>
<head>
<title>ajax實(shí)例</title>
<script language="javascript" type="text/javascript">
function ajaxhttprequestfunc(){
let xmlhttprequest; // 創(chuàng)建xmlhttprequest對象，即一個(gè)用于保存異步調(diào)用對象的變量
if(window.activexobject){ // ie瀏覽器的創(chuàng)建方式
xmlhttprequest = new activexobject("microsoft.xmlhttp");
}else if(window.xmlhttprequest){ // netscape瀏覽器中的創(chuàng)建方式
xmlhttprequest = new xmlhttprequest();
}
xmlhttprequest.onreadystatechange=function(){ // 設(shè)置響應(yīng)http請求狀態(tài)變化的事件
console.log('請求過程', xmlhttprequest.readystate);
if(xmlhttprequest.readystate == 4){ // 判斷異步調(diào)用是否成功,若成功開始局部更新數(shù)據(jù)
console.log('狀態(tài)碼為', xmlhttprequest.status);
if(xmlhttprequest.status == 200) {
console.log('異步調(diào)用返回的數(shù)據(jù)為：', xmlhttprequest .responsetext);
document.getelementbyid("mydiv").innerhtml = xmlhttprequest .responsetext; // 局部刷新數(shù)據(jù)到頁面
} else { // 如果異步調(diào)用未成功,彈出警告框,并顯示錯(cuò)誤狀態(tài)碼
alert("error:http狀態(tài)碼為:"+xmlhttprequest.status);
}
}
}
xmlhttprequest.open("get","http://m.aalaour.cn/try/ajax/ajax_info.txt",true); // 創(chuàng)建http請求，并指定請求得方法（get）、url（http://m.aalaour.cn/try/ajax/ajax_info.txt）以及驗(yàn)證信息
xmlhttprequest.send(null); // 發(fā)送請求
}
</script>
</head>
<body>
<div id="mydiv">原數(shù)據(jù)</div>
<input type = "button" value = "更新數(shù)據(jù)" onclick = "ajaxhttprequestfunc()">
</body>
</html>直接運(yùn)行該段代碼可能會出現(xiàn)跨域的現(xiàn)象，控制臺的報(bào)錯(cuò)信息如下：
這是因?yàn)榇a中設(shè)置請求的是菜鳥驛站服務(wù)端的文件，所以出現(xiàn)跨域?qū)е挛凑＋@取到服務(wù)端返回的數(shù)據(jù)。
解決辦法：復(fù)制該段代碼在菜鳥驛站的編輯器中粘貼運(yùn)行即可。
點(diǎn)擊運(yùn)行前頁面顯示為：
點(diǎn)擊運(yùn)行后頁面顯示為：
好啦，關(guān)于ajax的部分到此就全部學(xué)習(xí)完成了，給自己點(diǎn)一個(gè)大大的贊吧！
參考文獻(xiàn)：
【1】https://qqe2.com/java/post/28.html
【2】https://www.jb51.net/article/240527.htm
總結(jié)
到此這篇關(guān)于ajax請求五個(gè)步驟的文章就介紹到這了,更多相關(guān)ajax請求步驟內(nèi)容請搜索碩編程以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持碩編程！
學(xué)習(xí)AJAX