AjaxDelegate - 一个具有易于使用的回调功能的 AJAX 库

• 下载演示项目（包括完整源代码）- 14.1 Kb

引言

到目前为止，每个人和他们的狗都加入了 AJAX 的行列，以使他们的 Web 应用程序更快，并增强用户体验。（什么？你的狗不写代码？嗯……）像大多数程序员一样，我很懒，不喜欢一遍又一遍地编写我的 AJAX 代码，所以我开始寻找一个可靠的 AJAX 库。虽然有很多带有大量花哨功能的 AJAX 库，但我想要一些简单但灵活的东西。我也看到了很多关于自动完成框和其他各种常见 AJAX 场景的实现，但我想要一个可以重复使用的 AJAX 库，无论项目需要什么。

设计要求

• 易于使用。
• 必须足够灵活以处理任何 AJAX 场景。
• 必须能够将参数传递给 XmlHttpRequest 的回调函数
• 必须完全自包含，没有全局变量，以确保与未知脚本的兼容性。

使用代码

使用代码再简单不过了。首先，确保将 AjaxDelegate.js 文件链接到你的 HTML 页面中。然后，创建两个新的 JavaScript 方法，一个将被调用来启动 AJAX 事件，另一个将作为 AJAX 调用完成时的回调。在下面的示例中，我创建了 getDefinition 和 setDefinition 函数，并将 getDefinition 函数连接到 SELECT 标签的 onchange 事件。

function getDefinition(term, textareaID, borderStyle, borderWidth, borderColor)
{
    if(term != "")
    {
        var url = "lookupDefinition.aspx?term=" + term
        var ajax = new AjaxDelegate(url, setDefinition, 
                   textareaID, borderStyle, borderWidth, borderColor);
        ajax.Fetch();
    }
}

function setDefinition(url, response, textareaID, 
         borderStyle, borderWidth, borderColor)
{
    var word = eval(response);

    var textarea = document.getElementById(textareaID);
    textarea.value = word.definition;
    textarea.style.borderStyle = borderStyle;
    textarea.style.borderWidth = borderWidth + 'px';
    textarea.style.borderColor = borderColor;
}

幕后

当 onchange 事件触发时，将调用 getDefinition 函数。在该函数中，将创建一个新的 AjaxDelegate 对象。第一个参数是要在幕后处理的页面的 URL。第二个参数是将在异步调用完成后执行的回调函数的名称。之后，您可以将任意数量的附加参数传递给 AjaxDelegate 构造函数。这里的妙处在于，所有这些附加参数都将在调用完成后提供给回调函数。最后，确保调用 Fetch() 方法以启动处理。

当远程页面完成处理后，将调用指定为回调的函数。请记住，最初传递的所有参数都将提供给回调函数，以及来自 HTTP 请求的响应。此时，您可以对返回的数据做任何您想做的事情。（在这种情况下，我实际上返回了一个 JavaScript 对象，并使用 eval() 函数来解析它）。我承认这个例子过于简单，而且用处不大，但重点是演示这个概念。

结论

虽然这是一个简单的小库，但希望它的灵活性对其他程序员有所帮助。通过使用类似于 .NET Framework 的委托模式，可以非常轻松地创建接受附加参数的 JavaScript 回调函数。并且由于代码是自包含的，因此无需拥有具有全局范围的 XmlHttpRequest 对象，该对象可能会与其他库或未知脚本的用法冲突。

历史

• 2006 年 4 月 3 日 - 初始代码发布。