亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 學院 > 開發設計 > 正文

詳解AJAX核心—XMLHttpRequest 對象

2019-11-17 04:17:05
字體:
來源:轉載
供稿:網友

我要說的內容都是非?;A的內容,高手就免看了,如果看了歡迎給點意見啊。新手或者對低層還不是很了解的人可以看看,幫助理解與記憶。

xmlHttPRequest 對象是Ajax功能的核心,要開發AJAX程序必須從了解xmlhttpRequest 對象開始。

了解XMLHttpRequest 對象就先從創建XMLHttpRequest 對象開始,在不同的瀏覽器中創建XMLHttpRequest 對象使用不同的方法:

先看看IE創建XMLHttpRequest 對象的方法(方法1):

var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 創建 IE 兼容的對象(Msxml2.XMLHTTP)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創建 IE 兼容的對象(Microsoft.XMLHTTP)
而 Mozilla、Opera、Safari 和大部分非IE的瀏覽器都使用下面這種方法(方法2)創建XMLHttpRequest 對象:

var xmlhttp = new XMLHttpRequest();
實際上Internet Explorer 使用了一個名為 XMLHttp 的對象,而不是 XMLHttpRequest 對象,而 Mozilla、Opera、Safari 和 大部分非 Microsoft 瀏覽器都使用的是后者(下文統稱 XMLHttpRequest 對象)。IE7開始也開始使用XMLHttpRequest 對象了。

在創建 XMLHttpRequest 對象的時候如果不同的瀏覽器使用了不正確的方法瀏覽器都將會報錯,并且無法使用該對象。所以我們需要一種可以兼容不同瀏覽器的創建XMLHttpRequest 對象的方法:

創建兼容多瀏覽器的 XMLHttpRequest 對象方法
var xmlhttp = false; //創建一個新變量 request 并賦值 false。使用 false 作為判斷條件,它表示還沒有創建 XMLHttpRequest 對象。
function CreateXMLHttp(){
    try{
        xmlhttp = new XMLHttpRequest();  //嘗試創建 XMLHttpRequest 對象,除 IE 外的瀏覽器都支持這個方法。
    }
    catch (e){
        try{
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 創建 IE 兼容的對象(Msxml2.XMLHTTP)
        }
        catch (e){
            try{
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創建 IE 兼容的對象(Microsoft.XMLHTTP)。
            }
            catch (failed){
                  xmlhttp = false;  //如果失敗則保證 request 的值仍然為 false。
            }
        }
    }
    return xmlhttp;
}
判斷是否創建成功就很簡單了

if (!xmlhttp){
 //創建XMLHttpRequest 對象失敗!
}
else{
 //創建成功!
}
創建好了XMLHttpRequest 對象我們再來看看這個對象的方法、屬性以及最重要的onreadystatechange事件句柄吧。

方法:

open() 說明:初始化 HTTP 請求參數,例如 URL 和 HTTP 方法,但是并不發送請求。
abort() 說明:取消當前響應,關閉連接并且結束任何未決的網絡活動。
getAllResponseHeaders() 說明:把 HTTP 響應頭部作為未解析的字符串返回。
getResponseHeader() 說明:返回指定的 HTTP 響應頭部的值。
send() 說明:發送 HTTP 請求,使用傳遞給 open() 方法的參數,以及傳遞給該方法的可選請求體。
setRequestHeader() 說明:向一個打開但未發送的請求設置或添加一個 HTTP 請求。
屬性:

readyState 說明:HTTP 請求的狀態。
responseText 說明:目前為止為服務器接收到的響應體(不包括頭部),或者如果還沒有接收到數據的話,就是空字符串。
responseXML 說明:對請求的響應,解析為 XML 并作為 Document 對象返回。
status 說明:由服務器返回的 HTTP 狀態代碼。
statusText 說明:這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。
onreadystatechange 是每次 readyState 屬性改變的時候調用的事件句柄函數。
下面從發送請求并處理請求結果的過程來理解一下XMLHttpRequest 對象吧。

