65.9K
CodeProject 正在变化。 阅读更多。
Home

Salajax：解决 AJAX Web 应用程序的后退按钮和书签的简单 Ajax 库

Nigel Liefrink 3
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.53/5 (9投票s)

2007年7月11日

CPOL

4分钟阅读

viewsIcon

130260

downloadIcon

1293

一篇关于 AJAX [异步 JavaScript 和 XML] 的文章，通过一个简化的类提供后退按钮和书签功能。使用 JavaScript 编写，在 ASP.NET 中演示，并且可以与任何服务器端脚本语言一起使用。

Screenshot - ajax.gif

引言

Salajax 是一个简化的 Ajax 库，可以处理后退按钮、书签，并且极其易于使用。是的，Ajax 很棒。它确实存在一些小问题，比如后退按钮不起作用以及无法使用书签。这个库提供了一个简单的类来处理所有这些问题以及更多问题，而无需您过多考虑。

Simple Ajax Library Ajax 类 (Salajax) 试图

  • 使后退按钮与 Ajax 一起工作
  • 使书签与 Ajax 一起工作
  • 运行 Ajax 响应中包含的 JavaScript
  • 保留 .NET Viewstate
  • 将表单作为 Ajax 请求提交
  • 指定 OnStart 和 OnEnd JavaScript 函数进行调用
  • 指定一个 OnError JavaScript 函数，在 Ajax 响应出错时调用
  • 设置更新 div 时显示的 HTML（通过 Ajax 请求）
  • 设置发生 Ajax 请求错误时显示的 HTML
  • 极其易于使用

基本上，我希望 Salajax 类能够非常轻松地完成您使用 Ajax 可能想做的任何事情。

背景

本文介绍了一个用 JavaScript 编写的简化的 Ajax 库。希望许多开发人员会发现它很有用。Ajax 是一项令人兴奋的新技术，它将改变我们开发 Web 应用程序的方式。这是我写的关于 Ajax 的第一篇文章的介绍，介绍了一个只有两个方法的简化 Ajax 库。我称之为 SAL，代表 Simplified Ajax Library。您可以在 此处 阅读。

是的，Ajax 是当时的热门词。它将彻底改变 Web 和我们的应用程序开发方式。然后有人注意到了一些小问题，即后退按钮无法正常工作；用户很可能会回到他们之前访问的网站或感到困惑。此外，开发人员发现他们无法运行 Ajax 响应中返回的 JavaScript，以及更多问题。

因此，我决定构建下一个简化的 Ajax 库或 SAL 版本 2。一开始我想添加的功能是：使其成为一个独立的类，使后退按钮能够工作，处理 Viewstate，并提供与 SAL v1 的向后兼容性。在开发过程中，我添加了：OnEvents，在更新或发生错误时提供可自定义的 HTML，以及使书签能够工作。此外，更新多个部分似乎现在可以在不同的线程上运行。

并非所有代码都是我的。我在网上找到了一些非常适合的代码，并且可能对其进行了一些编辑。其中一个例子是哈希监听器类，我保留了原始作者的注释。然而，很多代码是我自己写的。我不能保证这将在所有浏览器上工作。它确实使用了大量复杂的 JavaScript 来使后退按钮等正常工作。我在 FireFox 2.0.0.3 和 IE 6.0.2900.2180 中进行了测试；它们都能很好地工作。

Using the Code

嗯，最初，您需要像这样在页面的 head 中包含 JS 文件

<script language="JavaScript" src="Salajax.js"></script>

这是 Salajax.js 类顶部的注释

