這篇文章主要講解了“Ajax技術(shù)有哪些優(yōu)缺點”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Ajax技術(shù)有哪些優(yōu)缺點”吧!
創(chuàng)新互聯(lián)公司長期為成百上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為細河企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、網(wǎng)站建設(shè),細河網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
ajax:Asynchronous Javascript and XML 異步Javascript 和XML。
是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。
1.0 優(yōu)勢:
1.1 通過異步模式,提升了用戶體驗。
1.2 優(yōu)化了瀏覽器與服務(wù)器之間的傳輸,減少了不必要的數(shù)據(jù)往返,減少了帶寬占用。
1.3 Ajax引擎在客戶端運行,承擔(dān)了一部分本來由服務(wù)器承擔(dān)的共組,從而減少了大用戶量下的服務(wù)器負載。
2.0 工作原理
Ajax核心是Javascript對象XmlHttpRequest。該對象在 IE5中首次引用,它是一種支持異步請求的技術(shù)。XmlHttpRequest使您可以使用Javascript向服務(wù)器提出請求并處理響應(yīng),而不是阻塞用戶,達到無刷新的效果。
由于瀏覽器之間存在差異,創(chuàng)建XmlHttpRequest對象的方式也有差異(主要是IE和其他瀏覽器之間的差異)。
2.1 比較通用型的創(chuàng)建異步請求的方法:
復(fù)制代碼 代碼如下:
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ù)器進程返回數(shù)據(jù)的字符串形式。
responseXML 從服務(wù)器進程返回的DOM兼容的文檔數(shù)據(jù)對象。
status 從服務(wù)器返回的數(shù)字代碼,比如常見的404(未找到)和200(已就緒)
status Text 伴隨狀態(tài)碼的字符串信息
readyState 對象狀態(tài)值
0 (未初始化) 對象已建立,但是尚未初始化(尚未調(diào)用open方法)
1 (初始化) 對象已建立,尚未調(diào)用send方法
2 (發(fā)送數(shù)據(jù)) send方法已調(diào)用,但是當(dāng)前的狀態(tài)及http頭未知
3 (數(shù)據(jù)傳送中) 已接收部分數(shù)據(jù),因為響應(yīng)及http頭不全,這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤,
4 (完成) 數(shù)據(jù)接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應(yīng)數(shù)據(jù)
2.3 簡單的Demo示例:
復(fù)制代碼 代碼如下:
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); //開始發(fā)送異步請求
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200 ) {
document.getElementById("XXShowId").innerHTML = xmlhttp.ResponseText; //數(shù)據(jù)接收完畢
}
}
xmlhttp.send();
}
3.0 缺點:
1.破壞了瀏覽器后退按鈕的正常行為,動態(tài)更新頁面后,無法回到前一個頁面的狀態(tài)。
2.使用Javascript作為Ajax的基礎(chǔ)引擎,Javascript的兼容性并不是很好。
感謝各位的閱讀,以上就是“Ajax技術(shù)有哪些優(yōu)缺點”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Ajax技術(shù)有哪些優(yōu)缺點這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!