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

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

原理及概念

AJAX即“Asynchronous Javascript And XML”（非同步Javascript和XML），是一種用於建立快速動態網頁的技術。

動態網頁：是指可以通過伺服器語言結合資料庫隨時修改資料的網頁。

靜態網頁，隨著html代碼的產生，頁面的內容和顯示效果就基本上不會發生變化了——除非你修改頁面代碼。

AJAX = 非同步 Javascript和XML（標準通用標記語言 (SGML)的子集）。

AJAX 是與伺服器交換資料並更新部分網頁的藝術，在不重新載入整個頁面的情況下。

Ajax的優勢

AJAX 在瀏覽器與 Web 服務器之間使用非同步資料轉送（HTTP 要求），這樣就可使網頁從伺服器請求少量的資訊，而不是整個頁面。

AJAX 可使網際網路應用程式更小、更快，更友好。

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

AJAX 基於下列 Web 標準：

JavascriptXMLHTMLCSS在 AJAX 中使用的 Web 標準已被良好定義，並被所有的主流瀏覽器支援。AJAX 應用程式獨立於瀏覽器和平台。

Web 應用程式較傳統型應用程式有諸多優勢；它們能夠涉及廣大的使用者，它們更易安裝及維護，也更易開發。

不過，網際網路應用程式並不像傳統的傳統型應用程式那樣完善且友好。

通過 AJAX，網際網路應用程式可以變得更完善，更友好。

Ajax的非同步

非同步：是相對於同步而言的，我們學過的定時器也是非同步一種，也就是其他程式不需要等待定時器的代碼全部執行完畢以後才能執行代碼。因為定時器有可能是無限迴圈執行代碼的，如果等待定時器執行完畢那麼其他的代碼將永遠無法運行。所以非同步編程就是相對於其他代碼是獨立完成的。也就是上面所說的ajax是獨立於瀏覽器平台的。

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

Ajax的工作原理

Ajax 核心對象XMLHttpRequest
var _hr=new window.XMLHttpRequest();
通過該執行個體化的對象向伺服器
發出請求，等待伺服器響應
伺服器響應完成後用戶端再處理
伺服器端響應的資料。
Ajax請求伺服器的過程中有5個狀態
0：表示請求伺服器之前
1：表示開啟遠程伺服器連結對應open方法
2：表示向伺服器發送資料對應send方法
3：表示伺服器響應過程中並未結束
4：表示伺服器響應完成

/** * 建立XMLHttpRequest對象 * @param _method 請求方式: post||get * @param _url 遠程伺服器位址 * @param _async 是否非同步 * @param _parameter 向伺服器發送資料 * @param _callBack 回呼函數 */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("該瀏覽器版本太低,已經被大部分市場淘汰,請升級!!!");            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頁面引入之後，調用 ajaxRequest()函數，傳入你想要的參數，就可以正常使用了。

此方法純屬個人封裝，有更精簡方法的朋友歡迎與我分享！

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。