局部无刷新总结[转]

一、 使用Iframe 实现局部无刷新
说明:有两个页面:Iframe_Default.aspx、Iframe_Show.aspx
   1.Iframe_Default.aspx
ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#"   AutoEventWireup="true"  CodeFile="Iframe_Default.aspx.cs" Inherits="_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > Iframe 实现局部无刷新DEMO_城市 </ title >
ExpandedBlockStart.gifContractedBlock.gif    
< script  language ="javascript" >
     
function Search()
ExpandedSubBlockStart.gifContractedSubBlock.gif     
{
       
var city = document.getElementById("TextBox1").value;
       
if (city!="")
ExpandedSubBlockStart.gifContractedSubBlock.gif       
{
         document.getElementById(
"iframe1").src="iframe_show.aspx?city="+city;
       }

     }

    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
        
< strong > 使用Iframe 实现局部无刷新DEMO < br  />
        
</ strong > 城市名称: < asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox > &nbsp;
ExpandedBlockStart.gifContractedBlock.gif        
<% --<asp:Button ID="Button1" runat="server" Text="查 询" OnClientClick="Search()" />-- %>
        
< input  id ="Button1"  type ="button"  value ="查 询"  onclick ="Search()"   />
        
< br  />
    
< iframe  src ="Iframe_Show.aspx"  style ="text-align:left"  id ="iframe1"  width ="200px"  height ="50"  frameborder ="no"  scrolling ="no"   />
    
    
</ div >
    
</ form >
</ body >
</ html >

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  _Default : System.Web.UI.Page 
ExpandedBlockStart.gifContractedBlock.gif
{
    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{

    }

}



   2.Iframe_Show.aspx
ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#"  AutoEventWireup="true" CodeFile="Iframe_Show.aspx.cs" Inherits="Iframe_Show"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > Iframe 实现局部无刷新DEMO_城镇 </ title >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
         城 镇:
< asp:DropDownList  ID ="DropDownList1"  runat ="server" >
        
</ asp:DropDownList ></ div >
    
</ form >
</ body >
</ html >

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  Iframe_Show : System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
{
    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{

        
if (Request["city"!= null)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            
string strCity = Request["city"];
            
switch (strCity)
ExpandedSubBlockStart.gifContractedSubBlock.gif            
{
                
case "武汉":
                    
this.DropDownList1.Items.Clear();
                    
this.DropDownList1.Items.Add("武昌");
                    
this.DropDownList1.Items.Add("汉口");
                    
this.DropDownList1.Items.Add("洪山");
                    
break;
                
case "钟祥":
                    
this.DropDownList1.Items.Clear();
                    
this.DropDownList1.Items.Add("郢中");
                    
this.DropDownList1.Items.Add("胡集");
                    
this.DropDownList1.Items.Add("双河");
                    
break;
                
default:
                    
break;

            }


        }

    }

}


   3.Result:


二、 .net2.0+JavaScript实现局部无刷新
说明:只有一个页面JavaScript_Default.aspx
   1.JavaScript_Default.aspx
ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScript_Default.aspx.cs" Inherits="JavaScript_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > .net2.0+JavaScript实现局部无刷新 </ title >
ExpandedBlockStart.gifContractedBlock.gif    
< script  language ="javascript" >
        
function FillData(strCity)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
           document.getElementById(
"DropDownList1").options.length=0;
           
var indexofcity;
           
var city;
           
//分割传递来的字符串
           while(strCity.length>0)
ExpandedSubBlockStart.gifContractedSubBlock.gif           
{
             
//判断是否是最后一个字符串
             indexofcity = strCity.indexOf(",");
             
if (indexofcity > 0)
ExpandedSubBlockStart.gifContractedSubBlock.gif             

               city 
= strCity.substring(0,indexofcity);
               strCity 
= strCity.substring(indexofcity+1);
               
//填充DropDownList1
               document.getElementById("DropDownList1").add(new Option(city,city));
             }

             
else
ExpandedSubBlockStart.gifContractedSubBlock.gif             
{
               document.getElementById(
"DropDownList1").add(new Option(strCity,strCity));
               
break;
             }

           }

        }

    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
        
< div >
            
< strong >
            .net2.0+JavaScript实现局部无刷新Demo
< br  />
            
</ strong >
            城市名称:
< asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
ExpandedBlockStart.gifContractedBlock.gif            
<% --<asp:Button ID="Button1" runat="server" Text="查 询" OnClientClick="Search()" />-- %>
            
