实施 AJAX 的 24 个有效策略-js教程-PHP中文网

对于 PC 忠实用户

献给我的果味弟兄们

这就是大家

编写 Plus 教程

首页

web前端

js教程

实施 AJAX 的 24 个有效策略

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 pm 05:29 PM

我们每月两次重温 Nettuts+ 历史上一些读者最喜欢的帖子。

实施 AJAX 技术可能是一件偶然的事情。如果做得好，用户就会对它为一般用户体验提供的流畅性赞不绝口，而如果你搞砸了，你就会受到他们的愤怒。这里有 24 个技巧，可指导您完成在 Web 应用程序中实施 AJAX 技术的过程。

1.了解这一切的含义

首先，您需要了解 AJAX 是什么、它代表什么以及它如何彻底改变了互联网的某些部分。在做出明智的决定之前，您需要了解它的优势是什么

以下是帮助您快速入门的必读文章列表。

维基百科
基于 AJAX 的 MDC
DevX

2.检查合适的使用场景

AJAX 听起来不错，但只有这么多地方可以实现它，而不会听起来像另一个要点。进行适当的研究和测试，以确保您出于正确的原因实施 AJAX。因为听起来不错并不是一个正当的理由。

正确的使用场景是，如果您在后端有大量数据，并且想要在用户需要访问该数据时更新 UI，或者当您想要模拟正确的桌面应用程序并异步处理所有内容时。一个极其糟糕的情况是，您无缘无故地通过 AJAX 加载静态网站的每个页面。在这里请使用您的判断力。

3.学习使用原始代码实现

在深入编写代码之前，请先了解原始代码。库可以很好地减少创建与浏览器无关的代码所需的时间，但是当代码出现问题时，最好知道如何在没有库帮助的情况下做到这一点。

我强烈推荐 Jeffrey 的有关使用原始 JavaScript 发出 AJAX 请求的教程（此处和此处）。

4.使用库

一旦您掌握了处理 AJAX 实现的原始 JS，最好转向为 AJAX 提供强大支持的 JavaScript 库。任何主要的库，如 jQuery、Prototype 或 MooTools 都应该可以。

库不仅提供您可以使用的详尽功能集，而且还确保您的代码与所有浏览器兼容，而无需您执行任何额外操作。

以下是我们最喜欢的一些包含正确 AJAX 功能的功能：

jQuery
道场
MooTools
原型
雅虎用户界面库
Google 网络工具包

5.掌握图书馆

一旦您掌握了使用您选择的库发出 AJAX 请求的技巧，就可以将其提升到一个新的水平并掌握它。听起来可能有点多余，但两者之间有很大区别。

随着每个库变得越来越大，每个版本都包含更多功能，开发人员向初学者隐藏了大量功能。例如，您是否知道 jQuery 中有多种方法可以进行 AJAX 调用？或者许多事件触发方法仅适用于核心 AJAX 调用？很多人不知道这一点，因此无法利用图书馆未开发的潜力。

以下是一些可供您细读的精选资源：

jQuery 1.4 参考指南
jQuery启蒙
学习 jQuery 的高级部分
jQuery 和 MooTools 之间的比较

6.提供反馈

实施 AJAX 的 24 个有效策略

人们过去反对 AJAX 的主要原因是他们无法真正判断应用程序何时更新其包含的数据。这也是一般用户体验的一个组成部分，并且与 AJAX 更加相关。

因此，即使是最微小的事情，也要记住向用户提供反馈，让他们知道他们的操作已被注册。用户点击了按钮？让他们知道！

7.利用适当的事件和回调函数

无论您使用原始 JS 还是库来实现此功能，您都可以访问请求的状态，即请求是否成功；遇到错误，最后是否完成。

正确使用这些事件及其各自的回调来操作 UI，以获得更好的用户体验。例如，如果请求不成功，您需要更新用户界面以反映他们的更改未成功，而如果成功，您需要告诉他们。不要让用户等待！

使用 jQuery，您可以使用成功和错误回调。您还可以调用其他回调，例如 complete 和 beforeSend 以便适当使用。

$.ajax({
        //Other code
           success: function(msg)
        {
            // Update the UI here to reflect that the request was successful.
            doSomethingClever();
        },
        error: function(msg)
        {
            // Update the UI here to reflect that the request was unsuccessful
            doSomethingMoreClever();
        },
        complete: function(msg)
        {
            // Update the UI here to reflect completion
            doSomethingEvenMoreClever();
        }
});

登录后复制

- 显示引用的文本 -

8.为作业选择正确的格式

仅仅因为 XML 出现在缩写中并不意味着您只能使用 XML 作为有效负载。您可以自由选择您喜欢的任何格式。 JSON？当然。 XML？自然。 HTML？当然。原始字符串？当然。

所以，本质上，无论什么事情都能让你的船漂浮。您不限于任何格式。您可以选择使您手头的工作更轻松并且对特定实例最有意义的格式。

9.广泛阅读

AJAX 虽然相对而言很古老，但仍然在不断变化。令人兴奋的新解决方案每天都会被创造出来，同时经常会发布涵盖该主题的极其详尽的书籍。无论是网络开发博客（就像这个！）还是书籍，请继续阅读以了解最新的发展。

