您好,登錄后才能下訂單哦!
這篇文章主要介紹“Ajax的原理及實現(xiàn)過程”,在日常操作中,相信很多人在Ajax的原理及實現(xiàn)過程問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Ajax的原理及實現(xiàn)過程”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
1.什么是AJAX?
AJAX全稱為“Asynchronous JavaScript and XML”(異步JavaScript和XML),是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。它使用:
使用XHTML+CSS來標(biāo)準(zhǔn)化呈現(xiàn);
使用XML和XSLT進行數(shù)據(jù)交換及相關(guān)操作;
使用XMLHttpRequest對象與Web服務(wù)器進行異步數(shù)據(jù)通信;
使用Javascript操作Document Object Model進行動態(tài)顯示及交互;
使用JavaScript綁定和處理所有數(shù)據(jù)。
2.AJAX的工作原理
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時再由Ajax引擎代為向服務(wù)器提交請求。
Ajax:Asynchronous javascript and xml,實現(xiàn)了客戶端與服務(wù)器進行數(shù)據(jù)交流過程。使用技術(shù)的好處是:不用頁面刷新,并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時可以進行其他操作。
這就是異步調(diào)用的很好體現(xiàn)。首先得了解什么是異步和同步的概念。
舉個例子:比如你去圖書館借某種書,可惜圖書館此書被借完。這時可以采用兩種做法。
第一種做法:在圖書館一直等待,直到有人還書,然后再去吃飯睡覺。
第二種做法:直接跟圖書館管理員約定,若是有人還書,直接通知你。你則該忙什么忙什么。到時候會通知你。
而第一種做法就是同步的表現(xiàn),必須等待別人還書(等待服務(wù)器返回信息)才進行其他事情,至死方休。
而第二種做法就是異步的表現(xiàn),不耽誤時間,合理利用時間高效率做事。
遇到這種情況,你會采用那種辦法呢?
選擇第一種,哈哈,說明你太執(zhí)著啦;選擇第二種,說明你靈活變通,合理安排自己的人生。你自己看著辦吧。
那Ajax是如何從瀏覽器發(fā)送Http請求到服務(wù)器呢?
這就得使用一個重要的對象XMLHttpRequest。
那首先了解一下XMLHttpRequest對象的屬性和方法。
主要的屬性:
readyState屬性有五個狀態(tài)值。
0:是uninitialized,未初始化。已經(jīng)創(chuàng)建了XMLHttpRequest對象但是未初始化。
1:是loading,send for request but not called .已經(jīng)開始準(zhǔn)備好要發(fā)送了。
2:是loaded, send called,headers and status are available。已經(jīng)發(fā)送,但是還沒有收到響應(yīng)。
3:是interactive,downloading response,but responseText only partial set.正在接受響應(yīng),但是還不完整。
4:是completed,finish downloading.接受響應(yīng)完畢。
responseText:服務(wù)器返回的響應(yīng)文本。只有當(dāng)readyState>=3的時候才有值,根據(jù)readyState的狀態(tài)值,可以知道,當(dāng)readyState=3,返回的響應(yīng)文本不完整,只有readyState=4,完全返回,才能接受全部的響應(yīng)文本。
responseXML:response as Dom Document object。響應(yīng)信息是xml,可以解析為Dom對象。
status:服務(wù)器的Http狀態(tài)碼,若是200,則表示OK,404,表示為未找到。
statusText:服務(wù)器http狀態(tài)碼的文本。比如OK,Not Found。
主要的方法:
open(method,url,boolean):打開XMLHttpRequest對象。其中method方法有g(shù)et,post,delete,put。若是查數(shù)據(jù),從服務(wù)器中得到一定的數(shù)據(jù),則使用get。若是直接提交到服務(wù)器中,更新一定的數(shù)據(jù),則使用post;url是請求資源的地址。第三個參數(shù)表示是否使用異步。默認(rèn)情況是true,因為Ajax的特點就是異步傳送。若使用同步則false。異步和同步上述已經(jīng)舉例。
send(body):發(fā)送請求Ajax引擎,讓Ajax引擎操作。其中發(fā)送的內(nèi)容可以是需要的參數(shù),若是沒有參數(shù),直接send(null)
那如何使用Ajax技術(shù)?
首先,有客戶端事件觸發(fā)Ajax事件。
然后,創(chuàng)建xmlHttpRequest對象,根據(jù)瀏覽器不同,創(chuàng)建的xmlHttpRequest對象不同。用open調(diào)用,用send發(fā)送請求給Ajax引擎。
最后,執(zhí)行完畢后,把結(jié)果返回給客戶端。
執(zhí)行的流程如下:\
測試代碼如下:
創(chuàng)建xmlHttpRequest對象:
function createXMLHttpRequest() { //表示當(dāng)前瀏覽器不是ie,如ns,firefox if(window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } 客戶端事件觸發(fā): function validate(field){ if(trim(field.value).length!=0) { //創(chuàng)建XMLHttpRequest createXMLHttpRequest() ; var url="user_validate.jsp?userId=" + trim(field.value)+"×tampt="+new Date().getTime(); // alert(url); xmlHttp.open("GET", url, true); //方法地址。處理完成后自動調(diào)用,回調(diào)。 xmlHttp.onreadystatechange=callback ; xmlHttp.send(null);//將參數(shù)發(fā)送到Ajax引擎 } else{ document.getElementById("userIdSpan").innerHTML = ""; } }
結(jié)果返回操作:
function callback(){ { alert(xmlHttp.readyState); if(xmlHttp.readyState==4){ //Ajax引擎初始化 if(xmlHttp.status==200){ //http協(xié)議成功 //alert(xmlHttp.responseText); document.getElementById("userIdSpan").innerHTML = "<font color='red'>" + xmlHttp.responseText + "</font>"; }else { alert("請求失敗,錯誤碼="+xmlHttp.status); } } }
注意:
onreadyStateChange事件,當(dāng)readyState狀態(tài)值發(fā)生改變就會觸發(fā)此事件。
其中,xmlHttpRequest提交http請求的過程中,readyState歷經(jīng)五個狀態(tài)值(0,1,2,3,4),所以callback函數(shù)中的alert(xmlHttp.readyState)則會不斷輸出1,2,3,4。其中0狀態(tài)不會輸出,因為0狀態(tài)的時候并不執(zhí)行此事件。
到此,關(guān)于“Ajax的原理及實現(xiàn)過程”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。