發送請求之前自然就是生成一個XMLHttpRequest 對象,代碼上面有了就不多寫了。

生成一個XMLHttpRequest 對象

var xmlhttp = CreateXMLHttp();
創建好XMLHttpRequest 對象了,那我們要送請求到哪個網站呢,就選擇博客園首頁的rss吧。那怎么設置我要請求的網站地址呢,使用open()方法。
open(method, url, async, username, passWord)
該方法有5個參數,具體什么意思可以看這里:http://www.49028c.com.cn/xmldom/dom_http.asp
我們用的就是這個了。

xmlHttp.open("get","http://www.49028c.com",true);
get參數表示用get方法,第二個自然就是目標地址,博客園首頁,第三個就是表示是否異步了,我們當然使用true了。具體的參數說明還都可以到http://www.49028c.com.cn上面看了。
好了,目標定好了,怎么發送呢。用send()方法。
send(body),send()方法只有一個參數,表示DOM對象,這個DOM對象需要說明的內容很多,下次說,今天我們只要寫

 

xmlhttp.send(null);
就可以了。好了,發送了,那怎么處理返回的結果呢,這個時候就用到XMLHttpRequest 對象最重要的東西了,那就是onreadystatechange事件句柄。什么意思呢,那就需要說明一下XMLHttpRequest 對象的readyState了,readyState有5種狀態,分別用數字的 0 到 4 來表示。

狀態      名稱            描述
0      Uninitialized       初始化狀態。XMLHttpRequest 對象已創建(未調用open()之前)或已被 abort() 方法重置。
1      Open           open() 方法已調用,但是 send() 方法未調用。請求還沒有被發送。
2      Sent            Send() 方法已調用,HTTP 請求已發送到 Web 服務器。未接收到響應。
3      Receiving      所有響應頭部都已經接收到。響應體開始接收但未完成。
4      Loaded         HTTP 響應已經完全接收。

但是需要注意的是,onreadystatechange事件句柄不同的瀏覽器能處理的狀態并不一致,IE和Firefox能處理1到4,而Safari能處理2到4的狀態,Opera 能處理3、4兩中狀態。0的狀態基本沒什么用,因為創建了XMLHttpRequest 對象后都會馬上調用open() 方法,這時候狀態就變成1了,當然除非你要判斷對象是否已經被 abort() 取消,可是這樣的情況依然很少。大部分情況下判斷是不是4(已經接受完成)這個狀態就夠了。
好了,明白了readyState有5種狀態了,那處理返回結果就是看狀態變更到不同的狀態我們做不同的處理就可以了,怎么告訴XMLHttpRequest 對象狀態變化時讓誰來處理這個變化呢。有兩種寫法,一種是用匿名方法,另一種是指定方法,其實只是不同的寫發,作用都一樣,看下代碼:

xmlhttp.onReadyStateChange = function (){
 //處理狀態變化的代碼
}
//或者
xmlhttp.onReadyStateChange = getResult;
function getResult(){
 ///處理狀態變化的代碼
}
//順便說一下,句柄的名稱比較長,可以這樣記憶 on ReadyState Change 表示在讀取狀態改變時
請求發送了,也指定處理方法了,怎么獲取返回的內容呢,有responseText和responseXML兩個屬性可供使用,responseXML是返回對象,需要再解析,后面再說,這里先用responseText,看看返回什么。

alert(xmlhttp.responseText); //看看是不是返回了首頁的HTML代碼啊。是你就成功了。
整個過程是:創建XMLHttpRequest 對象 -> 指定發送地址及發送方法 -> 發送請求 -> 指定處理方法并處理返回結果。但是需要注意,我們正常的思路理解是這樣的,可是onreadystatechange事件句柄指定處理方法需要在發送之前就指定好,否則無法處理狀態變化事件。

所以我們應該按照下面的流程來記憶:創建XMLHttpRequest 對象 -> 指定發送地址及發送方法 -> 指定狀態變化處理方法 -> 發送請求,請求發送后狀態變化了就會自動調用指定的處理方法。
好了,看看完成的代碼吧。

 

