程式師世界 >> 編程語言 >> 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對象進行交互了呢？趕快去體驗異步交互給你帶來的極致享受吧。