< input  id ="Button1"  type ="button"  value ="查 询"  onclick ="Search()"   />
            
< br  />
              城镇:
< asp:DropDownList  ID ="DropDownList1"  runat ="server" >
            
</ asp:DropDownList ></ div >
    
    
</ div >
    
</ form >
</ body >
</ html >

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  JavaScript_Default : System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
{
    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
        
//创建字符串连接对象
        System.Text.StringBuilder cityScript = new System.Text.StringBuilder();
        
//使用字符串组织一个JavaScript脚本方法,FillData()脚本方法在客户端页面定义
        cityScript.Append("function Search() \n");
        cityScript.Append(
"{ var city=document.getElementById('TextBox1').value; \n");
        cityScript.Append(
"  switch (city) \n");
        cityScript.Append(
"  { case '武汉': \n");
        cityScript.Append(
"      FillData('" + GetCityStr("武汉"+ "'); \n");
        cityScript.Append(
"      break; \n");
        cityScript.Append(
"    case '钟祥': \n");
        cityScript.Append(
"      FillData('"+GetCityStr("钟祥")+"'); \n");
        cityScript.Append(
"      break; \n");
        cityScript.Append(
"  } \n ");
        cityScript.Append(
"} \n");

        
//使用注册脚本方法在页面的客户端,注册这个字符串编写的脚本方法
        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "Search", cityScript.ToString(), true);
    }


    
private string GetCityStr(string _city)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
        
string strCity = null;
        
switch (_city)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            
case "武汉":
                strCity 
= "武昌,汉口,洪山";
                
break;
            
case "钟祥":
                strCity 
= "郢中,胡集,双河";
                
break;
            
default:
                
break;
        }

        
return strCity;
    }

}


   2.Result:


三、 使用.net回调(CallBack)技术实现局部刷新
   说明:有一个页面CallBack_Default.aspx
   1.CallBack_Default.aspx
ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="CallBack_Default.aspx.cs" Inherits="CallBack_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > 使用.net回调(CallBack)技术实现局部刷新 </ title >
ExpandedBlockStart.gifContractedBlock.gif    
< script  language ="javascript" >
        
function FillData()
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            
var city = document.getElementById("TextBox1").value;
            
<% =ClientScript.GetCallbackEventReference(this,"city","FillDll",null%>;
        }

        
         
function FillDll(strCity)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
           document.getElementById(
"DropDownList1").options.length = 0;
           
var indexofcity;
           
var city;
           
//分割传递来的字符串
           while(strCity.length>0)
ExpandedSubBlockStart.gifContractedSubBlock.gif           
{
             
//判断是否是最后一个字符串
             indexofcity = strCity.indexOf(",");
             
if (indexofcity > 0)
ExpandedSubBlockStart.gifContractedSubBlock.gif             

               city 
= strCity.substring(0,indexofcity);
               strCity 
= strCity.substring(indexofcity+1);
               
//填充DropDownList1
               document.getElementById("DropDownList1").add(new Option(city,city));
             }

             
else
ExpandedSubBlockStart.gifContractedSubBlock.gif             
{
               document.getElementById(
"DropDownList1").add(new Option(strCity,strCity));
               
break;
             }

           }

        }

    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
        
< strong > 使用.net回调(CallBack)技术实现局部刷新 </ strong >< br  />
        城市名称:
< asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
        
< input  id ="Button1"  type ="button"  value ="查 询"  onclick ="FillData()"   />< br  />
        城镇:
< asp:DropDownList  ID ="DropDownList1"  runat ="server" >
        
</ asp:DropDownList ></ div >
    
</ form >
</ body >
</ html >

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  CallBack_Default : System.Web.UI.Page,ICallbackEventHandler
ExpandedBlockStart.gifContractedBlock.gif
{
    
private string _data;

    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{

    }


    
public string GetCallbackResult()
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
        
return _data;
    }


    
public void RaiseCallbackEvent(string eventArgument)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
        
switch (eventArgument)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            
case "武汉":
                _data 
= "武昌,汉口,洪山";
                
break;
            
case "钟祥":
                _data 
= "郢中,胡集,双河";
                
break;
            
default:
                
break;
        }

    }


}


   2.Result:


四、使用Ajax技术实现局部刷新
说明:有两个页面Ajax_Default.aspx、Ajax_Response.aspx
   1.Ajax_Default.aspx

ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Ajax_Default.aspx.cs" Inherits="Ajax_Default"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > 无标题页 </ title >
ExpandedBlockStart.gifContractedBlock.gif    
< script  language ="javascript" >
        