完成的代碼
    var xmlhttp = false; //創建一個新變量 request 并賦值 false。使用 false 作為判斷條件,它表示還沒有創建 XMLHttpRequest 對象。
    function CreateXMLHttp(){
        try{
            xmlhttp = new XMLHttpRequest();  //嘗試創建 XMLHttpRequest 對象,除 IE 外的瀏覽器都支持這個方法。
        }
        catch (e){
            try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  //使用較新版本的 IE 創建 IE 兼容的對象(Msxml2.XMLHTTP)
            }
            catch (e){
                try{
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //使用較老版本的 IE 創建 IE 兼容的對象(Microsoft.XMLHTTP)。
                }
                catch (failed){
                      xmlhttp = false;  //如果失敗則保證 request 的值仍然為 false。
                }
            }
        }
        return xmlhttp;
    }
    xmlhttp = CreateXMLHttp();
    xmlhttp.open("get","http://www.49028c.com",true);
    xmlhttp.onReadyStateChange = getResult;
    xmlhttp.send(null);
    function getResult(){
        if(xmlhttp.readyState == 4){
            alert(xmlhttp.responseText);
        }
    }
看似一切都OK了,可是有沒有想過,如果HTML代碼在網絡傳輸過程中出錯了,或者我們指定的地址失效會怎么樣呢。這個時候就需要用到status屬性,即由服務器返回的 HTTP 狀態代碼。 xmlhttp.status 等于200時表示傳輸過程完整沒有錯誤。具體的HTTP狀態代碼什么意思可以到W3C組織網站上看看,地址http://www.w3.org/Protocols/rfc2616/rfc2616-sec6.html#sec6.1.1
把getResult()方法寫成下面這樣我覺的就真的OK了。

 function getResult(){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
   alert(xmlhttp.responseText);
  }
 }
好了,一個本來挺簡單的東西,被我寫的這么多,好象很羅嗦。不過我覺的編程對基礎內容的理解很重要,現在很多時候開發AJAX的程序都使用很多JS的庫,不需要直接編寫這么基礎的代碼。如使用著名的jQuery,但是如果我們對基礎的東西有很好的理解,那這些庫報告錯誤,或者出現問題我們可以很好很快的知道錯在哪里,更快的做出改變使程序正常運行。


