程式師世界 >> 編程語言 >> C語言 >> C++ >> C++入門知識 >> Ajax系列之二：核心對象XMLHttpRquest

Ajax系列之二：核心對象XMLHttpRquest

編輯：C++入門知識

上一篇文章介紹了ajax的基礎知識，這篇文章通過一個簡單的用戶驗證的小例子來給大家講解一下！

首先來了解一個這個對象: XMLHttpRequest對象可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。當頁面全部加載完畢後，客戶端通過該對象向服務器請求數據，服務器端接受數據並處理後，向客戶端反饋數據。 XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步返回 Web 服務器的響應，並且能以文本或者一個 DOM 文檔形式返回內容。盡管名為 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。

XMLHttpRequest得到了所有現代浏覽器較好的支持。唯一的浏覽器依賴性涉及 XMLHttpRequest 對象的創建。在 IE 5 和 IE 6 中，必須使用特定於 IE 的 ActiveXObject() 構造函數。

下邊來看一下這個小例子：

前台代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="verifyUserName.aspx.cs" Inherits="VerifyUserName.verifyUserName" %>





    
    
    <script src="../common.js"></script>
    <script type="text/javascript">
        var xmlhttp;
        function submit() {
            //獲取要驗證的��
            var username = document.getElementById("username").value;
            if (username == "" || username == null) {
                console.info(username);
                alert("請輸入要進行驗證的數據！");
                return;
            }
            var xmlhttp;
            if (window.XMLHttpRequest) {

                //創建一個XMLHttpRequest對象的實��
                xmlhttp = new XMLHttpRequest();    //適用於ie7, ie8 ,firefox 浏覽��
                //針對某些特定版本的mozillar浏覽器的BUG進行修正
                if (xmlhttp.overrideMimeType) {
                    xmlhttp.overrideMimeType("text/xml");
                }
                //所有的浏覽器這個驗證都能通過�� 放在下邊為了提高性能
            } else if (window.ActiveXObject) {
                //ie5,ie6，ie7, ie8 ,firefox 浏覽�� 等等
                var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var i = 0; i < activexName.length; i++) {
                    try {
                        xmlhttp = new ActiveXObject(activexName[i]);
                        break;
                    } catch (e) {
                    }
                }
            }
            //如果創建不成功，則說明該浏覽器不支持xmlHttpRequest
            if (xmlhttp == undefined || xmlhttp == null) {
                alert("該浏覽器不支持xmlHttpRequest");
                return;
            }
            //注冊該對象的回調函數（後台返回來的數據！��   注意：只需要函數名，不要加括號
            xmlhttp.onreadystatechange = callback;

            ////GET方式 
            //xmlhttp.open("GET", "yz.ashx=" + username, true);
            ////發送數��
            //xmlhttp.send(null);

            // 設置和服務器端交互的相應參數

            xmlhttp.open("POST", "yz.ashx", true);

            //表示客戶端提交給服務器文本內容的編碼方式 是URL編碼，即除了標准字符外，每字節以雙字節16進制前加個��%”表��,
            //當然還有其他編碼方式,如：CONTENT-TYPE:multipart/form-data .
            xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //post方式進行提交數據��
            xmlhttp.send("username=" + username);

            //回調函數, 數據返回後在這個函數中進行處理��
            function callback() {
                //判斷對象的狀態是交互完成 ,判斷http的交互是否成��
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    //接受服務器返回的數據
                    var message = xmlhttp.responseText;
                    var div = document.getElementById("message");
                    div.innerHTML = message;
                    alert(message);
                }
            };
        }
    </script>

後台代碼��

public class yz : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "charset=gb2312";   //指定編碼格式
			
			//獲取參數��
            string oldString = context.Request.Params["username"].ToString();
            //string oldString = context.Request.QueryString["username"].ToString();

            if (oldString=="")
            {
                context.Response.Write("用戶名不允許為空��");
                return;
            }
            if (oldString == "張宏��")
            {
                context.Response.Write("用戶名已經存��");

            }
            else
            {
                context.Response.Write("用戶名不存在可以使用");
            }
           
        }

