看了5.3节的AJAX.NET进行开发,让我对AJAX有了新的认识,之前只是知道它可以实现无刷新的技术吧,现在知道其机制了。下面应该是AJAS原始开发的原理吧:
对于AJAS技术的基础和核心,XMLHttpRequest对象应该是其实现发送异步请求并响应执行回调。
XMLHttpRequest有几个属性如readyState属性的五个状态,Open()方法,send()方法都很重要。这边我就不都记录下来了。以后再看的时候自己再去翻书。
1、在配置好的站点工程里面新建一个名为AjaxTest.aspx页面。首先在cs文件中的page_load事件函数中写下如下代码:
1 protected void Page_Load( object sender, EventArgs e) 2 { 3 if (Request.QueryString[ " s " ] == " 1 " ) // 使用Request.QueryString 来指示这个请求是通过Ajax发出的 4 { 5 Response.Write( " hello world! " ); // 向HttpResponse中输出hello world! 6 Response.End(); // 将页面缓冲发送向客户端浏览器 并中止该页输出 如果去掉这句 会得到多余的HTML代码 7 } 8 }
2、前台代码:
< html xmlns ="http://www.w3.org/1999/xhtml" > < head runat ="server" > < title > XMLHttpRequest测试 </ title > < script language ="javascript" type ="text/javascript" > <!-- function GetInfo(){ // 我们就是通过这个函数来异步获取信息的 var xmlHttpReq = null ; // 申明一个空对象用来装入XMLHttpRequest if (window.XMLHttpRequest){ // 除IE5 IE6 以外的浏览器XMLHttpRequest是作为window的一个子对象 xmlHttpReq = new XMLHttpRequest(); // 我们通常采用这种方式实例化一个XMLHttpRequest } else if (window.ActiveXObject){ // IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的 xmlHttpReq = new ActiveXObject( " Microsoft.XMLHTTP " ); // IE5 IE6是通过这种方式 } if (xmlHttpReq != null ){ // 如果对象实例化成功 xmlHttpReq.open( " get " , " XMLHttpRequest.aspx?s=1 " , true ); // 调用open()方法 并采用异步方式 xmlHttpReq.onreadystatechange = RequestCallBack; // 设置回调函数 xmlHttpReq.send( null ); // 因为使用get方式提交 所以可以使用null参调用 } function RequestCallBack(){ // 一旦readyState值改变 将会调用这个函数 if (xmlHttpReq.readyState == 4 ) { document.getElementById( " iptText " ).value = xmlHttpReq.responseText; // 将xmlHttpReq.responseText的值付给iptText控件 } } } --> </ script > </ head > < body > < form id ="form1" runat ="server" > < div > < input id ="iptText" type ="text" value ="" /> < input type ="button" id ="" value ="Ajax提交" onclick ="GetInfo();" /> <!-- 点击这个按钮调用 --> </ div > </ form > </ body > </ html >