图12-7 异步提交的原理图
实现的步骤如下:
(1)打开Default.aspx页。
(2)为“添加RSS”按钮添加click事件,事件调用方法“addrss”。
(3)在head元素内添加脚本代码,方法“addrss”的代码如清单12-4所示。其中需要创建一个XMLHttpRequest对象。
代码清单12-4 添加按钮调用的方法
<script type="text/javascript">
var xmlhttp;
function createXMLHttp()
{
//未考虑除IE外其他浏览器-创建异步对象
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function addrss()
{
createXMLHttp();
//判断异步对象状态的方法
xmlhttp.onreadystatechange=statechange;
//获取添加的RSS属性
var name=document.getElementById("txtRssName").value;
var url=document.getElementById("txtRssUrl").value;
//加载服务器页并发送数据请求
xmlhttp.open("GET","addRssNamePage.aspx?name="+escape(name) +"&url="+escape(url),true);
xmlhttp.send(null);
}
</script>
注意:传递参数时,如果参数为中文,必须使用escape方法包装。
(4)在创建XMLHttpRequest对象的过程中,使用方法“statechange”判断事件的状态,此方法的设计代码如清单12-5所示。主要目的:是当请求 成功 完成后,调用方法“handleStr”实现页面的局部刷新。
代码清单12-5 判断请求状态的方法
function statechange()
{
//如果请求已经完成
if(xmlhttp.readystate==4)
{
//判断请求是否成功返回
if(xmlhttp.status==200)
{
//返回的是字符串,进行处理后显示在客户端
handleStr(xmlhttp.responseText);
}
}
(5)设计实现局部刷新的方法,代码如清单12-6所示。
代码清单12-6 更新频道列表的方法
function handleStr(list)
{
//获取频道列表所在的div
var oldcontent=document.getElementById("namelist").innerHTML;
//更新div中的内容
var newcontent=oldcontent+list;
//显示新的div
document.getElementById("namelist").innerHTML=newcontent;
}
以上是客户端需要实现的技术,那么当XMLHttpRequest对象请求服务器处理时,应该怎么在服务器端实现处理功能呢?