上一篇文章介绍了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" %>

html>



    
  
    
    <script src="../common.js">
    <script type="text/java script">
        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);
                }
            };
        }
    


    
  

        
   
        
   
        
   
 
   
    
  

后台代码：

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 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

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()