引用地址：http://blog.csdn.net/qianjiu/article/details/7524228

5.2 Ajax基础http://book.csdn.net/bookfiles/653/10065320712.shtml

在 进行Ajax开发以前，我们必须先对一些基本的知识进行了解。虽然Ajax.NET已经将Ajax实现细节封装起来，并大大简化了我们的操作，但是了解基 本的Ajax实现方式对于帮助我们在开发中能更好理解和实施，以及更有效地优化和排错是至关重要的。此外，虽然我们不必编写具体的Ajax调用代理，但是 在调用代理前获取数据，以及返回数据后怎样使数据能够正确显示，这两部分工作都需要我们具有基本的JavaScript操作DOM模型的能力。接下来我们 将来对这几方面的知识进行讨论。

5.2.1 XMLHttpRequest对象

对 于Ajax技术的基础和核心，XMLHttpRequest对象应该是我们必须要了解的一个对象，Ajax实现的关键发送异步请求并接收响应执行回调都是 通过它来完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方式实现了XMLHttpRequest对象。虽然大家对 它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，在实际脚本编写方法上区别不大，并且实现得到的效果也基本相同，目前W3C正致力于 将XMLHttpRequest对象制定一个统一的标准使各个浏览器厂商遵照执行，以利于Ajax技术的推广与发展。

XMLHttpRequest提供了一个相对精简易用的API，下面我们就将简单地介绍一下它所提供的属性和方法以及怎么利用这些属性和方法完成一次Ajax的请求和响应处理。

1．readyState属性

当一个XMLHttpRequest对象被创建后，此属性标识了此对象正处于什么状态，我们可以通过对此属性的访问，来判断此次请求的状态是什么然后做出相应的操作。具体此属性的值代表的意义见表5-1。

表5-1

值

说    明

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时才能对此属性进行访问。

5．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页面。首先我们在cs文件中的page_load事件函数中写下如下代码：

AjaxTest.aspx.cs:

protected void Page_Load(object sender, EventArgs e)

{

if (Request.QueryString["s"] == "1")//使用查询字串来指示这个请求是通过Ajax发出的

{

Response.Write("hello world!");//向HttpResponse中输出hello world!

Response.End();//将页面缓冲发送向客户端浏览器 并中止该页输出

//如果去掉这句 会得到多余的HTML代码

}

}

相对来说，我们在前台页面中书写的代码将会多一些，慢慢地你会发现这也许是Ajax的一个惯例：

AjaxTest.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits= "AjaxTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>测试</title>

<script language="javascript" type="text/javascript">

<!--

function GetInfo(){//我们就是通过这个函数来异步获取信息的

var xmlHttpReq = null;//声明一个空对象用来装入XMLHttpRequest

if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象

xmlHttpReq = new XMLHttpRequest();//我们通常采用这种方式实例化一个XMLHttpRequest

}

else if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的

xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

//IE5 IE6是通过这种方式

}

if(xmlHttpReq != null){//如果对象实例化成功 我们就可以干活啦

xmlHttpReq.open("get","AjaxTest.aspx?s=1",true);

//调用open()方法并采用异步方式

xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数

xmlHttpReq.send(null);//因为使用get方式提交，所以可以使用null参调用

}

function RequestCallBack(){//一旦readyState值改变，将会调用这个函数

if(xmlHttpReq.readyState == 4)

{

document.getElementById("iptText").value = xmlHttpReq.responseText;

//将xmlHttpReq.responseText的值赋给iptText控件

}

}

}

-->

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<input id="iptText" type="text" value="" />

<input type="button" id="" value="Ajax提交" onclick="GetInfo();" />

<!--点击这个按钮调用-->

</div>

</form>

</body>

</html>

如果你在点击按钮的瞬间发现文本框内闪电般地出现了 “Hello world!”，那么恭喜你，你已经完成了一个Ajax调用。如果你还对前台页面中那些和C#貌似神离的代码觉得不太明白，没关系，接下来我们就将来简单 学习一下Ajax另外一个重要的部分——JavaScript。

