快捷導(dǎo)航

ajax的工作原理以及異步請求的封裝介紹

更新時(shí)間：2013年09月23日 09:13:47 作者：

客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當(dāng)服務(wù)器返回響應(yīng)時(shí)，會(huì)調(diào)用先前注冊的回調(diào)函數(shù)，異步請求不會(huì)阻塞客戶端的操作，達(dá)到頁面無法刷新就可以更新數(shù)據(jù)的效果

Ajax原理：
客戶端通過瀏覽器的內(nèi)置對象XMLHttpRequest來發(fā)送異步請求，當(dāng)服務(wù)器返回響應(yīng)時(shí)，會(huì)調(diào)用先前注冊的回調(diào)函數(shù)，在回調(diào)函數(shù)中可以使用javascript操作DOM來更新頁面，異步請求不會(huì)阻塞客戶端的操作，達(dá)到頁面無法刷新就可以更新數(shù)據(jù)的效果。
異步請求的封裝：

復(fù)制代碼代碼如下:

 
var xhr=false; 
//step1:創(chuàng)建一個(gè)兼容瀏覽器各個(gè)版本的XMLHttpRequest對象 
if (window.XMLHttpRequest) { //IE7+, Firefox, Chrome, Opera, Safari 
xhr = new XMLHttpRequest(); 
} else { 
if (window.ActiveXObject) { //IE瀏覽器 
xhr = new ActiveXObject("Microsoft.XMLHTTP");//IE5+ 
} 
} 
//step2:設(shè)置回調(diào)函數(shù) 
xhr.onreadystatechange = myCallback; 
//step3:創(chuàng)建一個(gè)異步請求 
xhr.open("method", "url", true); 
//如果是post：要設(shè)置請求消息體數(shù)據(jù)的編碼方式 
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
//step4:發(fā)送異步請求 
xhr.send(content); //如果是get方式 content為null，若為post，content為“名=值”對。 

您可能感興趣的文章:

相關(guān)文章

ajax跳轉(zhuǎn)到新的jsp頁面的方法
這篇文章主要介紹了ajax跳轉(zhuǎn)到新的jsp頁面的方法，在不刷新整個(gè)頁面的情況下更新頁面的局部信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
Ajax通過XML異步提交的方法實(shí)現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)(xml方法)
這篇文章主要介紹了Ajax通過XML異步提交的方法實(shí)現(xiàn)從數(shù)據(jù)庫獲取省份和城市信息實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)(xml方法)的相關(guān)資料,我們要根據(jù)異步提交，局部刷新的思想來實(shí)現(xiàn)來提高用戶交互問題，對ajax二級(jí)聯(lián)動(dòng)效果感興趣的朋友一起看看吧
2016-11-11
ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例
下面小編就為大家分享一篇ajax實(shí)現(xiàn)上傳圖片保存到后臺(tái)并讀取的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
使用ajax技術(shù)無刷新動(dòng)態(tài)調(diào)用股票信息
新浪的財(cái)金頻道一直感覺做得很好。但由于最近網(wǎng)速慢的緣故，查看股票信息時(shí)網(wǎng)頁老是打不開。這幾天一直在研究ajax，于是用jquery自己做了一個(gè)自動(dòng)讀取新浪股票實(shí)時(shí)數(shù)據(jù)的頁面。
2008-11-11
細(xì)數(shù)Ajax請求中的async:false和async:true的差異
下面小編就為大家?guī)硪黄?xì)數(shù)Ajax請求中的async:false和async:true的差異。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
jQuery中ajax - post() 方法實(shí)例詳解
在jquery中的ajax有二個(gè)數(shù)據(jù)發(fā)送模式，一種是get，另一種是post()，下面我來給大家介紹介紹，有需要了解的朋友可參考
2015-09-09
原生ajax調(diào)用數(shù)據(jù)實(shí)例講解
這篇文章主要向大家介紹了原生ajax調(diào)用數(shù)據(jù)實(shí)例，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-01-01
Ajax方式實(shí)現(xiàn)定期更新頁面某塊內(nèi)容的方法
這篇文章主要介紹了Ajax方式實(shí)現(xiàn)定期更新頁面某塊內(nèi)容的方法,涉及jquery中l(wèi)oad方法Ajax調(diào)用及setInterval定時(shí)執(zhí)行的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-07-07
AJAX實(shí)現(xiàn)鼠標(biāo)經(jīng)過彈出詳細(xì)介紹示例
鼠標(biāo)經(jīng)過彈出詳細(xì)內(nèi)容的效果想必大家都有見到過吧，其實(shí)很簡單，在本文為大家介紹下使用ajax實(shí)現(xiàn)此效果，感興趣的朋友可以參考下
2013-09-09
js實(shí)現(xiàn)ajax分頁完整實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)ajax分頁,以完整實(shí)例形式詳細(xì)分析了ajax分頁的具體步驟與實(shí)現(xiàn)技巧,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
2016-04-04