实现仿Windows程序无刷新的Web应用（Inber 个人收藏）

来源：互联网发布：氮泵对身体的危害知乎编辑：程序博客网时间：2024/04/27 18:18

实现仿Windows程序无刷新的Web应用 http://www.cnblogs.com/shangmeizhai/archive/2004/09/09/41421.aspx

现在一部分Web程序开发人员在做B/S程序时，其界面表现上模仿了C/S结构的windows程序，使得其程序看起来既美观又有创意，他们努力把IE的外观屏蔽掉，比如去除了IE的菜单栏，去除了IE的工具栏，甚至用ActiveX控件使页面全屏显示等等，这样，使得他们设计出的界面完全没有了IE的影子，使得大多用户看到程序的操作界面后都会有C/S程序的感觉，其新奇的效果确是比普通的Web界面迎得了更多的客户满意度。

Web程序毕竟是与Windows程序有着本质的区别，要想完全模仿windows程序的操作界面还是有一定的难度的。比如，Web程序中，其前台与后台进行交互时会使页面刷新，刷新过程中屏幕会有短时间的闪烁。我们知道Windows程序是不会有这种现象的，那么有人就问，能否把Web程序模仿得与windows更像一些，不让页面刷新呢？答案是肯定的，下面我就来介绍一下怎么样来实现Web页面的无刷新。

值得说明的是，我介绍的这种方法也许并不是最好的解决办法，但却是一个有效的方法。那么，怎样使页面不刷新却还要前台与后台进行数据交换呢？

我的解决方法是：前台用JavaScript来编写，后台的业务逻辑用本地的WebService来编写，然后在提交数据时不要用submit来提交页面，而要用JavaScript来调用本地的WebService,值得注意的是，用JavaScript来调用后台的WebService并不会造成页面的刷新，却可以使前台与后台进行数据交换。这种设计就解决了我们提出的问题。

接下来我用MSDN上的一段代码示例具体怎样用JavaScript来调用WebService:摘自

<SCRIPT language="JavaScript">
// All these variables must be global,
// because they are used in both init() and onresult().
var iCallID = 0;
var intA = 5;
var intB = 6;

function init()
{
    // Establish the friendly name "MyMath" for the WebServiceURL
    service.useService("/services/math.asmx?WSDL","MyMath");
    // The following method doesn't specify a callback handler, so onWSresult() is used
    iCallID = service.MyMath.callService("add", intA, intB);
}

function onWSresult()
{
    // if there is an error, and the call came from the call() in init()
    if((event.result.error)&&(iCallID==event.result.id))
    {
        // Pull the error information from the event.result.errorDetail properties
        var xfaultcode   = event.result.errorDetail.code;
        var xfaultstring = event.result.errorDetail.string;
        var xfaultsoap   = event.result.errorDetail.raw;

        // Add code to handle specific error codes here
    }
    // if there was no error, and the call came from the call() in init()
    else if((!event.result.error) && (iCallID == event.result.id))
    {
        // Show the arithmetic!
        alert(intA + ' + ' + intB + ' = ' + event.result.value);
    }
    else
    {
        alert("Something else fired the event!");
    }
}
</SCRIPT>
<body onload="init()">
<div id="service" style="behavior:url(webservice.htc)" onresult="onWSresult()">
</div>
</body>
<%@ WebService Language="C#" class=MyMath %>

using System;
using System.Web.Services;

public class MyMath {

   [WebMethod]
   public int add(int a, int b)
   {
       return a + b;
   }

   [WebMethod]
   public int subtract(int a, int b)
   {
       return a - b;
   }

}
如上述代码，解决了不用提交就可以使前台数据调用后台WebService的方法处理数据并返回结果了。关键技术既然解决了，无刷新也就简单了。

比如需要Web页面上显示一个包含了多条记录的列表，然后列表上面有些功能按钮，进行添加删除修改。怎么做呢？

首先，我们可以利用JavaScript调用后台WebService的方法取得列表的所有数据，返回结果可以返回一个XML对象（DOM），然后再在前台用JavaScript把这个返回的XML对象解析，操纵Table等HTML表单元素，把解析出的数据显示成列表的样子。

其次，列表上面的功能按钮不要使用服务器控件，而要用HTML控件，在其onclick属性上写个JavaScript函数，比如”AddData()”.这样，当用户点击此按钮后就会自动执行JavaScript的AddData()函数了，我们可以在此函数的定义处调用后台的WebService的方法WS_AddData()来进行数据库的添加操作。

再次，需要注意的是，当调用完WebService后还要立即用JavaScript操作表单元素把新增加的数据添加到显示列表上。这样就实现了页面没有刷新，而页面上的数据却做了数据库操作且即时变化了，这就是无刷新效果了。

如上所述，修改与删除也均是这样的原理，前台的数据变化靠JavaScript操纵表单来实现（这也是JavaScript的犀利之处）,而后台的所有与业务逻辑相关的数据库操作都用WebService来实现，然后用XML对象使JavaScript与WebService进行数据交换。

这样，一个仿Windows程序无页面刷新Web应用就建成了。当然，这样的方法需要开发人员对JavaScript的操纵能力非常强。

最后需要说的是，这样的解决方案有其好处，当然也有其不利的地方，就是虽然达到了新奇的效果，但是相应的编写前台代码的工作量会大大增加，同时也不能利用Web服务器控件提交事件的功能了。

我觉得这种方法如果根据需要适当加以应用确会产生意想不到的效果。