4种无刷新页面的技术

转自：https://wangguorui89.iteye.com/blog/491757

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()　　{ ");
　　　　myscript.Append("var city=document.getElementById('TextBox1').value; ");
　　　　myscript.Append("switch(city)　　　 { ");
　　　　myscript.Append("case '北京': ");
　　　　myscript.Append("FillData('" + GetCityStr("北京") +"'); ");
　　　　myscript.Append("break; ");
　　　　myscript.Append("case '上海': ");
　　　　myscript.Append("FillData('" + GetCityStr("上海") + "'); ");
　　　　myscript.Append("break; ");
　　　　myscript.Append("case '济南': ");
　　　　myscript.Append("FillData('" + GetCityStr("济南") + "'); ");
　　　　myscript.Append("break; } ");
　　　　myscript.Append(" } ");
　　　　//使用注册脚本方法在页面的客户端，注册这个字符串编写的脚本方法。
　　　　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();