ASP.NET Ajax编程技术
前言：从现在开始我们学习 ASP.NET AJAX ， Ajax 技术现在应用非常广泛，只要我们上的一些大型网站，都用到了这个技术， AJAX 最终解释的意思是：实现网页的无刷新效果，使网页显示出更美好的页面，使用户体验能够最好。
1. 什么是 AJAX
(1) AJAX ： ”Asynchronous JavaScript and XML”中文的意思就是：异步 JavaScript 和 XML ，指一种创建交互式网页应用程序的网页开发技术。 Ajax 并非缩写词，而是由 Jesse James Guiett 创造的名词
(2) 不是指一种单一的技术，而是有机的利用了一系列相关的技术： web 标准 (Standards-Based Presention)+XHTML+CSS 的表示。
1) 使用 Dom(Document Object Model) 进行动态显示及交互。
2) 使用 XML 和 XSLT 进行数据交互及相关操作。
3) 使用 XMLHttpRequest 进行异步数据查询，检索。
(3) 简单理解为： JavaScript+XMLHttpRequest+CSS+ 服务器端的集合。
2. 普通网页请求回执过程 ( 请求响应模式 )
3. Ajax Web Application Model
4. Ajax 优点
(1) AJAX 的本质是一个浏览器端的提示信息。
(2) AJAX技术之主要目的在于局部交换客户端及服务器间的数据。
(3) 这个技术的主角是 XMLHttpRequest 的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的 Refresh without Reload( 轻刷新 ) 。
(4) 与服务器之间的沟通，完全是通过 JavaScript 来实现的。
(5) 使用 XMLHttpRequest 本身传送的数据量很小，所以反应会很快，也就是让网络程序更像一个桌面应用程序。
(6) Ajax 就是运用 JavaScript 在后台悄悄帮你去跟服务器要资料，最后再有 JavaScript 或者 Dom 来帮你呈现结果，因为所有动作都是由 JavaScript 代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦。
5. XMLHttpRequest
(1) Ajax 应用程序的中心就是它。
(2) XMLHttpRequest 对象在 IE 浏览器和非 IE 浏览器中创建的方法不同。
(3) 简而言之，它可以异步从服务器端读取 txt 或者 xml 数据。
(4) 在 IE 和非 IE 中的创建方法是：
//根据不同的浏览器使用响应的方式来创建异步对象
1 function createXmlHttp() {
2
3 xhobj = false ;
4
5 try {
6
7 xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // iemsxml3.0+
8
9 } catch (e) {
10
11 try {
12
13 xhobj = new ActiveXObject("Microsoft.XMLHTTP"); // iemsxml2.6
14
15 } catch (e2) {
16
17 xhobj = false ;
18
19 }
20
21 }
22
23 if (!xhobj && typeof XMLHttpRequest != 'undefined') { // Firefox, Opera 8.0+, Safari,谷歌浏览器
24
25 xhobj = new XMLHttpRequest();
26
27 }
28
29 return xhobj;
30
31 }
6. 创建 XMLHttpRequest 对象
(1) 同步使用 XMLHttpRequest 对象
按照下面的模式可以同步 XMLHttpRequest 对象
1) 创建对象；—— new （叫一个助手过来）
2) 创建请求；—— open( 告诉他要去做的事情 )
3) 发送请求；—— send （让其去干某一件事）
(2) 添加一个 WebForm 页面，命名为 FirstAjaxForFun.aspx, 再添加一个一般处理程序 FirstAjaxForFun.ashx ，在 aspx 中写入如下代码：
1 <title>Ajax页面实现无刷新</title>
2
3 <script src= " common/common.js " type= " text/javascript " ></script>
4
5 <script type= " text/javascript " >
6
7 function GetDate() {
8
9 var xhr = false ;
10
11 // 1.创建异步对象
12
13 xhr = createXmlHttp();
14
15 // 2.设置请求参数
16
17 xhr.open( " GET " , " FirstAjaxForFun.ashx " , true );
18
19 // 3.设置回调函数(这个回调函数主要用来检测服务器是否将数据发送给异步对象的)
20
21 xhr.onreadystatechange = function () {
22
23 // 获得服务器响应的数据
24
25 // alert(xhr.readystate);
26
27 // 当服务器已经将数据发回到浏览器了，如果返回的响应报文状态码为200，才代表服务器运行正确。
28
29 if (xhr.readystate == 4 ) {
30
31 if (xhr.status == 200 ) {
32
33 gel( " MyDiv " ).innerHTML = xhr.responseText;
34
35 // document.getElementById("MyDiv").innerHTML = xhr.responseText;
36
37 }
38
39 else {
40
41 alert( " 系统繁忙..请联系管理员 " );
42
43 } } }
44
45 // 异步对象发送请求
46
47 xhr.send( null );
48
49 }
50
51 </script>
52
53 <input type= " button " value= " GetDate() " onclick= " GetDate() " />
54
55 <div id= " MyDiv " ></div>
56
57 在.ashx里面写入如下代码：
58
59 System.Threading.Thread.Sleep( 2000 );
60
61 int a= 0 ;
62
63 int c = 1 / a;
64
65 context.Response.Write( " <h1>Hello World " + DateTime.Now + " </h1> " );
(3) 先来创建 XMLHttpRequest 对象
1) 在 IE,FireFox,Safari 和 Opera 中创建该对象的 JavaScript 对象
var xhr=new XMLHttpRequest();
2) 在IE5/6 中的代码为：
var xmlRequest=new ActiveXObject("Microsoft.XmlHttp");
(4) XMLHttpRequest 对象的方法
方法
说明
abort
取消请求
open
需要使用多个参数，第一个设置方法属性，第二个设置目标 URL ，第三个设置同步 (false) 还是异步 (true) 发送请求
send
发送请求到服务器
setRequestHeader
添加自定义 Http 头到请求
getAllResponseHeader
获取 Http 响应头的整个列表
getResponseHeader
仅获取指定的 Http 响应头
(5) 为XMLHttpRequest 对象设置请求参数
1)设置参数(Get方式)
xhr.open("GET", "FirstAjaxForFun.ashx", true)
2)Post方式
xhr.open("POST", "LoginByAjax.aspx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3)设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");
(6) 发送请求
xhr.send(null);
xhr.send("isPostback=1&txtName=" + txtName.value + "&txtPwd=" + txtPwd.value);
(7) 异步使用XMLHttpRequest 对象
1) 异步使用 XMLHttpRequest 对象时，必须使用 .onreadystatechange 事件，使用模式应该是以下几点：
a) 创建该对象， -new
b) 设置 readystateChange 事件触发一个回调函数； -onreadystateChange
c) 打开请求； -open
d) 发送请求； -send
e) 在回调函数中检索 readystate 属性，看数据是否准备就绪 ( 是否等于 4)
i. 如果没有准备好，隔一段时间再次检查，因为数据没有下载完成，我们无法使用它的属性和方法。
ii. 如果已经准备好，就继续往下执行。
(8) 编写回调函数
1) 在 xhr.send 之前添加设置回调函数代码
Xhr.onreadystatechange=watching;
2) 回调函数
xhr.onreadystatechange = function () { //设置回调函数
//alert(xhr.readyState);
//当服务器已经将数据发回到浏览器的异步对象了
if (xhr.readyState == 4) {
//如果返回的响应报文状态吗为200，才代表服务器运行正常
if (xhr.status == 200) {
gel("msgDiv").innerHTML = xhr.responseText;
}
else {
alert("系统繁忙，请联系管理员~~");
}
}
}
(9) readyState 属性
1) readystate 属性指出了 XMLHttpRequest 对象在发送 / 接收数据过程中所处的几个状态， XMLHttpRequest 对象会经历 5 种不同的状态。
a) 0 ：未初始化，对象已经创建，但是还没有初始化，既还没有调用 open 方法。
b) 1 ：已打开，对象已经创建并初始化，但还未调用 send 方法。
c) 2 ：已发送，已经调用了 send 方法，但是该对象正在等待状态码和头的返回。
d) 3 ：正在接受，已经接受了部分数据，但还是不能使用该对象属性和方法，因此状态和响应头不完整
e) 4 ：已加载，所有数据接受完毕。
(10) xmlHttpRequest 对象常用属性
1）回调函数：用户定义，系统调用
属性
说明
onreadystatechange
返回或者设置异步请求的事件处理程序
readyState
返回状态码： 0 ：未初始化， 1 ：打开， 2 ：发送， 3 ：正在接收， 4 ：已加载
responseText
使用字符串返回 Http 响应
responseXML
使用 XML Dom 对象返回 HTTP 响应
status
返回 Http 状态码
(11) 如何使用 Json 格式的代码
1) 在 ashx 页面中写入如下代码
context.Response.Write("{'date':'I Love You'}");
2) 在 aspx 页面中写入如下代码：
xhr.onreadystatechange = function () { //设置回调函数
//alert(xhr.readyState);
//当服务器已经将数据发回到浏览器的异步对象了
if (xhr.readyState == 4) {
//如果返回的响应报文状态吗为200，才代表服务器运行正常
if (xhr.status == 200) {
//var s = "{ 'date': 'I Love You' }";
//eval解析器，将JS代码解析成了Json结构
var json = eval("(" + xhr.responseText + ")");
alert(json.date);
}
else {
alert("系统繁忙，请联系管理员~~");
}
}
}
分类: asp.net
标签: asp.net ajax
http://www.cnblogs.com/hanyinglong/archive/2012/08/24/2653693.html
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于ASP.NET Ajax编程技术的详细内容...