ajax的工作原理以及異步請求的封裝介紹
更新時間：2013年09月23日 09:13:47 作者：
客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當服務器返回響應時，會調(diào)用先前注冊的回調(diào)函數(shù)，異步請求不會阻塞客戶端的操作，達到頁面無法刷新就可以更新數(shù)據(jù)的效果
Ajax原理：
客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當服務器返回響應時，會調(diào)用先前注冊的回調(diào)函數(shù)，在回調(diào)函數(shù)中可以使用javascript操作DOM來更新頁面，異步請求不會阻塞客戶端的操作，達到頁面無法刷新就可以更新數(shù)據(jù)的效果。
異步請求的封裝：
var xhr=false;
//step1:創(chuàng)建一個兼容瀏覽器各個版本的XMLHttpRequest對象
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { //IE瀏覽器
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5+
}
}
//step2:設置回調(diào)函數(shù)
xhr.onreadystatechange = myCallback;
//step3:創(chuàng)建一個異步請求
xhr.open("method", "url", true);
//如果是post：要設置請求消息體數(shù)據(jù)的編碼方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//step4:發(fā)送異步請求
xhr.send(content); //如果是get方式 content為null，若為post，content為“名=值”對。
客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當服務器返回響應時，會調(diào)用先前注冊的回調(diào)函數(shù)，在回調(diào)函數(shù)中可以使用javascript操作DOM來更新頁面，異步請求不會阻塞客戶端的操作，達到頁面無法刷新就可以更新數(shù)據(jù)的效果。
異步請求的封裝：
復制代碼 代碼如下:
var xhr=false;
//step1:創(chuàng)建一個兼容瀏覽器各個版本的XMLHttpRequest對象
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
if (window.ActiveXObject) { //IE瀏覽器
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5+
}
}
//step2:設置回調(diào)函數(shù)
xhr.onreadystatechange = myCallback;
//step3:創(chuàng)建一個異步請求
xhr.open("method", "url", true);
//如果是post：要設置請求消息體數(shù)據(jù)的編碼方式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//step4:發(fā)送異步請求
xhr.send(content); //如果是get方式 content為null，若為post，content為“名=值”對。
相關文章
這篇文章主要介紹了ajax跳轉(zhuǎn)到新的jsp頁面的方法，在不刷新整個頁面的情況下更新頁面的局部信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
Ajax通過XML異步提交的方法實現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實現(xiàn)二級聯(lián)動(xml方法)
這篇文章主要介紹了Ajax通過XML異步提交的方法實現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實現(xiàn)二級聯(lián)動(xml方法)的相關資料,我們要根據(jù)異步提交，局部刷新的思想來實現(xiàn)來提高用戶交互問題，對ajax二級聯(lián)動效果感興趣的朋友一起看看吧2016-11-11
下面小編就為大家分享一篇ajax實現(xiàn)上傳圖片保存到后臺并讀取的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
使用ajax技術無刷新動態(tài)調(diào)用股票信息
新浪的財金頻道一直感覺做得很好。但由于最近網(wǎng)速慢的緣故，查看股票信息時網(wǎng)頁老是打不開。這幾天一直在研究ajax，于是用jquery自己做了一個自動讀取新浪股票實時數(shù)據(jù)的頁面。2008-11-11
細數(shù)Ajax請求中的async:false和async:true的差異
下面小編就為大家?guī)硪黄殧?shù)Ajax請求中的async:false和async:true的差異。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
在jquery中的ajax有二個數(shù)據(jù)發(fā)送模式，一種是get，另一種是post()，下面我來給大家介紹介紹，有需要了解的朋友可參考2015-09-09
這篇文章主要向大家介紹了原生ajax調(diào)用數(shù)據(jù)實例，具有一定的參考價值，感興趣的朋友可以參考一下2016-01-01
Ajax方式實現(xiàn)定期更新頁面某塊內(nèi)容的方法
這篇文章主要介紹了Ajax方式實現(xiàn)定期更新頁面某塊內(nèi)容的方法,涉及jquery中l(wèi)oad方法Ajax調(diào)用及setInterval定時執(zhí)行的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
AJAX實現(xiàn)鼠標經(jīng)過彈出詳細介紹示例
鼠標經(jīng)過彈出詳細內(nèi)容的效果想必大家都有見到過吧，其實很簡單，在本文為大家介紹下使用ajax實現(xiàn)此效果，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了js實現(xiàn)ajax分頁,以完整實例形式詳細分析了ajax分頁的具體步驟與實現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下2016-04-04