Ajax 陷阱（Ajax Gotchas）

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> Ajax陷阱 Ajax is an awesome technology that is driving a new generation of web apps, from maps.google.com to colr.org to backpackit.com. But Ajax is also a dangerous technology for web developers, its power introduces a huge amount of UI problems as well as server side state problems and server load problems. Ajax是一项重要的技术，它将引领下一代web应用程序开发的风潮，从maps.google.com 到 colr.org 再到 backpackit.com ，处处充满了ajax的倩影。但是对于web开发者来说，ajax也是一项危险的技术，它的力量也导致了一大堆UI问题，如服务器端状态问题和服务器负载问题。 I've compiled a list of the many mistakes developers using Ajax often make. Javascript itself is a dangerous UI technology, but I've tried to keep the list to problems particular to Ajax development: 我编辑了一个开发者在使用ajax时经常犯的错误列表。Javascript本身就是一个危险的UI技术，但是我仍尽量使得这份列表只包含ajax开发中所遇到的问题，而剔除掉Javascript本身的问题。 Mistakes: 错误： Not giving immediate visual cues for clicking widgets. If something I'm clicking on is triggering Ajax actions, you have to give me a visual cue that something is going on. An example of this is GMail loading button that is in the top right. Whenever I do something in GMail, a little red box in the top right indicates that the page is loading, to make up for the fact that Ajax doesn't trigger the normal web UI for new page loading. 没有及时给出点击控件后的可视化提示信息。如果我点击的这个东西触发了ajax一个动作，那么你必须给我一个可视化的提示，告诉我有些动作正在执行。一个例子就是Gmail页面右上角的装载按钮（loading button）。无论何时，当我在Gmail中执行任何操作时，页面右上角的小红色按钮就会提示我，页面正在载入中。这样明显的向用户提示出你的动作，从而克服ajax不再重载页面而带来的用户不知操作是否进行的不便。 Coofucoo say： 习惯是可以培养的。就像用户用惯windows时，就会习惯那个“开始”按钮一样，尽管刚开始他们会问：“为什么我想关机，还要从‘开始’处开始呢？”。当大多数web用户习惯于页面刷新即意味着数据提交这一传统观念时，一旦你打破这种观念，你就一定要小心，尽量多的提示用户你当前的操作，用户就不至于感到莫名其妙，“到底这个该死的程序在干些什么？？！！”。反面例子你可以在球球的blog中找到。 Breaking the back button The back button is a great feature of standard web site user interfaces. Unfortunately, the back button doesn't mesh very well with Javascript. Keeping back button functionality is a major reason not to go with a pure Javascript web app. Coofucoo say： 这是硬伤，似乎无解。我目前想到的解决办法就是在程序里自己提供一个后退按钮，来代替浏览器提供的按钮。不过这样恐怕又会加大工作量。 破坏后退按钮的功能。后退按钮时标准web用户界面的一个很重要的功能。但是不幸的是，后退按钮的功能与Javascript结合的并不好。保持后退按钮的功能也正是我们不采用纯粹Javascript web应用程序的原因。 Changing state with links (GET requests) As I've referenced in a previous posting, Ajax applications introduce lots of problems for users who assume GET operations don't change state. Not only do state changing links cause problems for robots, users who are accustomed to having links drive navigation can become confused when links are used to drive application state changes. 竟然用链接来转换状态？（GET方式发送请求）就像我前面提到的一样，对于一些认为GET操作不会变更状态的用户来说，ajax应用程序导致了许多问题。那些可以改变状态的链接不仅仅导致web应用程序使用习惯的变化，更容易使那些习惯的认为链接就是起导航最用的用户感到很困惑。 Coofucoo say： 感觉这个地方不好理解，解释一下。超级链接最原始的功能就是在页面之间进行切换，你由一个页面点击一个超链接，就会被带到另一个地方。之后超链接有所发展，可以采用GET方法向服务器发送一些数据，不过有些用户还是会认为超链接的功能就是起导航的作用。但是现在情况变化了，在ajax里，由于大量引入了Javascript事件，所以一个普通的超链接同样可以起到原先button才可以起到的作用，比如asp.net中的linkbutton。这样也许会功能更强大，但是却给部分用户带来了习惯和观念上的变更，就会引入问题。 Blinking and changing parts of the page unexpectedly The first A in Ajax stands for asynchronous. The problem with asynchronous messages is that they can be quite confusing when they are pop in unexpectedly. Asynchronous page changes should only ever occur in narrowly defined places and should be used judiciously, flashing and blinking in messages in areas I don't want to concentrate on harkens back to days of the html blink tag. 页面的某部分可能出乎意料的，一眨眼的就变化了。Ajax这组缩写字母中的第一个字母“A”就代表了“异步（asynchronous）”。异步的信息所带来的问题就是他们会悄无声息的执行，毫无征兆的突然弹出，让人感到非常迷惑。异步页面的变化部分应该被谨慎设计，明确说明，明智使用，提示的信息应该被放置在那些我不会全神贯注的地方，并且用例如blink标记这种技术让他闪烁起来。 Not using links I can pass to friends or bookmark Another great feature of websites is that I can pass URLs to other people and they can see the same thing that I'm seeing. I can also bookmark an index into my site navigation and come back to it later. Javascript, and thus Ajax applications, can cause huge problems for this model of use. Since the Javascript is dynamically generating the page instead of the server, the URL is cut out of the loop and can no longer be used as an index into navigation. This is a very unfortunate feature to lose, many Ajax webapps thoughtfully include specially constructed permalinks for this exact reason. 超链接变得毫无意义，不能在传递给朋友或者收藏了。另一个web站点的重要功能就是你可以将一个URL传递给另一个人，而他就可以通过这个URL看到你看到的东西。当然，我也可以将这个URL放到我的收藏夹里，以便我以后访问他。Javascript，包括基于Javascript的ajax技术将会对这种应用模式带来巨大的挑战。由于Javascript取代了服务器，用来动态的产生数据，所以URL就不能具体代表整个交互循环的某个状态点，也就不再能够收藏了。这方面的功能缺失非常令人遗憾，许多ajax web应用程序在这方面考虑的非常仔细，包括专门构造一个特殊的链接（permalinks）来应对此种情况。 Too much code makes the browser slow Ajax introduces a way to make much more interesting javascript applications, unfortunately interesting often means more code running. More code running means more work for the browser, which means that for some javascript intensive websites, especially poorly coded ones, you need to have a powerful CPU to keep the functionality zippy. The CPU problem has actually been a limit on javascript functionality in the past, and just because computers have gotten faster doesn't mean the problem has disappeared. 太多的代码让浏览器变得缓慢。Ajax带来了一种非常有趣的javascript应用程序，但是不幸的是，有趣也就意味着更多的代码在运行。更多的代码就意味着浏览器要做更多的工作，特别是有些不良的代码虽然加强了功能，却需要你有一个强劲的CPU去支持这些功能的实现。CPU不够强劲实际上是过去限制javascript功能的一个重要因素，而且即使当下的计算机已经变得越来越快，这个问题也并没有完全消失。 Inventing new UI conventions A major mistake that is easy to make with Ajax is: 'click on this non obvious thing to drive this other non obvious result'. Sure, users who use an application for a while may learn that if you click and hold down the mouse on this div that you can then drag it and permanently move it to this other place, but since that's not in the common user experience, you increase the time and difficulty of learning your application, which is a major negative for any application. 创造新的UI使用习惯。使用ajax很容易犯这样的错误：“想当然的要求用户去点击一个不明显的东西，然后再一个不明显的地方将结果返回给用户”。诚然，当一个用户使用你的程序一段时间，他就可以了解到，如果他将鼠标在一块区域上点击，并且保持按下的状态进行拖拽，就可以将这块区域永久的移动到另一个位置。但是这些经验并不是每个用户天生就知道的，如果你这么做，那么你就为你的用户学习使用你的应用程序增加了难度和时间，而这样的情况对于大多数应用程序来说都有极大的负面影响。 Not cascading local changes to other parts of the page Since Ajax/Javascript gives you such specific control over page content, it's easy to get too focused on a single area of content and miss the overall integrated picture. An example of this is the Backpackit title. If you change a Backpackit page title, they immediately replace the title, they even remember to replace the title on the right, but they don't replace the head title tag with the new page title. With Ajax you have to think about the whole picture even with localized changes. 当局部发生变化时，可能需要成串同步页面其他部分。从Ajax/Javascript赋予你控制（更改）页面具体内容的时候，就特别容易犯下只注重局部数据变化，而忘记在整个页面同步该变化的错误。一个例子就是Backpackit（www.backpackit.com）的标题。如果你执行了一个改变Backpackit页面的动作，标题会被立刻改变过来，甚至右边的标题也会被一起变化，但是他们忘记了为新页面同步位于<head>标签中的<title>标记。在ajax里，当你更改局部时，你需要考虑整个页面的同步问题。 Asynchronously performing batch operations Sure with Ajax you can make edits to a lot of form fields happen immediately, but that can cause a lot of problems. For example if I check off a lot of check boxes that are each sent asynchronously to the server, I lose my ability to keep track of the overall state of checkbox changes and the flood of checkbox change indications will be annoying and disconcerting. 分批异步执行操作带来的问题。确实，在ajax里你可以编辑许多不同的表单，并且表单会及时提交，但是这样也带来了许多问题。例如，我编辑了一些一些复选框，每个都可以异步的单独将数据提交给服务器，但是同时我却丧失了在整体上控制这些复选框状态的能力，并且每个复选框提交之后返回结果的提示信息也会变得非常令人讨厌。 Scrolling the page and making me lose my place Another problem with popping text into a running page is that it can effect the page scroll. I may be happily reading an article or paging through a long list, and an asynchronous javascript request will decide to cut out a paragraph way above where I'm reading, cutting my reading flow off. This is obviously annoying and it wastes my time trying to figure out my place. 另一个问题是，即时向一个正在运行的页面写入内容可能会导致页面滚动。我可能会比较喜欢阅读一篇全部显示出来的文章，尽管文章可能会很长。可是一个异步的javascript程序也许会将我所读过的部分丢掉，从而影响我的阅读。当我试图再次找回我之前阅读的位置时，这种机制会显得特别不方便。 In addition, some programming issues: 另外，还有些编程的问题： Be careful about what you expose on the server, especially if you're using remote-stub frameworks like SAJAX. You can't necessarily let Javascript use generic services that you might let a server-side script call. Don't rely on a global XMLHttpRequest object. See Call Tracking. Coofucoo say： 这个地方我没有翻译出来，对他描述的情况知道得不是很确切。哪位知道得拜托通知一下。 Be careful about changing the DOM in one call, such that when a later call returns, it ends up writing a value into the wrong DOM object - or perhaps the DOM object doesn't return at all (To be added to [[Call Tracking). 当你响应一个调用而更改DOM的内容时，一定要小心，如果此时稍后的一个调用返回，很可能会导致将数据写入错误的DOM对象中，或者可能导致对DOM对象的操作根本就不返回。 Consider the effects of a call never returning. You can establish a timeout mechanism by setting a timer as soon as the call is made (with Javascript's ontimeout function). The timer can explicitly call the request's abort() method if no return has occurred, and inform the user accordingly. 考虑调用没有返回的情况。你可以通过在函数调用后设置一个timer（用Javascript的ontimeout函数）来建立一个超时机制。如果没有返回的话，这个timer就可以明确地执行abort()（终止操作），并且通知用户。 Consider the effects of a call returning with an error status - perhaps alert the user somehow. A pattern like Synchronisation Status helps here, to alert the user that some data is stale. 考虑调用返回一个错误状态的情况，这种情况下可能会提示用户一些莫名其妙的信息。像Synchronisation Status这样的模式就可以在这里为我们提供帮助，警告用户有些数据已经出问题了。 Retrieved from "http://www.ajaxpatterns.org/Ajax_Gotchas" 引用地址："http://www.ajaxpatterns.org/Ajax_Gotchas"