四种局部刷新技术的比较

小咪咪 2022-08-23 14:48 19阅读 0赞

本文转自：[http://12f3210.blog.163.com/blog/static/2493073200711665447578/][http_12f3210.blog.163.com_blog_static_2493073200711665447578]

四种局部刷新技术的比较

A:iframe技术:

B:javascript技术

C:CallBack技术

D:Ajax技术

A:iframe技术:

属于最慢的一种:因为它属于完全的服务器端技术,会不断的与服务器端进行交互

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

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

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
<head runat="server">  
<title>无标题页</title>  
<script type="text/javascript" language="javascript">  
function Search()  
\{  
var city = document.getElementById("TextBox1").value;  
if(city != "")  
\{  
document.getElementById("iframe1").src = "myframe.aspx?city="+city;  
\}  
\}  
</script>  
</head>  
<body>  
<form id="form1" runat="server">  
<div>  
&nbsp;  
</div>  
<div style="width:100px; height:100px; vertical-align:middle; text-align:center">  
<table style="width:549px">  
<tr>  
<td colspan="2" style="font-weight:bold; color:\#0000cc">  
Iframe实现局部刷新  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td>  
城市名称:  
</td>  
<td>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
</td>  
</tr>  
<tr>  
<td>  
</td>  
<td>  
<input id="Button2" style="width:153px" type="button" value="查询" οnclick="Search()" />  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
<iframe src="myframe.aspx" style="text-align:center" id="iframe1" width="100%" height="100%" frameborder="0" scrolling="no">  
</iframe>  
</td>  
<td style="height:52px">  
</td>  
</tr>  
</table>  
</div>  
</form>  
</body>  
</html>

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="myframe.aspx.cs" Inherits="myframe" %>

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

B:javascript技术

应该算最快的了,因为它采用完全客户端技术,不需要在运行过程中与服务器交互,但它第一次加载时需要加载全部需要的数据.然后还有一个缺点,就是:需要大量的javascript脚本,可能会使客户端编程胖客户端.

using System;  
using System.Text;  
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 Default2 : System.Web.UI.Page  
\{  
protected void Page\_Load(object sender, EventArgs e)  
\{  
StringBuilder myscript = new StringBuilder();  
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);  
\}

private string GetCityStr(string INcity)  
\{  
string city = "";  
switch (INcity)  
\{  
case "北京":  
city = "朝阳,海淀,东城,西城";  
break;  
case "上海":  
city = "浦东,静安,徐汇,虹口";  
break;  
case "济南":  
city = "历程,历下,时钟,天桥";  
break;  
\}  
return city;  
\}  
\}

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

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

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
<head runat="server">  
<title>无标题页</title>  
<script type="text/javascript" language="javascript">  
  
function FillData(strcity)  
\{  
document.getElementById("DropDownList1").options.length = 0;  
var indexofcity;  
var city;  
while(strcity.length > 0)  
\{  
indexofcity = strcity.indexof(",");  
if(indexofcity > 0)  
\{  
city = strcity.substring(0, indexofcity);  
strcity = strcity.substring(indexofcity +1);  
document.getElementById("DropDownList1").add(new Option(city, city));  
\}  
else  
\{  
document.getElementById("DropDownList1").add(new Option(strcity, strcity));  
break;  
\}  
\}  
\}  
</script>  
</head>  
<body>  
<form id="form1" runat="server">  
<div>  
&nbsp;  
</div>  
<div style="width:100px; height:100px; vertical-align:middle; text-align:center">  
<table style="width:549px">  
<tr>  
<td colspan="2" style="font-weight:bold; color:\#0000cc">  
Iframe实现局部刷新  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td>  
城市名称:  
</td>  
<td>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
</td>  
</tr>  
<tr>  
<td>  
</td>  
<td>  
<input id="Button2" style="width:153px" type="button" value="查询" οnclick="seekCity()" />  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
</tr>  
</table>  
</div>  
<asp:DropDownList ID="DropDownList1" runat="server">  
</asp:DropDownList>  
</form>  
</body>  
</html>

C:CallBack技术

利用.NET2.0提供的ICallbackEventHandler,用于指示控件可以作为服务器的回调事件的目标.

GetCallbackResult:主要是返回以控件为目标的回调事件的结果

RaiseCallbackEvent:主要是处理以控件为目标的回调事件.(即执行回调事件)

可以发现回调的功能概括为:从客户端接收一个数据参数,然后在服务器端获取这个参数,并执行一个实现所需功能的事件,最后返回客户端所需要的结果数据.要使控件具备此功能,它必须继承接口ICallbackEventHandler.

GetCallbackEventReference(Control c, string ,s1, string s2, string s3):获取服务器返回的结果

通常用在自定义的控件内,只要可以实现某控件的自动回调技术.

