這篇文章主要介紹了關於Ajax技術原理的3點總結,需要的朋友可以參考下
ajax:Asynchronous Javascript and XML 異步Javascript 和XML。
是一種創建互動式網頁應用程式的網頁開發技術。
1.0 優點:
1.1 透過非同步模式,提升了使用者體驗。
1.2 最佳化了瀏覽器與伺服器之間的傳輸,並減少了不必要的資料往返,減少了頻寬佔用。
1.3 Ajax引擎在客戶端運行,並承擔了一個原本由伺服器承擔的共組,從而減少了大型用戶量下的伺服器負載。
2.0 運作原理
Ajax核心是Javascript物件XmlHttpRequest。該物件在 IE5中首次引用,它是一種支援非同步請求的技術。 XmlHttpRequest可讓您使用Javascript向伺服器提出請求並處理回應,而不是阻塞用戶,達到無刷新的效果。
因瀏覽器之間存在差異,因此創建XmlHttpRequest物件的方式也有差異(主要是IE和其他瀏覽器之間的差異)。
2.1 比較通用型的建立非同步請求的方法:
function CreateXmlHttp() { //非IE浏览器创建XmlHttpRequest对象的方法 if (window.XmlHttpRequest) { xmlhttp = new XmlHttpRequest(); } //IE浏览器创建XmlHttpRequest对象的方法 if (window.ActiveXObject) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try { xmlhttp = new ActiveXObject("msxml2.XMLHTTP"); } catch (ex) { } } } }
2.2 XmlHttpRequest相關屬性:
# onreadystatechange
# onreadystatechange# 〠
responseText 從伺服器程序傳回資料的字串形式。
responseXML 從伺服器程序傳回的DOM相容的文件資料物件。
status 從伺服器中回復「 伴隨狀態碼的字串資訊
readyState物件狀態值
0 (未初始化) 物件已建立,但是尚未初始化(尚未呼叫open方法)
1 (初始化) 物件已建立,尚未呼叫方法
#send物件
#家物件3 (資料傳送中) 已接收部分資料,因為回應及http頭不全,這透過回應時透過所有回應資料和httpresponse,這透過回應時透過相同資料來獲取部分數據會出現錯誤,
4 (完成) 數據接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數據function SendAsyncRequest() { var data = document.getElementById("XXId").value; CreateXmlHttp(); //创建XmlHttpRequest对象 if (!xmlhttp) { //判断对象是否创建成功 alert("创建xmlhttp对象异常!"); return false; } xmlhttp.open("POST", url, false); //开始发送异步请求 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) { document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText; //数据接收完毕 } } xmlhttp.send(); }
1.破壞了瀏覽器後退按鈕的正常行為,動態更新頁面後,無法回到前一頁的狀態。 2.使用Javascript作為Ajax的基礎引擎,Javascript的兼容性並不是很好。 (當然現在流行的Jquery等javascript類別函式庫大大改善了這些問題,對Ajax的呼叫也方便了很多,本文只是簡述了Ajax的基本實作原理)。
###上面是我整理給大家的,希望今後對大家有幫助。 ######相關文章:#########AJAX封裝類別使用指南#############AJAX初級教程之初識AJAX###################################################################### ####Ajax中瀏覽器與伺服器互動詳解######以上是關於Ajax技術原理的3點總結_AJAX相關的詳細內容。更多資訊請關注PHP中文網其他相關文章!