项目一：建立Ajax和Asp.Net页面结合的案例
1. 首先建立一个没有使用AJAX功能的简单页面，客户端代码如程序清单2-1所示：
程序清单2-1 利用XMLHttpRequest对象测试Ajax案例
<%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="ajax.aspx.cs"Inherits="_Default" %> <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml" > <headrunat="server"> <title>Ajax和Asp.Net页面结合的案例</title> <script language="javascript"type="text/javascript"> function getXMLHTTP() { var XMLHTTP=null; if(window.ActiveXObject) { try{ XMLHTTP=newActiveXObject("Microsoft.XMLHTTP"); }catch(e){} }else if(window.XMLHttpRequest) { try{XMLHTTP=newXMLHTTPRequest(); }catch(e){} } return XMLHTTP; } var XMLHTTP=getXMLHTTP();
//创建一个XMLHttpRequest对象,如果成功，向服务器发送一个带有参数sendData=ok（也可以是任意值）的GET请求。接着给onreadystatechange属性设置一个函数，最后将这个请求发送到服务器。
if(XMLHTTP!=null) { XMLHTTP.open("GET","ajax.aspx?sendData=ok"); XMLHTTP.onreadystatechange=stateChanged; XMLHTTP.send(null); } function stateChanged() { if(XMLHTTP.readyState==4 &&XMLHTTP.status==200) window.alert(XMLHTTP.responseText); } </script> </head> <body> <form id="form1"runat="server"> <div> <p>Wait and see...</p> </div> </form> </body> </html>
2. 在页面的加载事件代码如下：
protected voidPage_Load(object sender, EventArgs e) { if(Request.QueryString["sendData"] != null && Request.QueryString["sendData"] == "ok") { Response.Write("Hello from theserver!"); Response.End(); } }
该程序启动之后，会首先出来图2-1，弹出警告框信息，然后才是在页面显示Wait and see…
如果想在HTTP请求上使用POST命令，那就需要设置open()方法的第一个参数。当需要向服务器发送超过500字节的数据（因为这可能超出URL的最大长度）或不想被代理服务器缓存的时候，使用POST是尤为重要的。把要发送的数据以名值对一级经过URL编码（如果需要的话）的形式提供给send()函数，就像下面的代码片段那样：
XMLHTTP.open(“POST”,”ajax.aspx”); XMLHTTP.onreadystatechange=stateChanged; XMLHTTP.send(“sendData=ok&returnValue=123”);
通过POST命令发送的数据，在Asp.Net中要使用Request.Form属性来进行读取，而不是针对GET请求的Request.QueryString属性。
500个字节只是一个保守数字而已，各种浏览器对URL的长度支持可能是不同的。
项目二：建立使用Xml格式的AJAX的页面程序
1.建立一个Asp.Net程序，可以使用动态页面也可以使用静态页面，此处使用的是静态页面，名字为SimpleAjax.htm,代码如程序清单2-2所示：
程序清单2-2
<!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> <title>简单Ajax示例</title> <script type="text/javascript" language="javascript"> varxmlHttp; functioncreateXmlHttpRequest() { //判断是否为IE浏览器 if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } //启动对页面的请求 function startRequest() { createXmlHttpRequest(); //当请求状态发生改变会调用该javaScript方法 xmlHttp.onreadystatechange=handleStateChange; //建立对服务器的调用，此方法有3个参数， //第一个参数说明你请求服务器的方式，第二个参数确定你请求的服务器端的URL，第三个参数说明处理方式是否为异步处理 //这里的异步提交是真正体现了Ajax优势的方式，当设定为False时，主要应用于持久化页面的设定。 //这里设定请求服务器地址 xmlHttp.open('GET',"TestData.xml",true); //即向服务器发送请求，向服务器端发送某些数据可以是流、Document对象,字符串等对象，如果设定为异步提交，此方法一定会立即返回 //但同步提交时该方法一定需要服务器相应 //传入这个方法的内容会作为请求体的一部分发送 xmlHttp.send(null); } functionhandleStateChange() { // 判断XMLHttpRequest对象读取服务器响应状态 4 说明对服务器响应读取完成 if(xmlHttp.readyState==4) { //判断Http状态码 200 说明服务器地址正确、请求正确 if(xmlHttp.status==200) { //接收服务器回应的XmlDocument对象 varxmlDoc=xmlHttp.responseXml; //通过控件ID找到控件testData vartestData=document.getElementById('testData'); //解析服务器回应的XmlDocument对象 并设定testData的值为服务器回应XML数据 testData.innerHTML="<b>"+xmlDoc.getElementsByTagName('data')[0].firstChild.nodeValue+"</b>"; } } } </script> </head> <body> <input type="button" id='btnAjax' value='触发Ajax事件' onclick='startRequest();'/> <div id='testData' class="color:#ff0000"></div> </body> </html>
2.添加一个xml文件，TestData.xml，内容如下：
<?xmlversion="1.0"encoding="utf-8" ?> <root> <data> 测试数据 仅仅为了显示Ajax异步提交及与服务器通信的实例 </data> </root>
2.
请大家比较项目一和项目二的异同。
@ 本章总结
1. 本章介绍了XMLHttpRequest对象的相关属性和方法
2. 使用利用不同浏览器结合XMLHttpRequest对象来显示数据。
3. 利用不同浏览器、XML和XMLHttpRequest对象读取数据。
