I'm VC

主页 > Web开发 > AJAX >

异步发送添加请求的客户端实现

在用户单击“添加RSS”按钮后，为了提高运行速度，本例将使用XMLHttpRequest实现数据的提交工作，异步功能实现的原理如图12-7所示。

图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对象请求服务器处理时，应该怎么在服务器端实现处理功能呢？

延伸阅读：

添加请求的服务器端实现