ajax技术什么时候出现的,ajax在项目中的应用

　　级别：初级

　　杰西斯金纳，网络开发人员，自由职业者

　　2008年3月18日

　　Ajax改变了编写Web应用程序的方式。了解如何使用Ajax改进您的网站，同时避免糟糕的用户体验。

　　遭遇Ajax

　　当使用异步JavaScript XML (Ajax)开发技术增强的应用程序第一次出现在互联网上时，Web开发人员感到敬畏。一夜之间，网站和网络应用的潜在价值似乎是无穷无尽的。过去，许多开发人员和用户认为网站和Web应用程序只是他们桌面应用程序的一个粗糙、丑陋和复杂的版本。但是在看到Ajax增强的应用程序和网站后，开发人员和用户都意识到在浏览器中可以做的事情超出了想象。随着今天的Web浏览器能够处理高级文档对象模型(DOM)脚本和复杂的级联样式表(CSS)，有必要创建一个可以通过与后台服务器对话来立即更改、更新和响应的界面，Ajax成功地完成了这项任务。但是有时候因为太刺激，用户体验并不理想。

　　Web开发的游戏规则已经改变，许多开发人员一有机会就使用Ajax来完成工作。许多网站甚至放弃了超文本标记语言(HTML ),转而完全使用JavaScript来构建网站。

　　创新和可预测性

　　Ajax使Web创新成为可能，但同时也增加了违背用户意愿的可能性。请记住，在将Ajax添加到您的站点的同时，您也有责任为用户解决由此引起的任何问题。

　　如果你问普通的Web用户他或她对Ajax技术的看法，他或她可能只是茫然地看着你。很多用户并不关心自己使用的网站的建设技术。他们更感兴趣的是良好的用户体验，即能够尽可能轻松地完成所需的工作。至于应用程序的具体结构，就让它安全地呆在后台吧。

　　本文分析了Ajax的能力，并讨论了什么时候使用Ajax会弊大于利。我希望你能从中得到灵感，用一种你从未想过的方式使用Ajax，也希望你不会因为建立一个流行的网站而发疯。

　　摆脱刷新

　　没有什么比不断刷新网页更烦人的了。对于那些在观望是否赢得拍卖、关注比赛比分和密切关注天气预报的用户来说，Ajax对这些类型的网页的增强可以极大地改善用户体验。

　　在Ajax技术出现之前，简单的JavaScript代码可以用来自动更新网页。然而，更新JavaScript网页需要刷新整个页面。这就是为什么Web应用中Ajax技术的出现对Web产生了如此大的影响。

　　当页面用原来的方法刷新时，用户不能与之交互。Ajax页面可以异步(Ajax中的A)从Web服务器请求数据，用户完全不知道后台正在处理事务。数据返回后，只有部分页面会被更新。

　　网络不需要实时。

　　自更新部分页面让用户摆脱了刷新的痛苦，但对Web服务器架构来说却是一场灾难。如果网站一天只有1000个访问者，Web服务器也许能够应付。但是，如果这个网站的每个网页都用Ajax每秒刷新一次，每个用户平均打开页面10分钟，这个网站每天的页面请求就会飙升到60万次。

　　为了在Web服务器中避免这种情况，开发人员必须注意最小化更新频率。如果您知道信息只是每隔几分钟更新一次，那么您可以尝试将Ajax请求调整到相同的频率。如果信息每秒更新一次，可以考虑在不损害用户体验的情况下，尽可能延长刷新间隔(例如，每5或10秒一次)。

　　您还可以提供一个简单的刷新链接，仅在用户需要时触发Ajax调用。这类似于浏览器的“刷新”按钮。但是，如果只需要少量数据，这种方法速度更快，对Web服务器的要求也更低。

　　小变化，大影响

　　Ajax的优势在于对页面的微小修改和更新。从前，即使很小的更新也需要刷新整个网页。使用Ajax和JavaScript代码，页面几乎可以实时更新。例如，您可以让页面在添加新注释时更新注释列表，显示关于最新条目的注释，或者实时显示进度条。

　　开发者的关键目标应该是增加可用性，也就是方便用户。用户可能会觉得等待页面响应是在浪费时间。在Ajax被引入Web应用程序之前，许多用户更喜欢使用桌面应用程序，因为桌面应用程序更快、响应更快。Ajax增强消除了等待和滚动时间，它使Web应用程序的响应能力达到了许多传统桌面应用程序的水平。

　　大变化，大灾难

　　如果对页面的小改动可以提升用户体验，大改动(比如几乎或者完全替换整个页面)可能会让用户不知所措，导致不好的结果。

