- 相關(guān)推薦
關(guān)于A(yíng)jax技術(shù)原理的幾點(diǎn)總結
ajax：Asynchronous Javascript and XML 異步Javascript 和XML。是一種創(chuàng )建交互式網(wǎng)頁(yè)應用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。那么下面我們來(lái)談?wù)勱P(guān)乎Ajax技術(shù)原理的幾點(diǎn)總結。想了解更多相關(guān)資訊請持續關(guān)注我們應屆畢業(yè)生培訓網(wǎng)。
1.0 優(yōu)勢：
1.1 通過(guò)異步模式，提升了用戶(hù)體驗。
1.2 優(yōu)化了瀏覽器與服務(wù)器之間的傳輸，減少了不必要的數據往返，減少了帶寬占用。
1.3 Ajax引擎在客戶(hù)端運行，承擔了一部分本來(lái)由服務(wù)器承擔的共組，從而減少了大用戶(hù)量下的服務(wù)器負載。
2.0 工作原理
Ajax核心是Javascript對象XmlHttpRequest。該對象在 IE5中首次引用，它是一種支持異步請求的技術(shù)。XmlHttpRequest使您可以使用Javascript向服務(wù)器提出請求并處理響應，而不是阻塞用戶(hù)，達到無(wú)刷新的效果。
由于瀏覽器之間存在差異，創(chuàng )建XmlHttpRequest對象的方式也有差異（主要是IE和其他瀏覽器之間的差異）。
2.1 比較通用型的創(chuàng )建異步請求的方法:
代碼如下：
function CreateXmlHttp() {
//非IE瀏覽器創(chuàng )建XmlHttpRequest對象的方法
if (window.XmlHttpRequest) {
xmlhttp = new XmlHttpRequest();
}
//IE瀏覽器創(chuàng )建XmlHttpRequest對象的方法
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)程返回數據的字符串形式。
responseXML 從服務(wù)器進(jìn)程返回的DOM兼容的文檔數據對象。
status 從服務(wù)器返回的數字代碼，比如常見(jiàn)的404（未找到）和200（已就緒）
status Text 伴隨狀態(tài)碼的字符串信息
readyState 對象狀態(tài)值
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發(fā)送數據) send方法已調用，但是當前的狀態(tài)及http頭未知
3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時(shí)通過(guò)responseBody和responseText獲取部分數據會(huì )出現錯誤，
4 (完成) 數據接收完畢,此時(shí)可以通過(guò)通過(guò)responseXml和responseText獲取完整的回應數據
2.3 簡(jiǎn)單的Demo示例：
代碼如下：
function SendAsyncRequest() {
var data = document.getElementById("XXId").value;
CreateXmlHttp(); //創(chuàng )建XmlHttpRequest對象
if (!xmlhttp) { //判斷對象是否創(chuàng )建成功
alert("創(chuàng )建xmlhttp對象異常！");
return false;
}
xmlhttp.open("POST", url, false); //開(kāi)始發(fā)送異步請求
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText; //數據接收完畢
}
}
xmlhttp.send();
}
3.0 缺點(diǎn)：
1.破壞了瀏覽器后退按鈕的正常行為，動(dòng)態(tài)更新頁(yè)面后，無(wú)法回到前一個(gè)頁(yè)面的狀態(tài)。
2.使用Javascript作為Ajax的基礎引擎，Javascript的兼容性并不是很好。（當然現在流行的Jquery等javascript類(lèi)庫大大改善了這些問(wèn)題,對Ajax的調用也方便了很多，本文只是簡(jiǎn)述了Ajax的基本實(shí)現原理）。
【Ajax技術(shù)原理的幾點(diǎn)總結】相關(guān)文章：
幾點(diǎn)鋼琴的技術(shù)基礎09-22
PTN網(wǎng)絡(luò )技術(shù)的原理及分析08-16
華為vlan技術(shù)原理預配置命令08-17
基于ajax實(shí)現無(wú)刷新分頁(yè)的方法10-15
解析ajax請求post和get的區別10-01
如何利用ajax獲取博文列表08-03