可视化Ajax请求的有用提示

近年来，在开发网页应用程序和建设网站时，Ajax技术开始大量运用。Ajax可以使响应更快，提供更好的用户体验。但是如果处理不当，也会降低用户体验。所以让用户清楚地知道系统和网站在做什么就变得很重要，在Ajax过程中，要预防用户执行错误操作。

1.要让用户知道在干什么

一些Ajax指示器是很有必要的，指示器可以让用户知道系统当前在执行什么操作以及从系统获得什么反馈信息。指示器应该在ajax请求开始时出现， 并在请求结束后消失。有时候经常可以看到一些请求明明已经结束，但是指示器还在的例子，更坏的情况是，甚至没有指示器或者提供任何视觉提示，严重影响了用 户体验。

简单指示器

简单的指示器可以为ajax过程提供视觉提示，指示器可以是简单的文本、图像，通常来说，很多使用动画。

1.如果是文本的形式，要确保提供有意义的信息，比如“正在发送邮件……”，使用“请稍后”这种表达可能会对用户造成困扰，用户不清楚自己在等候什么，不知道系统是否已经出错，用户体验差。

2.如果是动画形式，通常是一些圆形的运动动画，这种动画在网络上非常常见。

Loadinfo，这个网站提供了很多gif动画，在做ajax指示器时可以参考。

进度指示器

如果一个Ajax操作需要耗费很多时间，那么最好使用进度指示器，比如进度条。这种指示器向用户提供操作的实时信息，通常是完成百分比、完成时间、剩余时间等。进度指示还应该提供相应的文字说明，方便用户理解。

指示器的位置

良好的用户体验，要确保指示器的位置是明确可见的。

指示器可以根据不同需求放在不同的地方，如上图，指示器放在和发出Ajax请求的操作面板相同的位置里。而有一些网站则会把所有Ajax请求的指示器都放置在网页的同一个位置，如谷歌的Gmail把所有相关的Ajax指示器都放在网页顶部的中间。

如何选择指示器的类型

那么应该为Ajax响应选择简单指示器还是详细的进度指示器？这里可以用Ajax的响应时间来判断。

A. 0.1秒的响应时间是用户感觉系统无停滞运行的最高上限。Ajax响应时间如果小于0.1秒，通常只需要在请求完成后，简单指示一下结果即可。

B. 1秒的响应时间是用户操作不会间断的最高上限。Ajax响应时间如果在0.1秒和1秒之间，通常也不需要详细的指示，但是用户会有停滞延迟的感觉，所以应该做一些简单的指示。

C. 10秒的响应时间是保持用户停留在当前操作的最高上限，如果Ajax响应时间大于10秒，那么用户通常会选择先做其他事情，等待Ajax响应结束再回来。 所以这个时候就应该详细指示系统在执行什么操作。特别是当Ajax响应时间不好估算时，这种状态的指示就显得非常重要了。

2.当Ajax请求时，禁用一些UI元素

当一个Ajax请求正在进行时，如果用户开始其他请求，则有可能会对数据造成破坏。多次点击同一个按钮或者执行其他Ajax操作甚至会使系统崩溃造成数据丢失，但这并不是用户的错，用户会认为体验差。

如有需要时，这个问题可以通过禁用一些UI元素（当Ajax请求正在进行时）来解决。根据不同的情况，可以选择禁用部分UI元素或者禁用这个UI。当Ajax请求结束后，UI元素应该重新变为可用。有时当Ajax请求完成后，还可以让UI视图发生变化。

3.高亮数据更新的区域

当页面进行局部刷新时，让用户知道Ajax请求的输出结果是很重要的。

这种方式的目的在于，将用户的注意力吸引到更新的区域，让他们清楚更新的内容，这样可以提供良好的体验。可以将更新的内容高亮1秒钟左右，然后渐隐。一般来说这种高亮颜色通常是淡黄色。

4.结论

要让Ajax技术更好的工作，我们需要为Ajax请求开始到结束的过程中，提供相应的视觉提示。在使用Ajax时，应该基本做到下列几项：

1. 使用文本或者动画做Ajax指示器。
2. 如果Ajax请求时间长，要做进度指示器。
3. 当Ajax请求进行时，禁用一些UI元素，以防潜在错误。
4. 高亮更新内容。
5. Ajax请求失败时，应该提供相应的提示。