xhr

XMLHttpRequest對象(簡稱XHR)是ajax技術的核心潦嘶,ajax可以無刷新更新頁面得益于xhr捉撮。
一、創(chuàng)建

var xhr = new XMLHttpRequest();

二治笨、發(fā)送請求
open()

xhr.open("get","example.php", false);

1.第一個參數(shù)指定請求方式
2.第二個參數(shù)url
3.第三個參數(shù)表示是否同步峦耘,默認為true(異步)
4.如果請求一個受密碼保護的URL剔蹋,把用于認證的用戶名和密碼作為第4和第5個參數(shù)傳遞給open()方法

send()
如果是GET方法,send()方法無參數(shù)贡歧,或參數(shù)為null滩租;如果是POST方法,send()方法的參數(shù)為要發(fā)送的數(shù)據(jù)
調(diào)用send()方法后利朵,請求被分派到服務器

xhr.open("get", "example.txt", false);
xhr.send(null);

三律想、接收響應

responseText: 作為響應主體被返回的文本(文本形式)
responseXML: 如果響應的內(nèi)容類型是'text/xml'或'application/xml',這個屬性中將保存著響應數(shù)據(jù)的XML DOM文檔(document形式)
status: HTTP狀態(tài)碼(數(shù)字形式)
statusText: HTTP狀態(tài)說明(文本形式)

四绍弟、同步
如果接受的是同步響應技即,則需要將open()方法的第三個參數(shù)設置為false,那么send()方法將阻塞直到請求完成樟遣。一旦send()返回而叼,僅需要檢查XHR對象的status和responseText屬性即可。
同步請求是吸引人的豹悬,但應該避免使用它們葵陵。客戶端javascript是單線程的瞻佛,當send()方法阻塞時脱篙,它通常會導致整個瀏覽器UI凍結。如果連接的服務器響應慢伤柄,那么用戶的瀏覽器將凍結绊困。

五、異步
如果需要接收的是異步響應适刀,這就需要檢測XHR對象的readyState屬性秤朗,該屬性表示請求/響應過程的當前活動階段。

0(UNSENT):未初始化笔喉。尚未調(diào)用open()方法
1(OPENED):啟動取视。已經(jīng)調(diào)用open()方法硝皂,但尚未調(diào)用send()方法
2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法贫途,且接收到頭信息
3(LOADING):接收吧彪。已經(jīng)接收到部分響應主體信息
4(DONE):完成。已經(jīng)接收到全部響應數(shù)據(jù)丢早,而且已經(jīng)可以在客戶端使用了

理論上,只要readyState屬性值由一個值變成另一個值秧倾,都會觸發(fā)一次readystatechange事件严蓖〔园可以利用這個事件來檢測每次狀態(tài)變化后readyState的值。

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//異步接受響應
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            //實際操作
            result.innerHTML += xhr.responseText;
        }
    }
}
//發(fā)送請求
xhr.open('get','message.xml',true);
xhr.send();
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市惭适,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌理张,老刑警劉巖系瓢,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異揖闸,居然都是意外死亡揍堕,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進店門汤纸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來衩茸,“玉大人,你說我怎么就攤上這事贮泞±愦龋” “怎么了?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵啃擦,是天一觀的道長囊蓝。 經(jīng)常有香客問我,道長令蛉,這世上最難降的妖魔是什么聚霜? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮言询,結果婚禮上俯萎,老公的妹妹穿的比我還像新娘。我一直安慰自己运杭,他們只是感情好夫啊,可當我...
    茶點故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辆憔,像睡著了一般撇眯。 火紅的嫁衣襯著肌膚如雪报嵌。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天熊榛,我揣著相機與錄音锚国,去河邊找鬼。 笑死玄坦,一個胖子當著我的面吹牛血筑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播煎楣,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼豺总,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了择懂?” 一聲冷哼從身側響起喻喳,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎困曙,沒想到半個月后表伦,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡慷丽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年蹦哼,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盈魁。...
    茶點故事閱讀 40,438評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡翔怎,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出杨耙,到底是詐尸還是另有隱情赤套,我是刑警寧澤,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布珊膜,位于F島的核電站容握,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏车柠。R本人自食惡果不足惜剔氏,卻給世界環(huán)境...
    茶點故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望竹祷。 院中可真熱鬧谈跛,春花似錦、人聲如沸塑陵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽令花。三九已至阻桅,卻和暖如春凉倚,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背嫂沉。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工稽寒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人趟章。 一個月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓杏糙,卻偏偏與公主長得像,于是被迫代替她去往敵國和親尤揣。 傳聞我的和親對象是個殘疾皇子搔啊,可洞房花燭夜當晚...
    茶點故事閱讀 45,446評論 2 359

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

  • 摘自《JavaScript高級程序設計》 一、簡述 Ajax是Asynchronous Javascript + ...
    寧小姐的慢時光閱讀 10,903評論 0 8
  • 看到標題時漫蛔,有些同學可能會想:“我已經(jīng)用xhr成功地發(fā)過很多個Ajax請求了嗜愈,對它的基本操作已經(jīng)算挺熟練了∶Ч辏” 我...
    前端渣渣閱讀 5,765評論 1 12
  • 在使用XHR對象時蠕嫁,要調(diào)用的第一個方法時open(),它接受三個參數(shù):要發(fā)送的請求的類型("get","post"...
    章柏華閱讀 1,323評論 0 0
  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,212評論 0 7
  • 本文詳細介紹了 XMLHttpRequest 相關知識,涉及內(nèi)容: AJAX毯盈、XMLHTTP剃毒、XMLHttpReq...
    semlinker閱讀 13,669評論 2 18