關(guān)于Ajax技術(shù)原理的幾點(diǎn)總結(jié)

　　ajax：Asynchronous Javascript and XML   異步Javascript 和XML。是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。那么下面我們來(lái)談?wù)勱P(guān)乎Ajax技術(shù)原理的幾點(diǎn)總結(jié)。想了解更多相關(guān)資訊請(qǐng)持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生培訓(xùn)網(wǎng)。

　　1.0 優(yōu)勢(shì)：

　　1.1 通過(guò)異步模式，提升了用戶體驗(yàn)。

　　1.2 優(yōu)化了瀏覽器與服務(wù)器之間的傳輸，減少了不必要的數(shù)據(jù)往返，減少了帶寬占用。

　　1.3 Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的共組，從而減少了大用戶量下的服務(wù)器負(fù)載。

　　2.0 工作原理

　　Ajax核心是Javascript對(duì)象XmlHttpRequest。該對(duì)象在 IE5中首次引用，它是一種支持異步請(qǐng)求的技術(shù)。XmlHttpRequest使您可以使用Javascript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不是阻塞用戶，達(dá)到無(wú)刷新的效果。

　　由于瀏覽器之間存在差異，創(chuàng)建XmlHttpRequest對(duì)象的方式也有差異（主要是IE和其他瀏覽器之間的差異）。

　　2.1 比較通用型的創(chuàng)建異步請(qǐng)求的方法:

　　代碼如下：

　　function CreateXmlHttp() {

　　//非IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象的方法

　　if (window.XmlHttpRequest) {

　　xmlhttp = new XmlHttpRequest();

　　}

　　//IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象的方法

　　if (window.ActiveXObject) {

　　try {

　　xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

　　}

　　catch (e) {

　　try {

　　xmlhttp = new ActiveXObject("msxml2.XMLHTTP");

　　}

　　catch (ex)

　　{ }

　　}

　　}

　　}

　　2.2 XmlHttpRequest相關(guān)屬性：

　　onreadystatechange      每次狀態(tài)改變所觸發(fā)事件的事件處理程序。

　　responseText               從服務(wù)器進(jìn)程返回?cái)?shù)據(jù)的字符串形式。

　　responseXML                從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象。

　　status                         從服務(wù)器返回的數(shù)字代碼，比如常見(jiàn)的404（未找到）和200（已就緒）

　　status Text                  伴隨狀態(tài)碼的字符串信息

　　readyState                   對(duì)象狀態(tài)值

　　0 (未初始化) 對(duì)象已建立，但是尚未初始化（尚未調(diào)用open方法）

　　1 (初始化) 對(duì)象已建立，尚未調(diào)用send方法

　　2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用，但是當(dāng)前的狀態(tài)及http頭未知

　　3 (數(shù)據(jù)傳送中) 已接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及http頭不全，這時(shí)通過(guò)responseBody和responseText獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤，

　　4 (完成) 數(shù)據(jù)接收完畢,此時(shí)可以通過(guò)通過(guò)responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)

　　2.3 簡(jiǎn)單的Demo示例：

　　代碼如下：

　　function SendAsyncRequest() {

　　var data = document.getElementById("XXId").value;

　　CreateXmlHttp();  //創(chuàng)建XmlHttpRequest對(duì)象

　　if (!xmlhttp) {         //判斷對(duì)象是否創(chuàng)建成功

　　alert("創(chuàng)建xmlhttp對(duì)象異常！");

　　return false;

　　}

　　xmlhttp.open("POST", url, false);   //開(kāi)始發(fā)送異步請(qǐng)求

　　xmlhttp.onreadystatechange = function () {

　　if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {

　　document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText;   //數(shù)據(jù)接收完畢

　　}

　　}

　　xmlhttp.send();

　　}

　　3.0 缺點(diǎn)：

　　1.破壞了瀏覽器后退按鈕的正常行為，動(dòng)態(tài)更新頁(yè)面后，無(wú)法回到前一個(gè)頁(yè)面的狀態(tài)。

　　2.使用Javascript作為Ajax的基礎(chǔ)引擎，Javascript的兼容性并不是很好。（當(dāng)然現(xiàn)在流行的Jquery等javascript類庫(kù)大大改善了這些問(wèn)題,對(duì)Ajax的調(diào)用也方便了很多，本文只是簡(jiǎn)述了Ajax的基本實(shí)現(xiàn)原理）。

【Ajax技術(shù)原理的幾點(diǎn)總結(jié)】相關(guān)文章：

AJAX的工作原理及優(yōu)缺點(diǎn)08-16

幾點(diǎn)鋼琴的技術(shù)基礎(chǔ)09-22

PHP路由技術(shù)的原理與實(shí)踐10-15

PTN網(wǎng)絡(luò)技術(shù)的原理及分析08-16

華為vlan技術(shù)原理預(yù)配置命令08-17

使用ajax操作JavaScript對(duì)象的方法09-28

基于ajax實(shí)現(xiàn)無(wú)刷新分頁(yè)的方法10-15

解析ajax請(qǐng)求post和get的區(qū)別10-01

如何利用ajax獲取博文列表08-03