public partial class Default2 : System.Web.UI.Page, ICallbackEventHandler  
\{  
private string \_data;  
protected void Page\_Load(object sender, EventArgs e)  
\{

\#region ICallbackEventHandler 成员

public string GetCallbackResult()  
\{  
return \_data;  
throw new Exception("The method or operation is not implemented.");  
\}

public void RaiseCallbackEvent(string eventArgument)  
\{  
switch (eventArgument)  
\{  
case "北京":  
\_data = "朝阳,海淀,东城,西城";  
break;  
case "上海":  
\_data = "浦东,静安,徐汇,虹口";  
break;  
case "济南":  
\_data = "历程,历下,十种,天桥";  
break;  
\}  
throw new Exception("The method or operation is not implemented.");  
\}

\#endregion

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

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

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
<head runat="server">  
<title>无标题页</title>  
<script type="text/javascript" language="javascript">  
  
function FillData(strcity)  
\{  
var city = document.getElementById("TextBox1").value;  
<% =ClientScript.GetCallbackEventReference(this, "city", "FillDll", null) %>;  
\}  
  
function FillDll(strcity)  
\{  
document.getElementById("DropDownList1").options.length = 0;  
var indexofcity;  
var city;  
while(strcity.length > 0)  
\{  
indexofcity = strcity.indexof(",");  
if(indexofcity > 0)  
\{  
city = strcity.substring(0, indexofcity);  
strcity = strcity.substring(indexofcity +1);  
document.getElementById("DropDownList1").add(new Option(city, city));  
\}  
else  
\{  
document.getElementById("DropDownList1").add(new Option(strcity, strcity));  
break;  
\}  
\}  
</script>  
</head>  
<body>  
<form id="form1" runat="server">  
<div>  
&nbsp;  
</div>  
<div style="width:100px; height:100px; vertical-align:middle; text-align:center">  
<table style="width:549px">  
<tr>  
<td colspan="2" style="font-weight:bold; color:\#0000cc">  
Iframe实现局部刷新  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td>  
城市名称:  
</td>  
<td>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
</td>  
</tr>  
<tr>  
<td>  
</td>  
<td>  
<input id="Button2" style="width:153px" type="button" value="查询" οnclick="FillData()" />  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
</tr>  
</table>  
</div>  
<asp:DropDownList ID="DropDownList1" runat="server">  
</asp:DropDownList>  
</form>  
</body>  
</html>

D:Ajax技术

它算功能最完善的了.提供了异步对象XMLHttpRequest,可以实现只加载部分数据,而且有条件的选择数据,这些条件可以通过XMLDOM实现,也可以通过正则表达式实现.

<%@ Page Language="C\#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

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

<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]" >  
<head runat="server">  
<title>无标题页</title>  
<script type="text/javascript" language="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)  
\{  
if(xmlhttp.status == 200)  
\{  
FillData(xmlhttp.responseText);  
\}  
\}  
\}  
function FillDll(strcity)  
\{  
document.getElementById("DropDownList1").options.length = 0;  
var indexofcity;  
var city;  
while(strcity.length > 0)  
\{  
indexofcity = strcity.indexof(",");  
if(indexofcity > 0)  
\{  
city = strcity.substring(0, indexofcity);  
strcity = strcity.substring(indexofcity +1);  
document.getElementById("DropDownList1").add(new Option(city, city));  
\}  
else  
\{  
document.getElementById("DropDownList1").add(new Option(strcity, strcity));  
break;  
\}  
\}

</script>  
</head>  
<body>  
<form id="form1" runat="server">  
<div>  
&nbsp;  
</div>  
<div style="width:100px; height:100px; vertical-align:middle; text-align:center">  
<table style="width:549px">  
<tr>  
<td colspan="2" style="font-weight:bold; color:\#0000cc">  
Iframe实现局部刷新  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td>  
城市名称:  
</td>  
<td>  
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
</td>  
</tr>  
<tr>  
<td>  
</td>  
<td>  
<input id="Button2" style="width:153px" type="button" value="查询" οnclick="getData()" />  
</td>  
<td>  
</td>  
</tr>  
<tr>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
<td style="height:52px">  
</td>  
</tr>  
</table>  
</div>  
<asp:DropDownList ID="DropDownList1" runat="server">  
</asp:DropDownList>  
</form>  
</body>  
</html>

public partial class Default2 : System.Web.UI.Page  
\{  
protected void Page\_Load(object sender, EventArgs e)  
\{  
\}  
\}

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 datapage : System.Web.UI.Page  
\{  
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;  
\}  
\}  
\}

[http_12f3210.blog.163.com_blog_static_2493073200711665447578]: http://12f3210.blog.163.com/blog/static/2493073200711665447578/
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml