Ajax 用js原生實現(xiàn)

ajax:一種請求數(shù)據(jù)的方式涩赢,不需要刷新整個頁面;
ajax的技術(shù)核心是 XMLHttpRequest 對象轩勘;
ajax 請求過程:創(chuàng)建 XMLHttpRequest 對象筒扒、連接服務(wù)器、發(fā)送請求绊寻、接收響應(yīng)數(shù)據(jù)花墩;

創(chuàng)建ajax過程
(1)創(chuàng)建XMLHttpRequest對象,也就是創(chuàng)建一個異步調(diào)用對象.
(2)創(chuàng)建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息.
(3)設(shè)置響應(yīng)HTTP請求狀態(tài)變化的函數(shù).
(4)發(fā)送HTTP請求.
(5)獲取異步調(diào)用返回的數(shù)據(jù).
(6)使用JavaScript和DOM實現(xiàn)局部刷新.

原文鏈接:http://caibaojian.com/ajax-jsonp.html
1澄步、創(chuàng)建·
1.1冰蘑、IE7及其以上版本中支持原生的 XHR 對象,因此可以直接用: var oAjax = new XMLHttpRequest();
1.2村缸、IE6及其之前的版本中祠肥,XHR對象是通過MSXML庫中的一個ActiveX對象實現(xiàn)的。有的書中細化了IE中此類對象的三種不同版本梯皿,即MSXML2.XMLHttp仇箱、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;個人感覺太麻煩东羹,可以直接使用下面的語句創(chuàng)建: var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

2剂桥、連接和發(fā)送
2.1、open()函數(shù)的三個參數(shù):請求方式百姓、請求地址、是否異步請求(同步請求的情況極少况木,至今還沒用到過)垒拢;
2.2、GET 請求方式是通過URL參數(shù)將數(shù)據(jù)提交到服務(wù)器的火惊,POST則是通過將數(shù)據(jù)作為 send 的參數(shù)提交到服務(wù)器求类;
2.3、POST 請求中屹耐,在發(fā)送數(shù)據(jù)之前尸疆,要設(shè)置表單提交的內(nèi)容類型;
2.4、提交到服務(wù)器的參數(shù)必須經(jīng)過 encodeURIComponent() 方法進行編碼寿弱,實際上在參數(shù)表”key=value”的形式中犯眠,key 和 value 都需要進行編碼,因為會包含特殊字符症革。每次請求的時候都會在參數(shù)列表中拼入一個 “v=xx” 的字符串筐咧,這樣是為了拒絕緩存,每次都直接請求到服務(wù)器上噪矛。
encodeURI() :用于整個 URI 的編碼量蕊,不會對本身屬于 URI 的特殊字符進行編碼,如冒號艇挨、正斜杠残炮、問號和井號;其對應(yīng)的解碼函數(shù) decodeURI()缩滨;encodeURIComponent() :用于對 URI 中的某一部分進行編碼势就,會對它發(fā)現(xiàn)的任何非標準字符進行編碼;其對應(yīng)的解碼函數(shù) decodeURIComponent()楷怒;

3蛋勺、接收
3.1、接收到響應(yīng)后鸠删,響應(yīng)的數(shù)據(jù)會自動填充XHR對象抱完,相關(guān)屬性如下responseText:響應(yīng)返回的主體內(nèi)容,為字符串類型刃泡;responseXML:如果響應(yīng)的內(nèi)容類型是 "text/xml" 或 "application/xml"巧娱,這個屬性中將保存著相應(yīng)的xml 數(shù)據(jù),是 XML 對應(yīng)的 document 類型烘贴;status:響應(yīng)的HTTP狀態(tài)碼禁添;statusText:HTTP狀態(tài)的說明;
3.2桨踪、XHR對象的readyState屬性表示請求/響應(yīng)過程的當前活動階段老翘,這個屬性的值如下0-未初始化,尚未調(diào)用open()方法锻离;1-啟動铺峭,調(diào)用了open()方法,未調(diào)用send()方法汽纠;2-發(fā)送卫键,已經(jīng)調(diào)用了send()方法,未接收到響應(yīng)虱朵;3-接收莉炉,已經(jīng)接收到部分響應(yīng)數(shù)據(jù)钓账;4-完成,已經(jīng)接收到全部響應(yīng)數(shù)據(jù)絮宁;
只要 readyState 的值變化梆暮,就會調(diào)用 readystatechange 事件,(其實為了邏輯上通順羞福,可以把readystatechange放到send之后惕蹄,因為send時請求服務(wù)器,會進行網(wǎng)絡(luò)通信治专,需要時間卖陵,在send之后指定readystatechange事件處理程序也是可以的,我一般都是這樣用张峰,但為了規(guī)范和跨瀏覽器兼容性泪蔫,還是在open之前進行指定吧)。
3.3喘批、在readystatechange事件中撩荣,先判斷響應(yīng)是否接收完成,然后判斷服務(wù)器是否成功處理請求饶深,xhr.status 是狀態(tài)碼餐曹,狀態(tài)碼以2開頭的都是成功,304表示從緩存中獲取敌厘,上面的代碼在每次請求的時候都加入了隨機數(shù)台猴,所以不會從緩存中取值,故該狀態(tài)不需判斷俱两。
4饱狂、ajax請求是不能跨域的!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宪彩,一起剝皮案震驚了整個濱河市休讳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌尿孔,老刑警劉巖俊柔,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異活合,居然都是意外死亡雏婶,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進店門芜辕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尚骄,“玉大人块差,你說我怎么就攤上這事侵续【笳桑” “怎么了?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵状蜗,是天一觀的道長需五。 經(jīng)常有香客問我,道長轧坎,這世上最難降的妖魔是什么宏邮? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮缸血,結(jié)果婚禮上蜜氨,老公的妹妹穿的比我還像新娘。我一直安慰自己捎泻,他們只是感情好飒炎,可當我...
    茶點故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著笆豁,像睡著了一般郎汪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上闯狱,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天煞赢,我揣著相機與錄音,去河邊找鬼哄孤。 笑死照筑,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的录豺。 我是一名探鬼主播朦肘,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼双饥!你這毒婦竟也來了媒抠?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤咏花,失蹤者是張志新(化名)和其女友劉穎趴生,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昏翰,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡苍匆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了棚菊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浸踩。...
    茶點故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖统求,靈堂內(nèi)的尸體忽然破棺而出检碗,到底是詐尸還是另有隱情据块,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布折剃,位于F島的核電站另假,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏怕犁。R本人自食惡果不足惜边篮,卻給世界環(huán)境...
    茶點故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奏甫。 院中可真熱鬧戈轿,春花似錦、人聲如沸阵子。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽款筑。三九已至智蝠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奈梳,已是汗流浹背杈湾。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留攘须,地道東北人漆撞。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像于宙,于是被迫代替她去往敵國和親浮驳。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容