var xmlHttp;
        
function GetData()//创建异步对象
ExpandedSubBlockStart.gifContractedSubBlock.gif
        {
            
//获取城市名称
            var city = document.getElementById("TextBox1").value;
            
//创建异步调用对象
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            
//将对象状态与事件关联
            xmlHttp.onreadystatechange = StateChange;
            
//加载要链接的页面(响应的页)并将参数值编码(encodeURI)
            xmlHttp.Open("POST","Ajax_Response.aspx?city="+encodeURI(city),true);
            xmlHttp.Send();
            
        }

        
        
function StateChange()//异步调用的状态
ExpandedSubBlockStart.gifContractedSubBlock.gif
        {
            
//判断异步调用是否已经完成
            if (xmlHttp.readystate == 4)
ExpandedSubBlockStart.gifContractedSubBlock.gif            
{
                
//判断完成的提示代码是否是OK状态
                if (xmlHttp.status ==200)
ExpandedSubBlockStart.gifContractedSubBlock.gif                
{
                    
//将返回数据作为参数,传递给填充的方法
                    FillData(xmlHttp.responseText);
                }

            }

        }
  
        
        
function FillData(strCity)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
           document.getElementById(
"DropDownList1").options.length = 0;
           
var indexofcity;
           
var city;
           
//分割传递来的字符串
           while(strCity.length>0)
ExpandedSubBlockStart.gifContractedSubBlock.gif           
{
             
//判断是否是最后一个字符串
             indexofcity = strCity.indexOf(",");
             
if (indexofcity > 0)
ExpandedSubBlockStart.gifContractedSubBlock.gif             

               city 
= strCity.substring(0,indexofcity);
               strCity 
= strCity.substring(indexofcity+1);
               
//填充DropDownList1
               document.getElementById("DropDownList1").add(new Option(city,city));
             }

             
else
ExpandedSubBlockStart.gifContractedSubBlock.gif             
{
                lastCity
=strCity.substring(0,2);
               document.getElementById(
"DropDownList1").add(new Option(lastCity,lastCity));
               
break;
             }

           }

        }
      
        
    
</ script >
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
        
< strong >
        使用Ajax技术实现局部刷新
</ strong >< br  />
        城市名称:
< asp:TextBox  ID ="TextBox1"  runat ="server" ></ asp:TextBox >
ExpandedBlockStart.gifContractedBlock.gif        
<% --<asp:Button ID="Button1" runat="server" Text="查 询" OnClientClick="GetData()" />-- %>
        
< input  id ="Button1"  type ="button"  value ="查 询"  onclick ="GetData()"   />
        
< br  />
        城镇:
< asp:DropDownList  ID ="DropDownList1"  runat ="server" >
        
</ asp:DropDownList ></ div >
    
</ form >
</ body >
</ html >

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  Ajax_Default : System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
{
    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{

    }

}


   2.Ajax_Response.aspx

ExpandedBlockStart.gif ContractedBlock.gif <% @ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax_Response.aspx.cs" Inherits="Ajax_Show"  %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
    
< title > 无标题页 </ title >   
</ head >
< body >
    
< form  id ="form1"  runat ="server" >
    
< div >
    
    
</ div >
    
</ form >
</ body >
</ html >

 

using  System;
using  System.Data;
using  System.Configuration;
using  System.Collections;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;

public  partial  class  Ajax_Show : System.Web.UI.Page
ExpandedBlockStart.gifContractedBlock.gif
{
    
protected void Page_Load(object sender, EventArgs e)
ExpandedSubBlockStart.gifContractedSubBlock.gif    
{
        
if (Request["city"!= null)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
{
            
string city = Server.HtmlDecode(Request["city"]);//html解码
            Response.Clear();
            
switch (city)
ExpandedSubBlockStart.gifContractedSubBlock.gif            
{
                
case "wuhan":
                    Response.Write(
"武昌,汉口,洪山");
                    
break;
                
case "钟祥":
                    Response.Write(
"郢中,胡集,双河");
                    
break;
                
default:
                    
break;
            }

        }

    }

}

   3.Result:

 

http://files.cnblogs.com/kingjiong/NoRefreshDemo.rar

转载于:https://www.cnblogs.com/kingjiong/archive/2008/08/28/1278711.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值