原理及概念

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

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

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

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

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

Ajax的優(yōu)勢

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

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

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

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：表示服務器響應過程中并未結(jié)束
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ù)，就可以正常使用了。

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網(wǎng)。