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


    在用户单击“添加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对象请求服务器处理时,应该怎么在服务器端实现处理功能呢
  • 相关阅读:
    委托示例一则
    JQuery学习笔记(3)JQuery中的DOM操作
    JQuery学习笔记(2)JQuery选择器
    把.net的web开发补起来,徐图之
    今天把swagger补了一下
    Azure Cosmos DB Core (SQL)
    wcf callback channel问题多多
    gitlab安装
    Kubernetes
    搜索功能实现
  • 原文地址:https://www.cnblogs.com/liufei88866/p/1273143.html
Copyright © 2020-2023  润新知