标签：web开发 ajax asynchronous 高性能 异步
上一篇文章介绍了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" %>
<!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);
// 设置和服务器端交互的相应参数
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>
</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.设置和服务器端交互的相应参数 用open方法
4.设置服务器端发送数据， 启动和服务器端交互 send 发送
5.判断服务器端的交互是否完成， 服务器端是否正确放回了数据
是不是对XmlHttpRequest对象的用法掌握了一些。但是如果我们想更加透彻的了解这个对象，那还要了解这个对象的其他属性及方法。
属性：
readyState
HTTP 请求的状态.当一个 XMLHttpRequest初次创建时，这个属性的值从 0开始，直到接收到完整的 HTTP响应，这个值增加到 4。5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：
|
状态 |
名称 |
描述 |
|
0 |
Uninitialized |
初始化状态。XMLHttpRequest对象已创建或已被 abort()方法重置。 |
|
1 |
Open |
open() 方法已调用，但是 send()方法未调用。请求还没有被发送。 |
|
2 |
Send |
Send() 方法已调用，HTTP请求已发送到 Web 服务器。未接收到响应。 |
|
3 |
Receiving |
所有响应头部都已经接收到。响应体开始接收但未完成。 |
|
4 |
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对象进行交互了呢？赶快去体验异步交互给你带来的极致享受吧。
Ajax系列之二：核心对象XMLHttpRquest,布布扣,bubuko.com
标签：web开发 ajax asynchronous 高性能 异步
原文地址：http://blog.csdn.net/zhanghongjie0302/article/details/31432939
