您当前位置: 圣才学习网首页 >> IT类 >> Web开发技术

异步提交的客户端实现

扫码手机阅读
用圣才电子书APP或微信扫一扫,在手机上阅读本文,也可分享给你的朋友。
评论(0
来源:网络 作者:未知
在用户单击添加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对象请求服务器处理时,应该怎么在服务器端实现处理功能呢?

 

小编工资已与此挂钩!一一分钱!求打赏↓ ↓ ↓

如果你喜欢本文章,请赐赏:

已赐赏的人
最新评论(共0条)评论一句