ajax——XMLHttpRequest

    XMLHttpRequest對象。可以讓ajax程序在不又一次載入的頁面的狀況下更新頁面數據,頁面載入完畢後從server接受發生數據。這樣既減輕了server負擔又回顧了響應速度,縮短了用戶的等待時間,讓web程序更相似於傳統的桌面應用。javascript

XMLHttpRequest對象4步用法:
java

1.創建XMLHttpRequest對象。web

    創建XMLHttpRequest對象時,要依據瀏覽器的不一樣版本號去創建,因爲IE5.0和iE6.0,開發者就可以在WEB頁面內部使用XMLHTTP ActiveX組件擴展自身的功能;而從IE7版本號以上以及其它廠商的瀏覽器,開始建立繼承XML的代理類XMLHttpRequest。因此建立上會有不一樣。ajax

         var xmlhttp;//定義全局變量   
<span style="white-space:pre">	</span>//1.建立xmlhttprequest對象
            if (window.XMLHttpRequest) {
                //firefox等其它瀏覽器、ie七、8及以上版本號適用
                    xmlhttp = new XMLHttpRequest();
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType("text/xml");
                } else if (window.ActiveXObject) {
                    //ie五、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交互的信息,並設置發送的數據,app

open方法中的也有get和post的提交方式。post的方式時。要設置它的頭文件,並且需要發送時需要將參數寫的send中dom

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

username=" + userName, true); ////設置server端發送的數據。異步

啓動和server的交互 xmlhttp.send(null);ide


                //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響應信息和數據。

相關文章
相關標籤/搜索