4种页面无刷新更新数据的技术

来源:互联网 发布:优易 抢单软件 编辑:程序博客网 时间:2024/05/01 13:09

1.IFrame 实现无刷新
   <script language="javascript">
       function Search()
       {
            var city=document.getElementById("TextBox1").value;
            if(city !="")
            {
               document.getElementById("iframe1").src="myframe.aspx?city=" +city;
            }
       }
    </script>

 <iframe src="myframe.aspx" style="TEXT-ALIGN: center" id="iframe1" width="100%" height="100%"  frameborder="0" scrolling="no"/>

    protected void Page_Load(object sender, EventArgs e)
    {
        //获取传递过来的参数
        string city = Request.QueryString["city"];
        //判断城市名
        switch (city)
        {
            case "北京":
                //填充相关的区域
                DropDownList1.Items.Clear();
                DropDownList1.Items.Add("朝阳");
                DropDownList1.Items.Add("海淀");
                DropDownList1.Items.Add("东城");
                DropDownList1.Items.Add("西城");
                break;

 


2. js方法实现无刷新 Page.ClientScript.RegisterClientScriptBlock

        //创建字符串连接对象
        StringBuilder myscript = new StringBuilder();
        //使用字符串组织一个JavaScript脚本方法
        myscript.Append("function seekCity()    {/n");
        myscript.Append("var city=document.getElementById('TextBox1').value; /n");
        myscript.Append("switch(city)       {/n");
        myscript.Append("case '北京': /n");
        myscript.Append("FillData('" + GetCityStr("北京") +"'); /n");
        myscript.Append("break; /n");
        myscript.Append("case '上海': /n");
        myscript.Append("FillData('" + GetCityStr("上海") + "'); /n");
        myscript.Append("break; /n");
        myscript.Append("case '济南': /n");
        myscript.Append("FillData('" + GetCityStr("济南") + "'); /n");
        myscript.Append("break; }/n");
        myscript.Append(" }/n");
        //使用注册脚本方法在页面的客户端,注册这个字符串编写的脚本方法。
        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "seekCity", myscript.ToString(),true);

3. 使用CallBack技术
    <script type="text/javascript">
  function FillData()
        {
           var city=document.getElementById("TextBox1").value;
     
            <% =this.ClientScript.GetCallbackEventReference(this,"city","FillDll",null)  %>;
  //向后台传送数据 数据是:city    数据返回后,前台处理数据的方法是:FillDll
        }

        function FillDll(strcity)
        {

   </script>
 public partial class _Default : System.Web.UI.Page,ICallbackEventHandler //类继承接口 并实现接口方法
 {
  public string GetCallbackResult()
      {
          //返回处理后的数据
          return _data;
      }

      public void RaiseCallbackEvent(string eventArgument)
       {
          //判断传递过来的参数
           switch (eventArgument)
           {
              case "北京":
                   _data = "朝阳,海淀,东城,西城";
                   break;
            case "上海":
                   _data = "浦东,静安,徐汇,虹口";
                   break;
              case "济南":
                   _data = "历城,历下,市中,天桥";
                   break;
          }
       }
 }


4. 使用ajax技术实现无刷新

  <script type="text/javascript">
    var xmlhttp;
    function getData()
    {
      //获取用户填写的名称
      var city=document.getElementById("txt").value;
      //创建异步调用对象
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      //将对象状态与事件相关联
      xmlhttp.onreadystatechange=statechange;
      //加载要链接的页面
      xmlhttp.Open("POST","datapage.aspx?city=" +city,true);
      //发送请求
      xmlhttp.Send();
    }
    function statechange()
    {
      //判断异步调用是否已经完成
      if(xmlhttp.readystate==4)
      {
        //判断完成的提示代码是否是OK状态
        if(xmlhttp.status==200)
        {
           //将返回数据作为参数,传递给填充方法
           FillData(xmlhttp.responseText);
        }
      }
    }
  datapage.aspx页面

    protected void Page_Load(object sender, EventArgs e)
    {
        //获取传递过来的参数
        string city =Request.QueryString["city"];
        Response.Clear();
        //判断城市名
        switch (city)
        {
            case "beijing":
                //填充相关的区域
                Response.Write("朝阳,海淀,东城,西城");
                break;
            case "shanghai":
                Response.Write("浦东,静安,虹口,徐汇");
                break;
            case "jinan":
                Response.Write("历下,历城,市中,天桥");
                break;
        }
    }

 
原创粉丝点击