原理及概念

AJAX即“Asynchronous Javascript And XML”（異步Javascript和XML），是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)。

動(dòng)態(tài)網(wǎng)頁(yè)：是指可以通過服務(wù)器語(yǔ)言結(jié)合數(shù)據(jù)庫(kù)隨時(shí)修改數(shù)據(jù)的網(wǎng)頁(yè)。

靜態(tài)網(wǎng)頁(yè)，隨著html代碼的生成，頁(yè)面的內(nèi)容和顯示效果就基本上不會(huì)發(fā)生變化了——除非你修改頁(yè)面代碼。

AJAX = 異步 Javascript和XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的子集）。

AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù)，在不重新加載整個(gè)頁(yè)面的情況下。

Ajax的優(yōu)勢(shì)

AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。

AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。

AJAX 是一種獨(dú)立于 Web 服務(wù)器軟件的瀏覽器技術(shù)。

AJAX 基于下列 Web 標(biāo)準(zhǔn)：

JavascriptXMLHTMLCSS在 AJAX 中使用的 Web 標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。

Web 應(yīng)用程序較桌面應(yīng)用程序有諸多優(yōu)勢(shì)；它們能夠涉及廣大的用戶，它們更易安裝及維護(hù)，也更易開發(fā)。

不過，因特網(wǎng)應(yīng)用程序并不像傳統(tǒng)的桌面應(yīng)用程序那樣完善且友好。

通過 AJAX，因特網(wǎng)應(yīng)用程序可以變得更完善，更友好。

Ajax的異步

異步：是相對(duì)于同步而言的，我們學(xué)過的定時(shí)器也是異步的一種，也就是其他程序不需要等待定時(shí)器的代碼全部執(zhí)行完畢以后才能執(zhí)行代碼。因?yàn)槎〞r(shí)器有可能是無(wú)限循環(huán)執(zhí)行代碼的，如果等待定時(shí)器執(zhí)行完畢那么其他的代碼將永遠(yuǎn)無(wú)法運(yùn)行。所以異步編程就是相對(duì)于其他代碼是獨(dú)立完成的。也就是上面所說的ajax是獨(dú)立于瀏覽器平臺(tái)的。

Tip：事件也是異步執(zhí)行的，事件是發(fā)生某件事情后才會(huì)執(zhí)行代碼的。
同步：我們之前所寫的代碼除了定時(shí)器和事件大部分都是同步執(zhí)行的。也就是同一個(gè)代碼塊中都是從上到下執(zhí)行的。

Ajax的工作原理

Ajax 核心對(duì)象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通過該實(shí)例化的對(duì)象向服務(wù)器
發(fā)出請(qǐng)求，等待服務(wù)器響應(yīng)
服務(wù)器響應(yīng)完成后客戶端再處理
服務(wù)器端響應(yīng)的數(shù)據(jù)。
Ajax請(qǐng)求服務(wù)器的過程中有5個(gè)狀態(tài)
0：表示請(qǐng)求服務(wù)器之前
1：表示打開遠(yuǎn)程服務(wù)器鏈接對(duì)應(yīng)open方法
2：表示向服務(wù)器發(fā)送數(shù)據(jù)對(duì)應(yīng)send方法
3：表示服務(wù)器響應(yīng)過程中并未結(jié)束
4：表示服務(wù)器響應(yīng)完成

/** * 創(chuàng)建XMLHttpRequest對(duì)象 * @param _method 請(qǐng)求方式: post||get * @param _url 遠(yuǎn)程服務(wù)器地址 * @param _async 是否異步 * @param _parameter 向服務(wù)器發(fā)送數(shù)據(jù) * @param _callBack 回調(diào)函數(shù) */function parameterDeal(_parameter){  var _sender="";  if(_parameter instanceof Object){    for(var k in _parameter){      _sender+=k+"="+_parameter[k]+"&";    }    return _sender.replace(//&$/g,"");  }else{    return _parameter;  }}function createXMLHttpRequest(){  try{    return new window.XMLHttpRequest();  }catch(e){    try{      return new ActiveXObject("MSXML2.XMLHTTP.6.0");    }catch(e){      try{        return new ActiveXObject("MSXML2.XMLHTTP.3.0");      }catch(e){        try{          return new ActiveXObject("MSXML2.XMLHTTP");        }catch(e){          try{            return new ActiveXObject("Microsoft.XMLHTTP");          }catch(e){            throw new Error("該瀏覽器版本太低,已經(jīng)被大部分市場(chǎng)淘汰,請(qǐng)升級(jí)!!!");            return;          }        }      }    }  }}function ajaxRequest(_method,_url,_async,_parameter,_callBack){  var _ajax=createXMLHttpRequest();  if(_ajax){    _ajax.onreadystatechange=function(){      if(_ajax.readyState==4 && _ajax.status==200){        _callBack(_ajax.responseText);      }    }    _ajax.open(_method,_url,_async);    _ajax.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8");    _ajax.send(parameterDeal(_parameter));  }}

這是封裝好了的原生Ajax，在使用的過程中，只需要新建一個(gè)js文件，將這段代碼放進(jìn)去，什么都不要改，在HTML頁(yè)面引入之后，調(diào)用 ajaxRequest()函數(shù)，傳入你想要的參數(shù)，就可以正常使用了。

此方法純屬個(gè)人封裝，有更精簡(jiǎn)方法的朋友歡迎與我分享！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。