对 于Ajax技术的基础和核心，XMLHttpRequest对象应该是我们必须要了解的一个对象，Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式实现了XMLHttpRequest对象。虽然大家对 它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，在实际脚本编写方法上区别不大，并且实现得到的效果也基本相同，目前W3C正致力于 将XMLHttpRequest对象制定一个统一的标准使各个浏览器厂商遵照执行，以利于Ajax技术的推广与发展。
XMLHttpRequest提供了一个相对精简易用的API，下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。
1．readyState属性
当一个XMLHttpRequest对象被创建后，此属性标识了此对象正处于什么状态，我们可以通过对此属性的访问，来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义如下：
0：未初始化状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化此对象的属性
1：准备发送状态；此时，已经调用了XMLHttpRequest对象的Open()方法，并且已经准备好将一个XMLHttpRequest请求发送到服务端
2：已发送状态；此时，已经调用了XMLHttpRequest对象的Send()方法，但是并没有收到任何响应
3：正在接收状态；此时，已经开始接收HttpResponse响应信息但是还没有完成接收
4：完成响应状态；此时，已经完成了HttpResponse响应的接收
2．responseText属性
此属性描述的是一个HttpResponse中的全部文本内容，通过访问它，可以得到一次XMLHttpRequest得到响应回传的全部文本内容。只有当ReadyState的值为3或4时此属性才会有部分或者全部值，否则此属性只会是空字串。
3．responseXML属性
只有当 ReadyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，此属性才会有值并且被解析为一个XML文档，否则此属性为Null。若是回传的XML文档结构不良或未完成响应回 传，此属性也会为Null，由此可见，此属性用来描述被XMLHttpRequest解析后的XML文档的属性。
4．status属性
用于描述服务器Http请求的状态文本，通过此属性我们可以得到服务器响应的状态的描述文本，与status属性同样，必须在readyState为3或4时才能对此属性进行访问。
6．onreadystatechange事件
每当readyState发生改变时触发此事件，我们一般都通过此事件来触发回传处理函数。
7．open()方法
XMLHttpRequest 对象是通过open(method，uri，async，username，password)的方法来进行初始化工作的，通过调用此方法将得到一个可以 用来进行发送（send()方法）的对象。其中method参数是用来指定发送请求的HttpRequest类型，其值类型为字串，值可以为get、 post、put、delete等；uri参数是用来指定请求被发送到的服务器地址，该地址会被自动解析为绝对地址，所以在这里可以用相对地址来表示； async是一个类型为boolean类型的参数，默认情况下为true，此时表示为异步提交，如果希望发送一个同步请求可以将此值设为false；在服 务器需要验证访问用户的情况，我们可以设置username以及password两个参数。
当open()方法被调用时，XMLHttpRequest对象将会把readyState属性设为1，且初始化其他属性，如果此时一个请求正在被发送或者响应正在被接收，则前一请求的数据和内容将会丢失，请求将会被取消。
8．send()方法
当调用 open()方法后，我们就可以通过调用send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true 时，在send()方法调用后立即return，否则将会中断直到请求返回。需要注意的是，send()方法必须在readyState为1时，即调用 open()方法以后调用。在调用send()方法以后到接收到响应头之前，readyState的值将被设为2，一旦开始接收到响应消息， readyState将会被设为3，直到响应接收完成，readyState的值才会被设为4。
9．abort()方法
该方法可以暂停一个HttpRequest的请求发送或是HttpResponse的接收，并且将XMLHttpRequest对象设置为初始化状态。
10．setRequestHeader()方法
该方法用于在调用open()方法后，设置HttpRequest头的信息，setRequestHeader（header,value）方法包含两个参数，前一个是header键名称，后一个是其值。
11．getResponseHeader()方法
此方法在readyState为3或4时，用于获取HttpResponse的头部信息，此外我们还可以通过getAllResponseHeaders()获取所有的HttpResponse的头部信息。
在搞清楚了XMLHttpRequest的这些基本属性方法以后，我们就可以开始编写我们的第一个Ajax程序了。我们准备通过点击一个按钮然后通过Ajax的方式到服务端取回一个Hello world!的字符串显示在界面的一个文本框里。
我们在一个配置好的站点工程里面新建一个名为AjaxTest.aspx页面。在前台页面中书写的代码：
AjaxTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.aspx.cs" Inherits="JQueryWeb.AjaxTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax请求数据</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//通过JavaScript请求数据
function getAjax() {
xmlHttpReq = null;
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlHttpReq != null){
xmlHttpReq.open("get", "AjaxResponse.ashx?s=1", true);
xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
xmlHttpReq.send(name);//因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if (xmlHttpReq.readyState == 4) {
var receivedText = xmlHttpReq.responseText;
$("#textID").val(receivedText);
}
}
}
//通过AJAX请求数据
function JQgetAjax() {
$.ajax({
type: "post",
url: "AjaxResponse.ashx",
data: "s=2",
success: function (msg) {
alert(msg);
$("#textID2").val(msg);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="textID" value="" style="width:600px;"/>
<input type="button" value="JS请求ajax数据" οnclick="getAjax()" />
<br />
<input type="text" id="textID2" value="" style="width:600px" />
<input type="button" value="JQuery请求ajax数据" οnclick="JQgetAjax()" />
</div>
</form>
</body>
public class AjaxResponse : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.QueryString["s"] == "1") //通过JavaScript发来的请求
{
context.Response.Write("Hello Shuang! You are the Best!");
context.Response.End();
}
else if (context.Request["s"] == "2") //通过JQuery 发来的请求
{
context.Response.Write("Wow! That's using JQuery!");
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
XMLHttpRequest提供了一个相对精简易用的API，下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。
1．readyState属性
当一个XMLHttpRequest对象被创建后，此属性标识了此对象正处于什么状态，我们可以通过对此属性的访问，来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义如下：
0：未初始化状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化此对象的属性
1：准备发送状态；此时，已经调用了XMLHttpRequest对象的Open()方法，并且已经准备好将一个XMLHttpRequest请求发送到服务端
2：已发送状态；此时，已经调用了XMLHttpRequest对象的Send()方法，但是并没有收到任何响应
3：正在接收状态；此时，已经开始接收HttpResponse响应信息但是还没有完成接收
4：完成响应状态；此时，已经完成了HttpResponse响应的接收
2．responseText属性
此属性描述的是一个HttpResponse中的全部文本内容，通过访问它，可以得到一次XMLHttpRequest得到响应回传的全部文本内容。只有当ReadyState的值为3或4时此属性才会有部分或者全部值，否则此属性只会是空字串。
3．responseXML属性
只有当 ReadyState属性为4，并且响应头部的Content-Type的MIME类型被指定为XML（text/xml或者 application/xml）时，此属性才会有值并且被解析为一个XML文档，否则此属性为Null。若是回传的XML文档结构不良或未完成响应回 传，此属性也会为Null，由此可见，此属性用来描述被XMLHttpRequest解析后的XML文档的属性。
4．status属性
用于描述服务器Http请求的状态值，通过此属性值我们可以判断服务器的响应状态，如我们通常通过判断status==200来判断服务器是否正常返回。但是注意，必须是日readyState为3或4时才能对此属性进行访问。
用于描述服务器Http请求的状态文本，通过此属性我们可以得到服务器响应的状态的描述文本，与status属性同样，必须在readyState为3或4时才能对此属性进行访问。
6．onreadystatechange事件
每当readyState发生改变时触发此事件，我们一般都通过此事件来触发回传处理函数。
7．open()方法
XMLHttpRequest 对象是通过open(method，uri，async，username，password)的方法来进行初始化工作的，通过调用此方法将得到一个可以 用来进行发送（send()方法）的对象。其中method参数是用来指定发送请求的HttpRequest类型，其值类型为字串，值可以为get、 post、put、delete等；uri参数是用来指定请求被发送到的服务器地址，该地址会被自动解析为绝对地址，所以在这里可以用相对地址来表示； async是一个类型为boolean类型的参数，默认情况下为true，此时表示为异步提交，如果希望发送一个同步请求可以将此值设为false；在服 务器需要验证访问用户的情况，我们可以设置username以及password两个参数。
当open()方法被调用时，XMLHttpRequest对象将会把readyState属性设为1，且初始化其他属性，如果此时一个请求正在被发送或者响应正在被接收，则前一请求的数据和内容将会丢失，请求将会被取消。
8．send()方法
当调用 open()方法后，我们就可以通过调用send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true 时，在send()方法调用后立即return，否则将会中断直到请求返回。需要注意的是，send()方法必须在readyState为1时，即调用 open()方法以后调用。在调用send()方法以后到接收到响应头之前，readyState的值将被设为2，一旦开始接收到响应消息， readyState将会被设为3，直到响应接收完成，readyState的值才会被设为4。
9．abort()方法
该方法可以暂停一个HttpRequest的请求发送或是HttpResponse的接收，并且将XMLHttpRequest对象设置为初始化状态。
10．setRequestHeader()方法
该方法用于在调用open()方法后，设置HttpRequest头的信息，setRequestHeader（header,value）方法包含两个参数，前一个是header键名称，后一个是其值。
11．getResponseHeader()方法
此方法在readyState为3或4时，用于获取HttpResponse的头部信息，此外我们还可以通过getAllResponseHeaders()获取所有的HttpResponse的头部信息。
在搞清楚了XMLHttpRequest的这些基本属性方法以后，我们就可以开始编写我们的第一个Ajax程序了。我们准备通过点击一个按钮然后通过Ajax的方式到服务端取回一个Hello world!的字符串显示在界面的一个文本框里。
我们在一个配置好的站点工程里面新建一个名为AjaxTest.aspx页面。在前台页面中书写的代码：
AjaxTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.aspx.cs" Inherits="JQueryWeb.AjaxTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Ajax请求数据</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
//通过JavaScript请求数据
function getAjax() {
xmlHttpReq = null;
if (window.XMLHttpRequest) {
xmlHttpReq = new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlHttpReq != null){
xmlHttpReq.open("get", "AjaxResponse.ashx?s=1", true);
xmlHttpReq.onreadystatechange = RequestCallBack;//设置回调函数
xmlHttpReq.send(name);//因为使用get方式提交，所以可以使用null参数调用
}
function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
if (xmlHttpReq.readyState == 4) {
var receivedText = xmlHttpReq.responseText;
$("#textID").val(receivedText);
}
}
}
//通过AJAX请求数据
function JQgetAjax() {
$.ajax({
type: "post",
url: "AjaxResponse.ashx",
data: "s=2",
success: function (msg) {
alert(msg);
$("#textID2").val(msg);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="textID" value="" style="width:600px;"/>
<input type="button" value="JS请求ajax数据" οnclick="getAjax()" />
<br />
<input type="text" id="textID2" value="" style="width:600px" />
<input type="button" value="JQuery请求ajax数据" οnclick="JQgetAjax()" />
</div>
</form>
</body>
</html>
下面是被请求的页面， 一个一般处理程序：AjaxRsponse.ashx ，负责接收前面页面的AJAX请求，并返回数据：
public class AjaxResponse : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
if (context.Request.QueryString["s"] == "1") //通过JavaScript发来的请求
{
context.Response.Write("Hello Shuang! You are the Best!");
context.Response.End();
}
else if (context.Request["s"] == "2") //通过JQuery 发来的请求
{
context.Response.Write("Wow! That's using JQuery!");
context.Response.End();
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
