js原生Ajax如何封裝

這篇文章主要介紹了js原生Ajax如何封裝，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

原理及概念

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

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

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

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

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

Ajax的優(yōu)勢

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

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

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

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

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

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

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

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

Ajax的異步

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

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

Ajax的工作原理

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

/**
 * 創(chuàng)建XMLHttpRequest對象
 * @param _method 請求方式: 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)被大部分市場淘汰,請升級!!!");
            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，在使用的過程中，只需要新建一個js文件，將這段代碼放進去，什么都不要改，在HTML頁面引入之后，調(diào)用 ajaxRequest()函數(shù)，傳入你想要的參數(shù)，就可以正常使用了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js原生Ajax如何封裝”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!