上一篇文章介绍了ajax的基础知识，这篇文章通过一个简单的用户验证的小样例来给大家解说一下！
首先来了解一个这个对象: XMLHttpRequest对象能够在不向server提交整个页面的情况下，实现局部更新网页。当页面全部载入完毕后，client通过该对象向server请求数据，server端接受数据并处理后。向client反馈数据。
XMLHttpRequest 对象提供了对 HTTP 协议的全然的訪问。包含做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 能够同步或异步返回 Web server的响应，而且能以文本或者一个 DOM 文档形式返回内容。虽然名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它能够接收不论什么形式的文本文档。
XMLHttpRequest得到了全部现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。
在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。
下边来看一下这个小样例：
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="verifyUserName.aspx.cs" Inherits="VerifyUserName.verifyUserName" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<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);
// 设置和server端交互的对应參数
xmlhttp.open("POST", "yz.ashx", true);
//表示client提交给server文本内容的编码方式 是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) {
//接受server返回的数据
var message = xmlhttp.responseText;
var div = document.getElementById("message");
div.innerHTML = message;
alert(message);
}
};
}
</script>
</head>
<body>
<div>
<input id="username" type="text" />
<input type="button" id="submit" onclick="submit()" value="Ajax验证" />
<div id="message">
</div>
</div>
</body>
</html>
后台代码：
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.设置和server端交互的对应參数 用open方法
4.设置server端发送数据。 启动和server端交互 send 发送
5.推断server端的交互是否完毕。 server端是否正确放回了数据
是不是对XmlHttpRequest对象的使用方法掌握了一些。可是假设我们想更加透彻的了解这个对象，那还要了解这个对象的其它属性及方法。
属性：
readyState
HTTP 请求的状态.当一个 XMLHttpRequest初次创建时。这个属性的值从 0開始。直到接收到完整的 HTTP响应。这个值添加到 4。5 个状态中每个都有一个相关联的非正式的名称。下表列出了状态、名称和含义：
|
状态 |
名称 |
描写叙述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest对象已创建或已被 abort()方法重置。 |
|
1 |
Open |
open() 方法已调用。可是 send()方法未调用。请求还没有被发送。 |
|
2 |
Send |
Send() 方法已调用。HTTP请求已发送到 Web server。未接收到响应。 |
|
3 |
Receiving |
全部响应头部都已经接收到。 响应体開始接收但未完毕。 |
|
4 |
Loaded |
HTTP 响应已经全然接收。 |
readyState的值不会递减。除非当一个请求在处理过程中的时候调用了 abort()或 open()方法。
每次这个属性的值添加的时候，都会触发 onreadystatechange事件句柄。
responseText
眼下为止从server接收到的响应体（不包含头部），或者假设还没有接收到数据的话，就是空字符串。
假设 readyState小于 3，这个属性就是一个空字符串。当 readyState为 3。这个属性返回眼下已经接收的响应部分。假设 readyState为 4，这个属性保存了完整的响应体。
假设响应包含了为响应体指定字符编码的头部，就使用该编码。
否则。假定使用 Unicode UTF-8。
responseXML
对请求的响应。解析为 XML并作为 Document对象返回。假设响应体不是“text/xml”返回null。
status
由server返回的 HTTP 状态代码，如 200 表示成功，而 404表示 "NotFound"错误。当 readyState小于 3 的时候读取这一属性会导致一个异常。
statusText
这个属性用名称而不是数字指定了请求的 HTTP的状态代码。也就是说，当状态为 200 的时候它是 "OK"。当状态为 404的时候它是 "NotFound"。和 status属性一样，当 readyState小于 3 的时候读取这一属性会导致一个异常。
方法：
abort()
取消当前响应，关闭连接而且结束不论什么未决的网络活动。这种方法把 XMLHttpRequest对象重置为 readyState为 0的状态，而且取消全部未决的网络活动。比如，假设请求用了太长时间，而且响应不再必要的时候。能够调用这种方法。
getAllResponseHeaders()
把 HTTP响应头部作为未解析的字符串返回。假设 readyState小于 3，这种方法返回 null。否则。它返回server发送的全部 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。
每行用换行符 ""隔开。
getResponseHeader()
返回指定的 HTTP响应头部的值。其參数是要返回的 HTTP响应头部的名称。
能够使用不论什么大写和小写来制定这个头部名字。和响应头部的比較是不区分大写和小写的。
该方法的返回值是指定的 HTTP响应头部的值。假设没有接收到这个头部或者 readyState小于 3则为空字符串。假设接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
open()
初始化 HTTP请求參数。比如 URL和 HTTP 方法。可是并不发送请求。
send()
发送 HTTP请求，使用传递给 open()方法的參数。以及传递给该方法的可选请求体。
setRequestHeader()
向一个打开但未发送的请求设置或加入一个 HTTP请求。
通过上边的解说，你是不是已经能够自己使用xmlHttpRequest对象进行交互了呢？赶快去体验异步交互给你带来的极致享受吧。