AJAX学习1
看了5.3节的AJAX.NET进行开发，让我对AJAX有了新的认识，之前只是知道它可以实现无刷新的技术吧，现在知道其机制了。下面应该是AJAS原始开发的原理吧：
对于AJAS技术的基础和核心，XMLHttpRequest对象应该是其实现发送异步请求并响应执行回调。
XMLHttpRequest有几个属性如readyState属性的五个状态，Open()方法，send()方法都很重要。这边我就不都记录下来了。以后再看的时候自己再去翻书。
1、在配置好的站点工程里面新建一个名为AjaxTest.aspx页面。首先在cs文件中的page_load事件函数中写下如下代码：
1 protectedvoid 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 {
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
}
elseif (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>
<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
}
elseif (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>
