四种局部刷新技术的比较
来源：互联网 发布：6324倒闭知乎 编辑：程序博客网 时间：2024/06/10 16:09
本文转自：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">
<html xmlns="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>
</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="查询" onclick="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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList></div>
</form>
</body>
</html>
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">
<html xmlns="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>
</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="查询" onclick="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):获取服务器返回的结果
通常用在自定义的控件内,只要可以实现某控件的自动回调技术.
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, 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">
<html xmlns="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>
</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="查询" onclick="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">
<html xmlns="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>
</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="查询" onclick="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>
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)
{
}
}
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;
}
}
}
- 四种局部刷新技术的比较
- 几种局部刷新技术
- 两种Web页面局部刷新技术的简单较量
- iframe局部刷新技术的<<<STR
- 局部刷新技术
- AJAX局部刷新技术
- AJAX局部刷新技术:
- 两种Web页面局部刷新技术IFRAME与XmlHttpRequest
- 解析：四种常见的网络存储技术的比较
- 局部刷新的两种实现方式
- 实现局部刷新的三种方法
- .net 的局部刷新
- RecyclerView的局部刷新
- listview的局部刷新
- ListView的局部刷新
- ListView的局部刷新
- listview的局部刷新
- ListView的局部刷新
- 开始第一次
- JFreeReport生成 html、pdf文件中文乱码的解决办法
- 分析函数——lead与lag
- virtual
- 去除Html标签
- 四种局部刷新技术的比较
- SWT 和 JFace，第 1 部分: 简介
- 数字电视共享器的系统应用
- C#数据类型转换
- [英语阅读]美调查：半数雇员担心“饭碗”不保
- 由TCP/IP协议遭破坏而造成的网络故障----Remote Access Connection Manager服务出现3221356592(0xc0020030)错误
- 指针
- 域名查询源码
- [双语阅读]美研究：网络搜索锻炼大脑
