四种局部刷新技术的比较

最新推荐文章于 2024-04-23 00:29:43 发布
最新推荐文章于 2024-04-23 00:29:43 发布
阅读量6k 收藏 5
点赞数 4
分类专栏： asp.net 文章标签： textbox server javascript iframe xhtml string
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/manimanihome/article/details/3085914
版权

本文转自：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>
        &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">

<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>
        &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):获取服务器返回的结果

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

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>
        &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">

<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>
        &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>

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;
        }
    }
}

马立弘
关注
专栏目录
四种局部刷新技术
09-25
内含：iframe、js、callback和ajax四种局部刷新技术
局部刷新
your_baobei的专栏
12-03 660
<br /><br />局部刷新技术（2）<br />一、XML文档与 XML DOM<br />XML 文档<br />XML DOM (Document Object Model) 树<br /><?xml version="1.0" encoding="UTF-8" ?><br /><课程><br /><公共课编号="C00001" 必修="false"><br /><名称类型="string" 宽度="50">高等数学</名称><br /><学分类型="decimal">5.0</学分><br />
AJAX局部刷新技术
热门推荐
ydb7459022的专栏
07-12 1万+
作为J2EE开发人员，我们似乎经常关注“后端机制（backendmechanics）”。我们通常会忘记，J2EE的主要成功之处在Web应用程序方面；许多原因使得人们喜欢利用Web开发应用程序，但主要还是因为其易于部署的特点允许站点以尽可能低的成本拥有上百万的用户。遗憾的是，在过去
02-Ajax-局部刷新技术
tamakiakoo
03-13 190
Ajax Ajax：（Asynchronous JavaScript And XML）指异步 JavaScript 及 XML 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基于JavaScript、XML、HTML、CSS新用法 Ajax：只刷新局部页面的技术 JavaScript：更新局部的网页 XML：一般用于请求数据和响应数据的封装 XMLH...
新一代Ajax API Fetch 局部刷新技术
沐枫
05-07 1221
前后端交互，异步加载等首先想到的ajax，好像在我们的认知中除了ajax就没有别的了。其实我们都被这种观念误导了，ajax只是对于XMLHttpRequest的一种封装，我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。而Fetch API则是XMLHttpRequest的最新替代技术， 它是W3C的正式标准。 这...
页面四种局部刷新技术.txt
10-19
从给定的文件标题、描述、标签以及部分内容来看，主要涉及了四种页面局部刷新的技术，包括iframe、JavaScript、Callback（回掉函数）以及Ajax。下面将对这四种技术进行详细解析： ### 1. iframe（内联框架） ...
ajax局部刷新实例 (三种方法推荐)
10-20
### Ajax局部刷新技术介绍 Ajax（Asynchronous JavaScript and XML）是一种能够实现页面异步更新的技术，它允许在不重新加载整个页面的情况下，对网页的某部分进行更新。这通过在客户端和服务端之间使用...
HTML页面局部刷新的实现代码
09-22
局部刷新技术提高了网页的交互性和实时性，减少了不必要的网络通信，使得用户在查看或操作页面时无需等待整个页面的加载。在实际开发中，可以结合使用事件响应刷新和局部自动刷新，根据需求灵活调整刷新频率和触发...
jQuery+ajax实现局部刷新的两种方法
10-19
本文将介绍使用jQuery和ajax来实现页面局部刷新的两种方法。对于jQuery，它是一个快速、小巧、功能丰富的JavaScript库，通过它可以轻松操作DOM，而ajax允许我们实现无需重新加载整个页面就可以更新网页的部分内容。 ...
java web开发：ajax技术（一）——局部刷新技术的实现
自由先锋
02-25 8570
一 什么是Ajax Ajax：AsynchronousJavaScript And Xml——异步JavaScript和XML技术，还有一个比较通用的名称：页面局部刷新技术；是一种把多种技术融合到一起的JavaScript框架之一 二 Ajax主要用在哪里 Ajax的局部刷新是应用相对比较广泛的功能之一 比如常见搜索引擎的搜索建议（如在百度搜索页面中输入具体的字符后弹出匹配的关键词等等
后台局部刷新
zgscwjm的专栏
05-10 452
对于常见的后台布局(左边菜单,右边内容) 要保证右边内容切换,而左边不变可以采用iframe和Jquery的load 方法.推荐采用load方法,load 方法 返回的界面里面不需要重新加载资源
【AJAX】局部刷新技术
m0_50414588的博客
04-01 607
What is AJAX? AJAX代表A同步Ja vaScript和X ML。 AJAX是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。 Ajax使用XHTML作为内容，CSS使用文档对象模型和JavaScript进行动态内容显示。 传统的Web应用程序使用同步请求向服务器和从服务器发送信息。 这意味着您填写表单，点击提交，然后从服务器获取包含新信息的新页面。 使用AJAX，当您点击提交时，JavaScript将向服务器
【Ajax-异步刷新技术】什么是Ajax？如何整合进JavaWeb项目？这一篇教你快速实现！
最新发布
m0_74187147的博客
04-23 1812
ajax技术称为“异步刷新技术”，也称为“局部刷新技术”，它可以在不提交整个页面的情况下，实现前后台的交互。在没有ajax请求之前，要更新页面上的任何数据，都必须将整个页面刷新一次才可以。有了ajax技术以后，要更新哪一块区域的数据，就只单独刷新这一小块的数据即可，其他区域的数据不用更新，这种刷新方式就是局部刷新。ajax是专门用来发送异步请求的一种技术。
Vue中实现【组件局部刷新】及【页面刷新】
qq_39454432的博客
04-09 4259
Vue中实现【组件局部刷新】及【页面整体刷新】
JQuery 再谈ajax局部刷新
沉默王二
09-28 1万+
JQuery 再谈ajax局部刷新
asp.net实现页面局部自动刷新
CSDN_Sweet的博客
07-19 4305
asp.net客户端工作在asp.net中要实现页面局部刷新，首先需要在 .aspx 页面中加入(要加在from里面): <asp:ScriptManager ID="ScriptManager1" runat="server" EnableCdn="True"> </asp:ScriptManager> 这个控件就像是一个页面控件管理器一样，然后在需要局部刷新的位置加上Update
AJAX：实现局部刷新
qq_43568982的博客
09-06 6538
开始时间：2021-09-04 AJax
vs中使用ajax局部刷新,[转载].NET ASP.NET 中web窗体（.aspx）利用ajax实现局部刷新
weixin_29323977的博客
08-05 315
之前开发的一套系统中用到了大量的 checkboxList 控件，但是每次选定之后都会刷新整个页面，用户体验很差，百度了之后查到这篇文章，尝试了一下可以实现，所以转载了过来，记录一下，也给其他有相同困扰的朋友一个解决的办法。********************分割线********************C#所有runat="server"的控件都会造成整个界面的刷新，如果想实现局部刷新，可以...
Web页面分页显示+局部刷新
sinat_34045444的博客
12-15 4040
Web页面分页展示+局部刷新 整合handlebars.js+自定义分页按钮jquery 设计背景： 在日常的Web开发中，我们经常做的一件事就是分页设计；Web页面分页展示可以给用户非常良好的体验，所以做好分页将是程序员的一项基本功。分页的后台设计，使用过MyBatis、Hibernate、JFinal等框架的童鞋都知道，后台分页查询只需要套用模板代码，操作极其简单，如果用原生sql语句编写对于...
AJAX局部刷新入门教程
"AJAX局部刷新教程，适合初学者，包含代码讲解和实现，旨在帮助理解AJAX的基本概念和如何实现局部刷新。" 在Web开发中，AJAX（异步JavaScript和XML）是一种核心技术，允许网页在不重新加载整个页面的情况下与服务器...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值