驗證結果如圖��

通過上邊這個例子可以看出xmlHttpRequest的使用是按照步驟來的��

使用該對象的5步：

1.創建該對��

2. 注冊回調方法

3.設置和服務器端交互的相應參數用open方法

4.設置服務器端發送數據，啟動和服務器端交�� send 發��

5.判斷服務器端的交互是否完成，服務器端是否正確放回了數��

是不是對XmlHttpRequest對象的用法掌握了一些。但是如果我們想更加透徹的了解這個對象，那還要了解這個對象的其他屬性及方法��

屬性：

readyState

HTTP 請求的狀��.當一�� XMLHttpRequest初次創建時，這個屬性的值�� 0開始，直到接收到完整�� HTTP響應，這��值增加�� 4��5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義��

狀��

名稱

描述

Uninitialized

初始化狀態。XMLHttpRequest對象已創建或已被 abort()方法重置��

Open

open() 方法已調用，但是 send()方法未調用。請求還沒有被發送��

Send

Send() 方法已調用，HTTP請求已發送到 Web 服務器。未接收到響應��

Receiving

所有響應頭部都已經接收到。響應體開始接收但未完成��

Loaded

HTTP 響應已經完全接收��

readyState��值不會遞減，除非當一個請求在處理過程中的時候調用了 abort()�� open()方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange事件句柄��

responseText

目前為止從服務器接收到的響應體（不包括頭部），或者如果還沒有接收到數據的話，就是空字符串��

如果 readyState小於 3，這個屬性就是一個空字符串。當 readyState�� 3，這個屬性返回目前已經接收的響應部分。如�� readyState�� 4，這個屬性保存了完整的響應體��

如果響應包含了為響應體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8��

responseXML

對請求的響應，解析為 XML並作�� Document對象返回。如果響應體不是“text/xml”返回null��

status

由服務器返回�� HTTP 狀態代碼，�� 200 表示成功，�� 404表示 "NotFound"錯誤。當 readyState小於 3 的時候讀取這一屬性會導致一個異常��

statusText

這個屬性用名稱而不是數字指定了請求�� HTTP的狀態代碼。也就是說，當狀態為 200 的時候它�� "OK"，當狀態為 404的時候它�� "NotFound"。和 status屬性一樣，�� readyState小於 3 的時候讀取這一屬性會導致一個異常��

方法��

abort()

取消當前響應，關閉連接並且結束任何未決的網絡活動。這個方法把 XMLHttpRequest對象重置�� readyState�� 0的狀態，並且取消所有未決的網絡活動。例如，如果請求用了太長時間，而且響應不再必要的時候，可以調用這個方法��

getAllResponseHeaders()

�� HTTP響應頭部作為未解析的字符串返回。如�� readyState小於 3，這個方法返�� null。否則，它返回服務器發送的所�� HTTP 響應的頭部。頭部作為單個的字符串返回，一行一個頭部。每行用換行�� ""隔開��

getResponseHeader()

返回指定�� HTTP響應頭部��值。其參數是要返回�� HTTP響應頭部的名稱。可以使用任何大小寫來制定這個頭部名字，和響應頭部的比較是不區分大小寫的。該方法的返��值是指定的 HTTP響應頭部��值，如果沒有接收到這個頭部或�� readyState小於 3則為空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來並返回，使用逗號和空格分隔開各個頭部的值��

open()

初始�� HTTP請求參數，例�� URL�� HTTP 方法，但是並不發送請求��

send()

發�� HTTP請求，使用傳遞給 open()方法的參數，以及傳遞給該方法的可選請求體��

setRequestHeader()

向一個打開但未發送的請求設置或添加一�� HTTP請求��

通過上邊的講解，你是不是已經可以自己使用xmlHttpRequest對象進行交互了呢？趕快去體驗異步交互給你帶來的極致享受吧��