這篇文章主要介紹“Ajax的原理及實(shí)現(xiàn)過程”，在日常操作中，相信很多人在Ajax的原理及實(shí)現(xiàn)過程問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Ajax的原理及實(shí)現(xiàn)過程”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

成都創(chuàng)新互聯(lián)主營定安網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,app開發(fā)定制,定安h5小程序設(shè)計(jì)搭建,定安網(wǎng)站營銷推廣歡迎定安等地區(qū)企業(yè)咨詢

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進(jìn)行數(shù)據(jù)交換及相關(guān)操作；
使用XMLHttpRequest對象與Web服務(wù)器進(jìn)行異步數(shù)據(jù)通信；
使用Javascript操作Document Object Model進(jìn)行動(dòng)態(tài)顯示及交互；
使用JavaScript綁定和處理所有數(shù)據(jù)。

2.AJAX的工作原理

Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層(AJAX引擎),使用戶操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶請求都提交給服務(wù)器,像—些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給Ajax引擎自己來做, 只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由Ajax引擎代為向服務(wù)器提交請求。

 Ajax：Asynchronous javascript and xml，實(shí)現(xiàn)了客戶端與服務(wù)器進(jìn)行數(shù)據(jù)交流過程。使用技術(shù)的好處是：不用頁面刷新，并且在等待頁面?zhèn)鬏敂?shù)據(jù)的同時(shí)可以進(jìn)行其他操作。

這就是異步調(diào)用的很好體現(xiàn)。首先得了解什么是異步和同步的概念。

   舉個(gè)例子：比如你去圖書館借某種書，可惜圖書館此書被借完。這時(shí)可以采用兩種做法。

第一種做法：在圖書館一直等待，直到有人還書，然后再去吃飯睡覺。

第二種做法：直接跟圖書館管理員約定，若是有人還書，直接通知你。你則該忙什么忙什么。到時(shí)候會(huì)通知你。

而第一種做法就是同步的表現(xiàn)，必須等待別人還書（等待服務(wù)器返回信息）才進(jìn)行其他事情，至死方休。

而第二種做法就是異步的表現(xiàn)，不耽誤時(shí)間，合理利用時(shí)間高效率做事。

遇到這種情況，你會(huì)采用那種辦法呢？

選擇第一種，哈哈，說明你太執(zhí)著啦；選擇第二種，說明你靈活變通，合理安排自己的人生。你自己看著辦吧。

  那Ajax是如何從瀏覽器發(fā)送Http請求到服務(wù)器呢？

  這就得使用一個(gè)重要的對象XMLHttpRequest。

  那首先了解一下XMLHttpRequest對象的屬性和方法。

  主要的屬性：

readyState屬性有五個(gè)狀態(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的時(shí)候才有值，根據(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是請求資源的地址。第三個(gè)參數(shù)表示是否使用異步。默認(rèn)情況是true，因?yàn)锳jax的特點(diǎn)就是異步傳送。若使用同步則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)+"&timestampt="+new Date().getTime();
 // alert(url);
 xmlHttp.open("GET", url, true);
 //方法地址。處理完成后自動(dòng)調(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("請求失敗，錯(cuò)誤碼="+xmlHttp.status);
   }    
 }
 }

注意：

      onreadyStateChange事件，當(dāng)readyState狀態(tài)值發(fā)生改變就會(huì)觸發(fā)此事件。

      其中，xmlHttpRequest提交http請求的過程中，readyState歷經(jīng)五個(gè)狀態(tài)值（0，1，2，3，4），所以callback函數(shù)中的alert(xmlHttp.readyState)則會(huì)不斷輸出1，2，3，4。其中0狀態(tài)不會(huì)輸出，因?yàn)?狀態(tài)的時(shí)候并不執(zhí)行此事件。

到此，關(guān)于“Ajax的原理及實(shí)現(xiàn)過程”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

分享文章：Ajax的原理及實(shí)現(xiàn)過程
URL網(wǎng)址：http://aaarwkj.com/article0/jpogoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站排名、標(biāo)簽優(yōu)化、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)