/*
The Salajax Class.
Ajax class that allows use of the back button and bookmarks.
Written by Nigel Liefrink.

Usage:
    //set up the Salajax settings. Do this in the <head> of the page
    var SAL = new Salajax();
    sal.Debug = 0;
    sal.EnableBackButton(true); //turns on the back buttons.
    sal.EnableBookmarks(true); 
        //saves state in the clients cookies so bookmarks will work
        //provided they haven't deleted their cookies.
    sal.OnStart = 'TestOnStart()'; //enables a script to run before 
        //the request is made. e.g. change pointer/icon/loading section of 
        //page.
    sal.OnEnd = 'TestOnEnd()'; 
        //enables a script to run after the request is returned. 
        //e.g. change pointer/icon/loading section of page.
    sal.PresendHtml = '<img border="0" src="loading24-1.gif"/>';
        //When calling  setInnerHTMLFromAjaxResponse the div will 
        //be updated with this html, set to null to turn off this feature.
    sal.OnError = 'DefaultOnError()';
        //set a function to pass to if there is an error.
    sal.OnErrorHtml = 
        '<img border="0" 
        src="error_icon.gif" /><font color="red">Error!</font>'; 
        //When calling  setInnerHTMLFromAjaxResponse and there is 
        //an error, this will be displayed. set to null to turn off 
        //this feature.
    sal.EvalScripts = true;  
        //if set to true, will evaluate any JavaScript in the responseText. 
        //NOTE: to use/override functions returned in your responseText you 
        //must declare the functions in your Ajax response like this:
        //         var FunctionToChange = function(var1,var2) 
        //not like this : function FunctionToChange(var1,var2)
        //         { 
        //             //do stuff
        //         }
        //            
    this.KeepDotNetViewState = true; 
    //if set to true will post the current viewstate when using .NET 
    //not recommended when using bookmarks as viewstate can be huge.
    //end setting the Salajax settings.
    
    
    Some examples of main usage in a web page: (onclick events etc...)
    
    sal.PassAjaxResponseToFunction('/myscript.*?getsomehtml=1', 
        'FunctionToHandleTheResponse');
    sal.PassAjaxResponseToFunction(document.forms[0], 
        'FunctionToHandleTheResponse');

    sal.SetInnerHTMLFromAjaxResponse('/myscript.*?getsomehtml=1', 
        'id_of_div'); //using get and string of id div.
    sal.SetInnerHTMLFromAjaxResponse(document.forms[0], 
        object);//using post and object to change the innerhtml of.
    sal.SetInnerHTMLFromAjaxResponse('form', 
        'id_of_div');//using post ('form' will submit forms[0]'), 
                     //object to change the innerhtml of.

    Read function definitions for more detail.
    Note that initial values are all false for backward compatibility.
*/

如果您希望某些调用的后退按钮工作而其他调用不工作，只需创建该类的另一个实例。

var SAL = new Salajax();
sal.EnableBackButtons(true)
//in the web page
<input type="submit" value="OK" 
    onclick="sal.SetInnerHtmlFromAjaxResponse('form','div_1');" />

var sal2 = new Salajax();
//in the web page
<input type="submit" value="OK" 
    onclick="sal2.SetInnerHtmlFromAjaxResponse('?gethtml=1','div_2');" />

为了与 SAL 版本 1 向后兼容，我在脚本的顶部包含了这两个函数。它们演示了如何使用多个实例来以不同的方式处理 Ajax 请求。

/* Backward compatibility. */
function PassAjaxResponseToFunction(urlOrForm, callbackFunction)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.PassAjaxResponseToFunction(urlOrForm, callbackFunction);
}

/* Backward compatibility. */
function SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id)
{
    var SAL = new Salajax();
    sal.PresendHtml = null;
    sal.OnError = '';
    sal.ErrorHtml == null;
    sal.SetInnerHTMLFromAjaxResponse(urlOrForm, obj_id);
}

就这样不多了。只需创建实例，设置属性，然后在 JavaScript 事件中使用 Salajax 类的 2 个主要函数。要使演示项目正常工作，请将 Salajax_demo.zip 文件解压缩到适当的位置，例如 wwwroot，但任何地方都可以。在信息服务管理器/IIS 的“默认 Web 站点”下创建一个虚拟目录，别名为“sal_demo”，目录路径引用您解压缩的 sal_demo 文件夹。在 Visual Studio 中打开项目后，您现在应该能够编译、调试并运行演示项目。

关注点

Cookie 只能存储 4 KB 的数据。因此，如果您的表单中存储了大量数据，例如 .NET Viewstate，那么保存书签和使后退按钮与 Ajax 一起工作可能不是最理想的解决方案。

现在，由于调用被封装在实例类中，每个 JavaScript 调用的线程似乎都以不同的方式工作——多线程。

用于使后退按钮正常工作的 JavaScript 的复杂性让我认为此代码很可能与某些浏览器不兼容。如果有人能提供兼容性方面的反馈，那就太好了。

历史

  • SAL 的第一个版本在此文章 此处
  • SAL 的第二个版本（本文）于 2007 年 7 月 11 日首次发布
© . All rights reserved.