以下是我最常访问和/或阅读最多的博客和书籍：

CSS 技巧
斯努克.ca
詹姆斯·帕多尔西的博客
雷米·夏普的博客

10.不断实验

阅读一本书又一本书、一篇又一篇文章固然很棒，但要掌握该主题，您需要卷起袖子自己编写一些代码。相信我，与仅仅连续阅读而不编写任何代码来更好地理解您所学的内容相比，您会更快地学到更多知识，然后编写一些相关代码。

11.利用Firebug

实施 AJAX 的 24 个有效策略

Firebug 可以说是每个 Web 开发人员手中最重要的工具。除了令人印象深刻的 JavaScript 调试和其他强大功能之外，它还可以让您查看每个 AJAX 请求的发出情况以及有关该请求的无数其他详细信息，包括它的来源、其有效负载是什么等等。您可以在这里下载。

这里还有一些推荐的资源：

您应该使用 Firebug 的 10 个理由
Firebug 解释
如何将 Firebug 与 CSS 结合使用
使用 Firebug 轻松实现 CSS

12.牢记使用旧浏览器的用户

除非您的网络应用程序类似于 Google 地图，否则为用户提供后备方案始终是一个好主意，以便他们仍然可以使用您的应用程序。典型的例子是许多 Web 应用程序，如果它们有能力的话，它们会通过 AJAX 路由所有用户交互，否则会回退到正常的 HTML 版本。

13.可书签性

添加书签的倾向是普通网络用户的普遍习惯，您的应用程序必须尊重这一点。使用 AJAX，浏览器的地址栏不会更新，这意味着当用户想要为包含通过 AJAX 动态加载的内容的页面添加书签时，他/她将添加初始页面而不是更新的页面。这提出了一个巨大的问题。

幸运的是，有一些技术可以解决这个问题。以下是旨在帮助您解决此问题的精选文章列表：

内容与风格
jQuery 历史记录插件
非常简单的历史

14.使用适当的动画

这是另一个用户体验问题，可能会损害原本出色的应用程序。通常，对于 AJAX 应用程序，用户可能甚至没有注意到用户界面的元素或其包含的数据发生了更改。鉴于此问题，开发人员必须使用不花哨、有品味的动画来吸引用户的注意，即用户界面已更新以反映用户的操作。

您可以在此处了解如何使用 jQuery 创建高雅的跨浏览器动画。

15.尊重后退按钮

后退按钮是另一个已成为普通网络用户习惯的操作。确保您的应用程序遵循这一受人尊敬的范例，以避免激怒用户。相信我，如果后退按钮突然无法按预期工作，他们会的。

这里是一个文章列表，应该可以帮助您解决这个问题。

内容与风格
jQuery 历史记录插件
非常简单的历史

16.智能地改变DOM

想象一下：您的请求已成功并返回了您希望用来更新用户界面的数据块。如果该数据块几乎没有单独的块，您可以照常继续。相反，如果有 15 个连续元素需要更新，最好只创建这些元素，在内存中修改它们的数据，然后一次性替换 DOM 中的数据，而不是每次都单独访问每个元素并更新 DOM .

随着要进行的编辑数量的增加，单独修改 DOM 会导致性能变差。

因此，对于像这样的 HTML 块：

<div id="container">
<span id="elem1"></span>
<span id="elem2"></span>
</div>

登录后复制

而不是这样做：

$("#elem1").html("Value 1");
$("#elem2").html("Value 2");

登录后复制

这样做：

var updatedText = "<span id=\"elem1\">Value1</span>
<span id=\"elem2\">Value2</span>";
$("#container").html(updatedText);

登录后复制

仅两个元素可能看起来需要大量工作，但一旦您将其推断为更多元素，仅性能就值得了。它会更快，因为无论更新后的 HTML 中有多少元素，您都只需更新 DOM 一次。但使用通常的方法时，DOM 所需的编辑次数与元素数量成线性比例，这反过来又降低了性能。

17.评论您的代码

这是显而易见的，但请正确注释您的代码。很有可能，您的代码至少会被数百人查看，希望向您学习，并且发表评论肯定会为您赢得额外的代表积分和典范饼干。

您不一定需要注释代码的每一点；仅评论重要的部分就足够了。

这太过分了！

$.ajax({
    // Switch off caching
    cache: false,
       
        //Set the type of request
       type: "GET",
       
        // Set the timeout
    timeout: 5000,
       
        // Specify the proper handler
       url: "handler.php",
       success: function(msg)
        {
           // Update the UI here to reflect that the request was successful.
           doSomethingClever();
        },
        error: function(msg)
        {
           // Update the UI here to reflect that the request was unsuccessful
           doSomethingMoreClever();
        }
});

登录后复制

这是一种更好的添加评论的方式，因为其中很多内容都是不言自明的。


// Make an AJAX call to handler.php and update the UI
$.ajax({
    cache: false,
       type: "GET",
    timeout: 5000,
       url: "handler.php",
       success: function(msg)
        {
           doSomethingClever();
        },
        error: function(msg)
        {
              doSomethingMoreClever();
        }
});

登录后复制