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

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、新羅網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、HTML5建站、成都做商城網(wǎng)站、集團公司官網(wǎng)建設、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為新羅等各大城市提供網(wǎng)站開發(fā)制作服務。

原理及概念

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

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

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

AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。

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

Ajax的優(yōu)勢

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

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

AJAX 是一種獨立于 Web 服務器軟件的瀏覽器技術。

AJAX 基于下列 Web 標準：

JavaScriptXMLHTMLCSS在 AJAX 中使用的 Web 標準已被良好定義，并被所有的主流瀏覽器支持。AJAX 應用程序獨立于瀏覽器和平臺。

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

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

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

Ajax的異步

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

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

Ajax的工作原理

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

/**
 * 創(chuàng)建XMLHttpRequest對象
 * @param _method 請求方式: post||get
 * @param _url 遠程服務器地址
 * @param _async 是否異步
 * @param _parameter 向服務器發(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ù)，就可以正常使用了。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js原生Ajax如何封裝”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

名稱欄目：js原生Ajax如何封裝
文章路徑：http://www.yijiale78.com/article46/ihopeg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、網(wǎng)站營銷、服務器托管、網(wǎng)站排名、品牌網(wǎng)站建設、網(wǎng)站制作

廣告

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