ajax——XMLHttpRequest

來源:互聯網
上載者:User

標籤:element   callback   urlencode   firefox   white   而且   return   null   ons   

    XMLHttpRequest對象。能夠讓ajax程式在不又一次載入的頁面的情況下更新頁面資料,頁面載入完畢後從server接受發生資料。這樣既減輕了server負擔又回顧了響應速度,縮短了使用者的等待時間,讓web程式更類似於傳統的案頭應用。

XMLHttpRequest對象4步用法:

1.建立XMLHttpRequest對象。

    建立XMLHttpRequest對象時。要依據瀏覽器的不同版本號碼去建立,由於IE5.0和iE6.0,開發人員就能夠在WEB頁面內部使用XMLHTTP ActiveX組件擴充自身的功能;而從IE7版本號碼以上以及其它廠商的瀏覽器,開始建立繼承XML的代理類XMLHttpRequest,所以建立上會有不同。

         var xmlhttp;//定義全域變數   
<span style="white-space:pre"></span>//1.建立xmlhttprequest對象            if (window.XMLHttpRequest) {                //firefox等其它瀏覽器、ie7、8及以上版本號碼適用                    xmlhttp = new XMLHttpRequest();                if (xmlhttp.overrideMimeType) {                    xmlhttp.overrideMimeType("text/xml");                } else if (window.ActiveXObject) {                    //ie5、6版本號碼版本號碼適用                    var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];                    for (var i = 0; i < activexName.length; i++) {                        try {                                xmlhttp = new ActiveXObject(activexName[i]);                            break;                        } catch (e) {                        }                    }                }                if (xmlhttp==undefined || xmlhttp==null) {                    alert("當前瀏覽器不支援建立xmlhttprequest對象");                    return;                }

2.注冊回呼函數

                //2.注冊一個回調方法                xmlhttp.onreadystatechange = callback;

3.使用open方法設定和server互動的資訊,並設定發送的資料。

open方法中的也有get和post的提交方式。

post的方式時。要設定它的標頭檔。而且須要發送時須要將參數寫的send中

                //GET方式互動                //3.設定和server互動的對應參數                xmlhttp.open("GET", "HtmlPage1.ashx?

username=" + userName, true); ////設定server端發送的資料。啟動和server的互動 xmlhttp.send(null);


                //POST方式互動                //3.利用open,設定和server互動的對應參數                xmlhttp.open("POST", "HtmlPage1.ashx", true);                xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              //POST方式所須要添加的代碼,標頭檔                //設定server端發送的資料。啟動和server的互動。以及傳遞參數                xmlhttp.send("username=" + userName);

4.在回呼函數中推斷互動是否完畢,響應是否正確,並依據須要擷取server端返回的資料,更新頁面內容。

                //回呼函數                function callback()                {                    //5.推斷和server器的互動是否完畢,server端是否正確返回了資料                    if (xmlhttp.readyState == 4) {//表示server端的互動已經完畢                        if (xmlhttp.status == 200) {//表示正確的返回了資料                            //純文字的方法接受方法                            var message = xmlhttp.responseText;                            //xml資料相應的dom對象的接受方法                            //使用的前提是,server端須要設定                            //記憶向div標籤中加入常值內容                            var div1 = document.getElementById("message");                            div1.innerHTML = message;                        }                    }                }

XMLHttpRequest的具體屬性和方法:

open() 指定server端互動的http方法(post or get)、url地址、是否非同步等資訊
send() 向server發出請求。假設採用非同步。該方法馬上返回。其內容能夠是null。dom對象。輸入資料流。字串
setRequestjeader() 設定http的標頭檔,在open方法以後調用。

getallResponseHeaders() 包括http的全部對應標頭檔資訊。
getResponseHeader() 返回http相應標頭檔裡指定的鍵名header相應值。
abort() 停止當前http請求,相應的xmlhttprequest對象複位到未初始化的狀態
readyState 非同步作業的狀態:未初始化(0),正在載入(1)。已載入(2)。互動(3)。已完畢(4)
onreadystatechange() 請求狀態改變的事件觸發程序。

(可注冊函數)

responseText server響應的常值內容。
responseXML server響應的XML內容相應的DOM對象
status server返回的HTTP狀態代碼。200成功。
statusText server返回狀態代碼的文本資訊

總結:

    在Ajax應用程式中,XMLHttpRequest對象負責將使用者資訊以非同步通訊地發送到server端。並接收server響應資訊和資料。




ajax——XMLHttpRequest

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.