• 实现页面无刷新(使用回调函数)


    实现页面无刷新目前我知道有两种方法(其实都是基于XMLHTTP的)
    方法一:很多AJAX的参考书上都有的方法
     1var xmlHttp; 
     2function createXmlHttp(){
     3       if(window.ActiveXObject)
     4       {
     5                   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
     6       }

     7       else if(window.XMLHttpRequest)
     8       {
     9           xmlHttp = new XMLHttpRequest();
    10       }
        
    11  }

    12
    13 //按钮的单击事件触发后调用这个函数
    14 function statrRequest()
    15  {
    16  
    17      createXmlHttp();
    18    var url = getUrl();//获得URL包括带有的参数
    19        xmlHttp.onreadystatechange = handleStateChange;
    20    xmlHttp.open("GET",url,true);
    21    //xmlHttp.setRequestHeader(" Content- Type " , " application/x-www-form-urlencoded " );
    22//这是POST必须的
    23    xmlHttp.send(null);
    24    
    25    
    26  }

    27
    28//返回时调用的函数
    29 function handleStateChange()
    30  {
    31      if(xmlHttp.readyState==3)//当服务器还没有返回时,显示一张图片(loading)
    32    {
    33        
    34        var oDiv = document.getElementById("loading");
    35        if(oDiv.childNodes.length<=0){
    36        
    37        var img = document.createElement("img");
    38        img.setAttribute("src","images/_loading.gif")
    39        img.setAttribute("id","loading");
    40    
    41        }

    42        else
    43        {
    44            var img = document.getElementById("loading");
    45            img.style.display = "inline";
    46        }

    47                
    48    }
    else if(xmlHttp.readyState==4){
    49        if(xmlHttp.status==200)
    50        {
    51            var img = document.getElementById("loading");
    52            img.style.display = "none";
    53            var oTable = document.getElementById("table");
    54            oTable.innerHTML = xmlHttp.responseText;
    55                    }

    56        
    57    }
    本人觉得难点在于服务器返回的格式,服务器应该返回已字符串,我知道在服务器端可以接受HTML页传过来的参数,但是不知道服务器端处理后怎么返回,调用一个有返回值的函数吗?哪位打人解释一下。
    下面介绍第二种方法,使用,NET的回调函数
    第一,服务器端页面必须实现 System.Web.UI.ICallbackEventHandler接口,该接口有两个函数
     1  ICallbackEventHandler 成员
    第一个用于返回一个字符串到客户端(通常是HTML标记和文本内容)
    第二个函数当客户端调用回调函数时执行(通常用于执行逻辑代码,处理业务逻辑)
    (注意MSDN回调函数的示例有误)
    第二:使用JS写接受服务器返回来的结果的函数,和相应事件的函数
     1//这是响应onclick时间的函数
     2function Query()
     3  {
     4     var oType = document.getElementById("se_type");
     5     var oPrice = document.getElementById("se_price");
     6     var oRent = document.getElementById("se_rentfee");
     7     var oArea = document.getElementById("se_area");
     8     var oAcreage = document.getElementById("se_acreage");
     9     var oJzlb = document.getElementById("se_jzlb");
    10     var oHouseType = document.getElementById("se_houseType");
    11     var oDecorate = document.getElementById("se_decorate");
    12     var oKey = document.getElementById("txt_key");
    13     
    14
    15     
    16     var value = new Array();
    17     value[0]= oType.options[ oType.selectedIndex].value;
    18     value[1]= oPrice.options[ oPrice.selectedIndex].value;
    19     value[2]= oRent.options[ oRent.selectedIndex].value;
    20     value[3]= oArea.options[ oArea.selectedIndex].text;
    21     value[4= oAcreage.options[ oAcreage.selectedIndex].value;
    22     value[5= oJzlb.options[ oJzlb.selectedIndex].value;
    23     value[6= oHouseType.options[ oHouseType.selectedIndex].value;
    24     value[7= oDecorate.options[ oDecorate.selectedIndex].value;
    25     value[8= oKey.value;
    26    
    27    var request = value.toString();
    28    
    29     CallServer(request,"context");
    30     
    31     
    32  }

    33
    34//这是接受服务器返回的结果,并在页面上显示的函数
    35function ReceiveServerData(rValue)
    36
    37 
    38    var oTable = document.getElementById("rTable");
    39  
    40    oTable.innerHTML = rValue;
    41  
    42 }
    第三:使用Page.ClientScript.GetCallbackEventReference()方法,取得客户端函数引用
    1protected void Page_Load(object sender, EventArgs e)
    2    {
    3        String cbReference = Page.ClientScript.GetCallbackEventReference(this"request""ReceiveServerData""context");
    4        String callback = "function CallServer(request,context)" 
    5            +"{" + cbReference + "}";
    6        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callback, true);
    7
    8    }
    在6行注册了一个客户端脚本,运行后,客户端出现如下代码
    1<script type="text/javascript">
    2<!--
    3function CallServer(request,context){WebForm_DoCallback('__Page',request,ReceiveServerData,context,null,false)}// -->
    4
    </script>

    总结:基于.NET的无刷新页面,其实是实现了 System.Web.UI.ICallbackEventHandler接口的PAGE类,使用这种方法,可以极大的提升WEB程序的性能
  • 相关阅读:
    HTML5简介
    C#面向对象设计模式纵横谈(2):Singleton 单件(创建型模式)
    C#结构体和字节数组的转换
    UML学习站点推荐
    C#面向对象设计模式纵横谈(1):面向对象设计模式与原则
    将WinCE5.0模拟器连接到VS2005[转]
    【转】转载:想学英语的好好留着!
    asp.net页面编码问题
    SQL Server 2005 Compact Edition移动开发指南[转]
    小议Windows CE 的下浏览器配置[转]
  • 原文地址:https://www.cnblogs.com/njj10/p/880604.html
Copyright © 2020-2023  润新知