本文通过学习XMLHttpRequest创建Ajax，本文参考《Ajax入门经典》

（一）创建XmlHttpRequest.js。代码如下


/* （一）Ajax技术    （1）XMLHttpRequest    （2）隐藏框架    （3）隐藏的内联框架    （4）动态脚本加载    （5）预载图像和cookie  (二)XMLHttpRequest  (1)主要目的：用HTML和脚本来直接连接存储在服务器上的数据层  （2）好处：不必发送页面或刷新页面，因为地城数据的改变会立即反映在页面中。 （三） XMLHttpRequest异步用法 （1）创建XMLHttpRequest对象 （2）设置readystatechange事件触发一个指定的函数 （3）检查readySate属性，看数据是否准备就绪，如果还未准备就绪，就隔一段时间再检查。如果已经准备就绪，就继续执行下一步 （4）打开请求 （5）发送请求 */ //Create the XMLHttpRequest var xHRObject = false; if (window.XMLHttpRequest) {     xHRObject = new XMLHttpRequest(); //IE7,Firefox,Safari,Opera创建对象 } else if (window.ActiveXObject) { xHRObject = new ActiveXObject("Microsoft.XMLHTTP");//在IE5和IE6中创建 } function sendRequest(data) {  xHRObject.open("GET","display.aspx?value="+data,true);  xHRObject.onreadystatechange=getData;//触发一个指定的函数。readystatechangede事件的整个操作都是在后台执行。这样就能够异步使用XMLHttpRequest对象  xHRObject.send(null); } function getData() {     //Check to see if the XMLHttpRequest object is ready and whether it      //has returned a legitimate response     //readyState 0:未初始化 2：发送 3：正在接收 4：已加载     if (xHRObject.readyState == 4 && xHRObject.status == 200)//检查readySate属性，看数据是否准备就绪，如果还未准备就绪，就隔一段时间再检查。如果已经准备就绪，就继续执行下一步      {         var serverText=xHRObject.responseText;         if(serverText.indexOf('!'!=-1))         {            element=serverText.split('|');            document.getElementById(element[0]).innerHTML=element[1];         }             }   }


（二）创建display.htm页面、


<!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></title>     <script src="XmlHttpRequest.js" type="text/javascript"></script> </head> <body> <a href="#" onclick="sendRequest('Contacts');return false;">Contacts</a> <a href="#" onclick="sendRequest('Calendar');return false;">Calendar</a> <a href="#" onclick="sendRequest('Adverts');return false;">Adverts</a> <br/> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> </body> </html>


（三）创建display.aspx，隐藏代码如下


using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls;  namespace BeginAjax {     public partial class display : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {             switch (Request["value"])             {                  case "Contacts":                     Response.Write("box1|<br><b>Contacts</b><br>joetao,Acacia Avenue<br> Joane Doe,2 Willow Tree Lane");                                        break;                 case "Calendar":                     string dt = DateTime.Now.ToString();                     Response.Write("box2|<br><b>Calendar:</b><br>"+dt);                       break;                 case "Adverts":                     Response.Write("box2|<br><b>Adverts:</b><br>" );                      break;              }         }     } }


（四）​​代码下载​​