.NET AJAX实例的更多相关文章

  1. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

  2. JavaScript强化教程——jQuery AJAX 实例

    什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...

  3. jQuery AJAX实例

    <html><head><title>jQuery Ajax 实例演示</title></head><script language= ...

  4. C#中jQuery Ajax实例（二）

    上一篇写了一个简单的Ajax异步程序,这一次同样是简单的程序,只不过这次先把参数传到一般处理程序(后缀为ashx)中,再把结果传回到页面. 1.html代码: <html xmlns=" ...

  5. C#中jQuery Ajax实例（一）

    目标:在aspx页面输入两参数,传到后台.cs代码,在无刷新显示到前台 下面是我的Ajax异步传值的第一个实例 1.前台html代码: <html xmlns="http://www. ...

  6. jQuery Ajax 实例 ($.ajax、$.post、$.get)【转载】

    本文转载自:http://jun1986.iteye.com/blog/1399242 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的 ...

  7. jQuery Ajax 实例 ($.ajax、$.post、$.get)转

    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,地址为:ht ...

  8. jquery ajax实例教程和一些高级用法

    jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery ...

  9. Ajax实例二：取得新内容

    Ajax实例二:取得新内容 通过点击pre和next按钮,从服务器取得最新内容. HTML代码 <div id="slide">图片显示区</div> &l ...

  10. Ajax实例一：利用服务器计算

    Ajax实例一:利用服务器计算 HTML代码 //输入两个数 <input id="number1" type="number"> <inpu ...

随机推荐

  1. Shell操作相关的快捷键 --Linux

    一.shell和bash shell --unix --Bourne shell ,bash --linux --Bourne again shell.bash (GNU Bourne-Again S ...

  2. 明天找python工作，看看这几道Python面试题吧，Python面试题No14

    第1题: 如何解决验证码的问题,用什么模块,听过哪些人工打码平台? PIL.pytesser.tesseract模块 平台的话有:(打码平台特殊,不保证时效性) 云打码 挣码 斐斐打码 若快打码 超级 ...

  3. sysbench压力测试总结

    sysbench压力测试工具简介sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL.Orac ...

  4. Windows安装IIS后，启动网站报错：不能在此路径中使用此配置节……

    在IIS里启动设置好的网站(ASP.net网站),浏览器报如下错误: 不能在此路径中使用此配置节.如果在父级别上锁定了该节,便会出现这种情况.锁定是默认设置的(overrideModeDefault= ...

  5. Luogu P3546 [POI2012]PRE-Prefixuffix 神奇的递推+哈希

    设$f[i]$表示切掉前$i$位和后$i$位后,即剩下$s[i+1]到s[n-i]$,的公共前后缀长度.此时我们发现,$f[i-1]$相对于$f[i]$少切了两个$char$,所以有$f[i-1]\l ...

  6. JPA教程

    http://www.yiibai.com/jpa/jpa_criteria_api.html

  7. 013 Roman to Integer 罗马数字转整数

    给定一个罗马数字,将其转换成整数. 返回的结果要求在 1 到 3999 的范围内. 详见:https://leetcode.com/problems/roman-to-integer/descript ...

  8. HBase 相关API操练(一)：Shell操作

    HBase 为用户提供了一个非常方便的使用方式, 我们称之为“HBase Shell”. HBase Shell 提供了大多数的 HBase 命令, 通过 HBase Shell 用户可以方便地创建. ...

  9. Storm概念学习系列之storm的功能和三大应用

    不多说,直接上干货! storm的功能 Storm 有许多应用领域:实时分析.在线机器学习.持续计算.分布式 RPC(远过程调用协议,一种通过网络从远程计算机程序上请求服务). ETL(Extract ...

  10. SVN的搭建（入门篇）

    如果转载,请注明出处,谢谢 1.安装SVN # yum install subversion 2.创建一个仓库 创建一个仓库svnrepos # svnadmin create /usr/svnrep ...