前言：从现在开始我们学习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("系统繁忙，请联系管理员~~");
}
}
}