引用地址：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. NYOJ542-试制品

    题目链接:点击打开链接 试 制 品 时间限制:1000 ms  |  内存限制:65535 KB 难度: 描述 ZZ大学的Dr.Kong最近发现实验室的很多试制品都已经用完.由于项目经费有限,为了节省 ...

  2. SCOJ4427 / TOPOI 4404: Miss Zhao's Graph 解题报告

    题目链接 SCOJ TOPOI 题目描述 Problem 给定一个包含n个顶点m条边的带权有向图,找一条边数最多的路径,且路径上的边的权值严格递增.图中可能有重边和自环. Input Data 第一行 ...

  3. 洛谷P4113 [HEOI2012]采花

    题目描述 萧薰儿是古国的公主,平时的一大爱好是采花. 今天天气晴朗,阳光明媚,公主清晨便去了皇宫中新建的花园采花. 花园足够大,容纳了n朵花,花有c种颜色(用整数1-c表示),且花是排成一排的,以便于 ...

  4. CF616D Longest k-Good Segment

    题目描述 给定一个包含\(n\)个整数的序列\(a\),\(0\le a_i \le 10^6\),询问不重复数字个数\(\le k\)的最长区间的左右端点.如果有多解输出任意一组. 输入输出格式 输 ...

  5. Ext3.1的一些使用讨论

    这里简单记录一下曾经的10个月使用Ext的工作模式. 前公司用的是 Ext 3.1,在2018/2019的今天,可以说是比较久远的技术了.处于大前端发展时代的我们,对其的诟病应该不少. 不过其中面向对 ...

  6. ACM-ICPC 2018 徐州赛区网络预赛-G Trace（线段树的应用

    Problem:Portal传送门 Problem:Portal传送门  原题目描述在最下面.  我理解的题意大概是:有n次涨潮和退潮,每次的范围是个x×y的矩形,求n次涨退潮后,潮水痕迹的长度.   ...

  7. js中的focus（）聚焦

    document.getElementById("vin").focus();document.form1.name.focus() $(document).ready(funct ...

  8. Java BIO

    目录 BIO 字节流 OutputStream InputStream 字符流 Reader Writer 转换流 InputStreamReader OutputStreamWriter BIO I ...

  9. 深入V8引擎-Time核心方法之win篇(2)

    这一篇讲windows系统下TimeTicks的实现. 对于tick,V8写了相当长的一段discussion来讨论windows系统上计数的三种实现方法以及各自的优劣,注释在time.cc的572行 ...

  10. Java中的Enum(枚举)用法介绍

    1. 关于Java Enum:学过C/C++等语言的人,应该都对Enum类型略知一二.Enum一般用来表示一组相同类型的常量.如性别.日期.月份.颜色等.对这些属性用常量的好处是显而易见的,不仅可以保 ...