發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
日韩亚洲在线观看| 九九久久综合网站| 亚洲字幕在线观看| 久久久精品影院| 亚洲高清不卡av| 国产一区二区三区精品久久久| 成人写真福利网| 97人人做人人爱| 国产日韩精品在线观看| 国产亚洲激情视频在线| 97人人做人人爱| 久久精品国产欧美激情| 亚洲女人天堂色在线7777| 亚洲女人天堂成人av在线| 一区二区三区四区精品| 亚洲国产精品久久精品怡红院| 国产精品久久久久久久美男| 国产一区视频在线| 国模gogo一区二区大胆私拍| 成人黄色生活片| 欧美激情欧美激情在线五月| 在线播放日韩av| 成人av在线网址| 国产精品国产三级国产aⅴ浪潮| 91精品国产成人www| 亚洲福利视频网| 欧美大肥婆大肥bbbbb| 国产精品久久久久久亚洲调教| 欧美日韩亚洲国产一区| 91av视频在线免费观看| 91精品国产综合久久久久久久久| 欧美日韩国产一区中文午夜| 狠狠躁夜夜躁人人爽天天天天97| yellow中文字幕久久| 亚洲精品国产精品国自产在线| 色与欲影视天天看综合网| 欧美精品videos另类日本| 欧美日韩国产丝袜另类| 热草久综合在线| 久久久天堂国产精品女人| 欧美激情欧美激情在线五月| 中文字幕亚洲欧美一区二区三区| 国产精品jvid在线观看蜜臀| 91精品国产综合久久香蕉的用户体验| 一区二区三区久久精品| 亚洲激情电影中文字幕| 色先锋资源久久综合5566| 国产精品1234| 91性高湖久久久久久久久_久久99| 日韩美女写真福利在线观看| 中文字幕日韩专区| 九九热视频这里只有精品| 久久久久久69| 国产精品久久久精品| 国产精品看片资源| 日韩av三级在线观看| 中文字幕欧美日韩精品| 国产91精品黑色丝袜高跟鞋| 欧美激情精品在线| 亚洲美女激情视频| 欧美日韩中文字幕在线视频| 久久福利视频导航| 国产日韩欧美综合| 欧美日韩国产精品一区二区不卡中文| 亚洲一区美女视频在线观看免费| 91久久久久久| 日本精品中文字幕| 国产精品久久久久久久久久久不卡| 欧亚精品在线观看| 亚洲xxxxx电影| 国内偷自视频区视频综合| 韩日欧美一区二区| 国产成人亚洲综合| 一本大道香蕉久在线播放29| 亚洲精品自产拍| 亚洲人成电影网站色xx| 久久国内精品一国内精品| 亚洲免费中文字幕| 国产精品女主播视频| 97国产精品免费视频| 国产一区二区视频在线观看| 成人h猎奇视频网站| 中文在线资源观看视频网站免费不卡| 亚洲一区美女视频在线观看免费| 日韩有码视频在线| 成人在线激情视频| 日本老师69xxx| 亚洲二区在线播放视频| 97在线视频免费观看| 亚洲色图欧美制服丝袜另类第一页| 欧美猛少妇色xxxxx| 欧美日韩午夜视频在线观看| 97avcom| 成人在线国产精品| 一区二区三区在线播放欧美| 最近2019中文字幕在线高清| 久久免费视频在线观看| 一区二区三区四区精品| 欧美激情综合色综合啪啪五月| 亚洲第一男人天堂| 久久777国产线看观看精品| 久久久久久久久久国产精品| 欧美精品成人91久久久久久久| 亚洲国产精品va在线看黑人动漫| 欧美日韩精品国产| 国产精品27p| 国产精品午夜国产小视频| 亚洲国产高清高潮精品美女| 国产精品久久在线观看| 日韩网站免费观看高清| 欧美成人午夜视频| 亚洲淫片在线视频| 欧美激情中文字幕在线| 欧亚精品中文字幕| 欧美日韩激情美女| 欧美日韩国产中文精品字幕自在自线| 欧美精品一区二区免费| 高清一区二区三区日本久| 一区二区欧美在线| 综合网中文字幕| 日韩精品电影网| 国内久久久精品| 欧美激情精品久久久久久大尺度| 欧美洲成人男女午夜视频| 国产日产久久高清欧美一区| 欧美性猛交视频| 欧美风情在线观看| 欧美激情视频一区| 日韩欧美黄色动漫| 欧美亚洲激情在线| 国产在线精品自拍| 成人性生交大片免费看视频直播| 欧美电影在线观看高清| 日韩有码在线播放| 国产精品成熟老女人| 国产精品久久av| 久久天天躁狠狠躁老女人| 日日骚久久av| 久久婷婷国产麻豆91天堂| 日韩精品高清在线观看| 日本sm极度另类视频| 久久国产精品视频| 国产精品91一区| 久久夜色精品国产欧美乱| 91高潮在线观看| 精品国产依人香蕉在线精品| 精品久久香蕉国产线看观看gif| 欧美激情va永久在线播放| 26uuu久久噜噜噜噜| 日韩中文字幕在线播放| 欧美刺激性大交免费视频| 国产精品一二三视频| 亚洲男人天堂网站| 91国语精品自产拍在线观看性色| 亚洲欧美三级在线| 久久国产精品久久国产精品| 夜夜狂射影院欧美极品| 日韩欧美精品网站| 色综合色综合久久综合频道88| 亚洲欧美综合区自拍另类| 日本韩国欧美精品大片卡二| 欧美福利视频在线观看| 91青草视频久久| 亚洲精品久久久久久久久久久久久|