[转]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("系统繁忙，请联系管理员~~");

                    }

                }

            }