如何用原始的Ajax技術載入文檔?

2016-07-11 1606 2 編輯:Monster 來源:Ajax書籍

Ajax技術的核心是XMLHttpRequest對象,任何Ajax技術的實現都離不開它。XMLHttpRequest對象是瀏覽器對象模型BOM中window對象的一個子對象(注:IE6不支持,但它可以用其他方式實現)。

該對象主要功能是向服務器異步發送HTTP請求,并能接收HTTP響應的數據(即載入文檔)。本節只學習如何使用該對象載入文檔到頁面中。

XMLHttpRequest對象可以在不重新加載頁面的情況下更新頁面的局部,也就是在頁面加載后仍然能向服務器請求數據,并接收服務器端返回的數據,XMLHttpRequest對象本質上是具備XML發送/接收能力的HttpRequest對象。

XMLHttpRequest對象載入文檔的過程和用戶使用自動售水機的過程非常相似(如果把用戶想象成瀏覽器,自動售水機想象成服務器的話)。①用戶首先需要投幣給自動售水機,這就相當于用該對象的send()方法發送異步請求給服務器;②然后用戶需要監視售水機是否出水,這就相當于用該對象的。nreadystatechange事件監聽服務器是否返回了HTTP響應;③自動售水機出水了,相當于XMLHttpRequest對象通過responseText屬性將數據返回給瀏覽器;④用一個容器去接售水機出來的水,相當于把responseTex,的屬性值賦給一個DOM對象的innerHTML屬性,這樣這個DOM對象就接住了XMLHttpRequest對象返回的內容。

下面具體來看XMLHttpRequest對象異步獲取服務器數據的全過程。

(1)在使用XMLHttpRequest對象前,必須先創建該對象的實例。代碼如下:

var xmlHttPReg;

if(window.ActiveXObject){      //針對IE6

    xmlHttpReq=new ActiveXobject('"Microsoft.XMLHTTP");}

else if (window.XMLHttpRequest){   //針對除IE6以外的瀏覽器

    xm1HttpReq=new XMLHttpRequest();//實例化一個XMLHttpRequest}

這樣就創建了一個XMLHttpRequest對象的實例xmlHttpReq。由于IE6瀏覽器是以ActiveXObject的方式引入XMLHttpRequest對象的,而在其他瀏覽器(如IE7十、Firefox.Safari)中XMLHttpRequest對象是window對象的子對象。為了兼容這兩類瀏覽器,必須用上述代碼中的兩種方式創建該對象的實例。 

(2)然后使用XMLHttpRequest對象的實例的open()方法指定載入文檔的HTTP請求類型、文件名以及是否為異步方式。代碼如下:

xmlHttpReq.open("GET", "9-2.htm1", True);    //調用open()方法并采用異步方式載入文檔

其中,open()方法可以有3個參數:第一個參數表示HTTP請求的類型(GET或POST);第二個參數表示請求文件的URL地址;第三個參數表示請求是否以異步方式發送(默認值為true,表示是異步方式)。

提示:XMLHttpRequest對象出于安全性考慮,規定open()方法中的URL地址必須是相對URL地址,而不能是絕對URL,這使得Ajax發送異步請求無法實現跨域(Cross-Origin,即跨網站的意思)請求。要實現跨域請求,必須使用JSONP(JSON with Padding)技術。

(3)使用send()方法將open()方法指定的請求發送出去,該方法只有一個參數,但該參數可以為空或null,建議null一定要寫,否則程序只能在IE中運行,在Firefox中無法運行。代碼如下:xmlHttpReq.send(null);

(4)使用send()方法發送了一個載入文檔的請求后,還要準備接收服務器端返回的內容。但是客戶端無法確定服務器端什么時候會完成這個請求。這時需要使用事件監聽機制來捕獲請求的狀態,XMLHttpRequest對象提供了onreadystatechange事件實現這一功能。

onreadystatechange事件可指定一個事件處理函數來處理XMLHttpRequest對象的執行結果。

說明:

①onreadystatechange屬性中的事件處理函數只有在readyState屬性發生改變時才會觸發,readyState的值表示服務器對當前請求的處理狀態,在事件處理函數中可以根據這個值來進行不同的處理。readyState有5種可取值(0表示尚未初始化;1表示正在加載;2表示加載完畢;3表示正在處理;4表示處理完畢)。一旦readyState屬性的值變成了4,就表明服務器已經處理完畢。

status屬性表明請求是否已經成功,如果status屬性值為200表明一切正常,服務器已成功接收了客戶端的請求,如果為其他值則表明有錯誤發生(如404表示資源未找到)。

因此,readyState屬性的值變成了4并且status屬性的值為200就表明服務器已經處理完畢并且沒有發生錯誤,這時客戶端就可以訪問從服務器返回的響應數據了。

②服務器在收到客戶端的請求后,根據請求返回相應的內容。返回的內容可以有兩種形式:一種是文本形式,將存儲在responseText中;另一種是XML格式,存儲在responseXML中。responseText和responseXML都是只讀屬性,只有當readyStat。屬性值為4時,才能通過responseText獲取完整的響應信息。如果設置服務器端響應內容類型為”text/xml",responseXML才會有值并被解析成一個XML文檔。

③由于上述程序是向服務器請求載入文檔9-2.html,因此服務器處理請求完畢后,返回的就是9-2.html的全部內容。它以字符串形式保存在responseText屬性中,因此可設置#target元素的innerHTML為xmlHttpReq.responseText,這樣#target元素中就載入了9-2.html中的內容。

將上述代碼合在一起,并在頁面中添加一個按鈕和一個#target元素,設置單擊該按鈕就執行上述代碼,就得到了一個采用Ajax技術載入文檔的完整程序。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾 男的卖什么赚钱 腾讯欢乐捕鱼技巧 516游戏金蟾捕鱼下载 捕鱼来了金币怎么交易 河南斗棋麻将下载 微信赚钱多骗局揭秘 能提现赚钱的棋牌游戏 19年做啥卖买号赚钱 彩35网址 吃鸡平台靠什么赚钱 十二肖生赚钱 有关赚钱难的打油诗 赢彩彩票首页 天龙八部100怎么赚钱 2345星球联盟真能赚钱吗 魔兽世界法师