　　如果网站用Ajax更新太快，用户可能会认为后退和前进按钮和书签有问题。(Flash站点和纯Ajax站点一样，很容易让人有这种感觉。)用户想要点击后退按钮返回到上一页或视图。更不利于用户体验的是，当用户再次点击前进按钮时，并不是回到刚才查看的视图，而是回到初始页面，就像刷新Ajax站点一样。

　　如果用户临时加载一个页面，然后返回到他们刚刚查看的站点，他们可能会失望地发现页面已经发生了变化。不幸的是，浏览器很可能会将页面加载到初始状态，并且经常会丢失所有更改。同样，如果用户想要与他人分享某个站点的特定视图或页面，或者将某个页面加入书签，他们认为并相信他们只需要从浏览器中复制URL并使用它(目前确实如此)。

　　如果页面内容变化太大，让用户觉得是新页面，那还不如直接给他们发新页面。但是，如果开发者真的需要使用Ajax来改变页面内容，最好使用Ajax历史工具来存储后退和前进按钮以及书签功能。这些工具使用哈希值(例如，“#tab3”)来更改URL，而无需加载新页面。当用户单击后退或前进按钮，或者加载一个书签URL时，JavaScript代码会查看哈希表并重新生成用户想要的视图。当然，这只对支持JavaScript语言的浏览器有用。

　　发布网页信息

　　你可能已经注意到，互联网还有一个重要的特点：似乎你可以访问无限量的信息，而不必在你的本地机器上复制。利用Ajax，你可以构建一个连接到庞大数据库的交互界面(无论它位于世界上的哪个服务器)，实现前所未有的功能。

　　Google Maps就是这些Ajax应用中的一个，它凝聚了开发者和用户的想象力。在这个网站上，你不用刷新页面就可以浏览整个地球的地图和卫星照片。以这种方式发布数据可能是Ajax最有价值的潜在用途。

　　在谷歌地图出现之前，地图网站已经出现很多年了，但是谷歌地图不一样，因为Ajax允许的接口是前所未有的。在传统的地图网站上，将视图向西移动需要单击一个链接。然后出现一个新页面，其中包含生成的调整后的地图。所以你要等页面清空，再次加载，然后滚动到地图。

　　这种糟糕的界面是由Web的基本限制造成的。获取Web服务器数据的唯一方法是访问一个新的URL，然后下载一个包含新内容的新网页。如果您想在当前视图中看到任何细微的变化(比如向西移动一点)，您必须加载整个新地图。因为Ajax允许在后台异步检索数据，所以不需要清除和加载整个页面。只需要加载地图的数据和图片片段。您还可以为特定的地图视图生成URL，但这不再是加载更多信息的唯一方式。

　　您可以使用网页作为许多其他场景数据的界面。考虑一个分页场景，比如查看分成许多页面的搜索结果。用户界面控件(如上一页和下一页)不需要每次都加载整个新网页。使用Ajax，您可以异步加载下一个页面的结果，并相应地更新页面。您甚至可以预加载下一个页面，以便在用户想要查看时立即显示。

　　通过将文档与信息分开，您还可以加快速度并节省带宽。在大多数情况下，可扩展标记语言(XML)或JavaScript序列化对象概念(JSON)形式的原始数据小于网页的HTML表示，尤其是页面的其余部分(如标题、导航和脚注尤为明显)。

　　在网页上留下信息

　　Ajax打开了从Web服务器获取原始数据的大门，但这并不意味着您不再需要老式的Web页面。对于用户来说，能够通过URL访问数据片段是很重要的，因为这样他们就可以与其他人共享数据片段。

　　Ajax也允许搜索引擎抓取你的网站。为搜索引擎优化网站内容不仅是为了吸引用户到网站，也是一个可用性问题。你可能已经通过搜索引擎找到了大部分可以使用的网站，或者你可能只使用了大部分网站的一两个页面。如果网站提供的内容隐藏在Ajax技术的背后，那么搜索引擎将无法搜索到它，因此世界上大多数人都无法找到你的网站。所以，让站点的信息通过传统的HTML页面来浏览是非常重要的，即使可以通过JSON或者XML来浏览。

　　Ajax可以拯救网站。

　　Web用户界面通常使用户能够在Web服务器上保存数据，或者轻松地创建、更新和删除条目。当然，这些任务总是可以通过HTML来实现，但是Ajax可以更方便地在后台异步发送数据。想象一下使用Ajax和JavaScript代码来简化添加、编辑和删除内容。它们使得管理条目列表变得更加容易。您还可以增强单个条目的添加，例如将其写在留言板上。您只需要使用Ajax向服务器发送消息，然后使用DOM脚本立即将消息添加到页面中。

　　Ajax可以破坏网站。

　　大多数用户不想要Ajax在网站中使用；许多用户甚至从未听说过Ajax。因此，在使用Ajax设计页面时，确保程序能够与目标用户通信是非常重要的。例如，如果使用Ajax向服务器提交表单或发送数据，当发生以下操作时，应用程序必须与用户通信：

　　发送或获取数据时。该动作通常由动态图片(如旋转指针)或短语“加载…”或“保存…”来指示。

　　当成功发送或获取数据时。您可以显示消息“成功”或使用JavaScript动画将用户的注意力吸引到页面的特定部分。

　　在与Web服务器的对话中出现错误或超时。通常会给出一条解释消息，提示用户再试一次。

　　如果应用程序不能通信，用户就不会知道发生了什么。如果单击表单提交按钮时没有任何反应，用户会认为网站有问题。如果应用程序不能提示出现了错误，用户一般会认为自己的操作是成功的。如果实际情况不成功，用户的这种假设可能会导致极度失望，尤其是当需要很长时间来完成表单内容时。如果应用程序在出现问题或超时时通知用户，至少用户还有机会复制粘贴并在本地保存数据，从而避免最糟糕的用户体验。

　　强化——黄金法则：

　　为了帮助确保应用程序设计能够提供最佳体验，最好遵循渐进增强的黄金法则：首先，在没有任何JavaScript代码的情况下进行开发，然后在站点开始运行后添加JavaScript代码。

　　Ajax使Web创新成为可能，但同时也增加了违背用户意愿的可能性。请记住，在向站点添加Ajax的同时，您还必须为用户解决由此引起的任何问题。

　　增量增强(Incremental enhancement)是一种Web开发策略，它可以确保所有内容和功能对所有浏览器都可用，但它也支持更高级的Web浏览器使用JavaScript编程和Ajax来创建更好的用户体验。为了帮助确保应用程序设计能够提供最佳体验，最好遵循渐进增强的黄金法则：首先，在没有任何JavaScript代码的情况下进行开发，然后在站点开始运行后添加JavaScript代码。基本上，您构建一个基本的网站，其中实际的链接和表单都指向真实的URL。然后，用JavaScript编程和Ajax改变这些链接和表单的功能。

　　例如，假设您希望有一个评论表单，它可以使用Ajax提交评论，并可以更新页面以在适当的位置显示评论，所有的过程都不需要刷新页面。首先，照常构建评论表单，不使用任何JavaScript代码，并确保它可以正常运行。接下来，向表单添加一个JavaScript onsubmit事件。提交表单时，Ajax用于将评论保存到服务器，DOM脚本用于更新页面。这样，不支持JavaScript语言的Web浏览器表单也能很好地运行，更高级的Web浏览器运行效果会更好。

　　DeveloperWorks Ajax资源中心

　　访问Ajax资源中心，这是一个包含开发Ajax应用程序的免费工具、代码和信息的一站式中心。在Ajax专家Jack Herrington维护的Ajax社区论坛中，可能会有您正在寻找的问题的答案。

　　有些网站完全是用JavaScript代码和Ajax构建的，我建议无论如何都要避免这种情况。建立这样一个网站意味着排除一些潜在的网络人，而不仅仅是选择禁用JavaScript语言支持的用户。同样被排除在外的还有搜索引擎和在网上搜索的人。此外，使用未经测试的设备和浏览器访问网站内容的潜在用户也被排除在外。记住，对于纯JavaScript站点，最小的JavaScript错误也可能导致整个站点的损坏。如果你有非JavaScript站点的支持，你可以确保你不会屏蔽任何潜在用户(和潜在客户！)访问您的内容。

　　结束语

　　Ajax完全颠覆了开发者构建Web应用的方式，结果有好有坏。关键是要确保您选择包含在应用程序中的Ajax增强功能能够改善用户体验。尽量避免混乱、不可预测和令人失望的情况。对于很多开发者来说，这些决策可能会影响公司的成败。

　　Jesse Skinner是一名自由职业的Web开发人员，致力于JavaScript和CSS的开发。他从加拿大搬到德国，主要研究如何让网页用起来更有趣，解决了长期存在的CSS浏览器兼容性问题。如果你想更多地了解Jesse或者阅读更多关于Web开发的内容，请参考他的博客。