js原生Ajax的封裝和原理詳解

更新時(shí)間：2017年03月11日 10:22:07 作者：sjpqy

這篇文章主要為大家詳細(xì)介紹了js原生Ajax的封裝和原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

原理及概念

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

動(dòng)態(tài)網(wǎng)頁(yè)：是指可以通過(guò)服務(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ù)，它們更易安裝及維護(hù)，也更易開(kāi)發(fā)。

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

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

Ajax的異步

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

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

Ajax的工作原理

Ajax 核心對(duì)象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通過(guò)該實(shí)例化的對(duì)象向服務(wù)器
發(fā)出請(qǐng)求，等待服務(wù)器響應(yīng)
服務(wù)器響應(yīng)完成后客戶(hù)端再處理
服務(wù)器端響應(yīng)的數(shù)據(jù)。
Ajax請(qǐng)求服務(wù)器的過(guò)程中有5個(gè)狀態(tài)
0：表示請(qǐng)求服務(wù)器之前
1：表示打開(kāi)遠(yuǎn)程服務(wù)器鏈接對(duì)應(yīng)open方法
2：表示向服務(wù)器發(fā)送數(shù)據(jù)對(duì)應(yīng)send方法
3：表示服務(wù)器響應(yīng)過(guò)程中并未結(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，在使用的過(guò)程中，只需要新建一個(gè)js文件，將這段代碼放進(jìn)去，什么都不要改，在HTML頁(yè)面引入之后，調(diào)用 ajaxRequest()函數(shù)，傳入你想要的參數(shù)，就可以正常使用了。

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

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

您可能感興趣的文章: