第50章 Ajax（异步JavaScript+XML）基础知识

参与人数 1

转帖

本章节为大家讲解Ajax(AsynchronousJavascript + XML，异步JavaScript和XML），网页的局部刷新全靠它了，所以对于初学者来说，是务必要掌握的。

（本章的知识点主要整理自网络）

50.1 初学者重要提示

50.2 Ajax基础知识参考资料

50.3 Ajax基础知识点

50.4 总结

lee_st · 2018-1-18 10:32:56

50.1 初学者重要提示
1、我们前面章节学习的CGI更新页面元素需要重新加载整个页面，本章节为大家讲解的Ajax技术可以解决此问题，实现页面的局部刷新。
2、什么是异步JavaScript？简单的说，异步的意思就是不按照JavaScript代码的书写顺序执行，这种特性正好用于Ajax技术的局部元素刷新。
3、关于Ajax的学习资料汇总和快速上手的说明专门放在了此贴里面。由于涉及到的资料不是我们原创，所以就不往教程中添加了，建议初学者必看！！！

lee_st · 2018-1-18 10:33:11

50.2  Ajax基础知识参考资料
   大家可以从以下地址获得Ajax基础知识：
1、wiki百科中文版Ajax
2、wiki百科英文版Ajax
3、百度百科Ajax
   对这些基础知识有个了解后，直接看50.1小节中推荐的入门学习资料即可。

lee_st · 2018-1-18 10:33:19

50.3 Ajax基础知识点
（这里的知识点整理自上面的参考资料地址）
教程这里也对Ajax的基础知识做个介绍，方便大家先有个大概的认识。

lee_st · 2018-1-18 10:33:29

50.3.1 Ajax简要说明
   Ajax即“Asynchronous Javascript + XML”（异步JavaScript和XML），是一种用于创建动态网页的技术，在无需重新加载整个网页的情况下，能够更新部分网页的技术。
   通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
   Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax在浏览器与Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

lee_st · 2018-1-18 10:33:39

50.3.2 Ajax发展史
   上个世纪90年代，几乎所有的网站都由HTML页面实现，服务器处理每一个用户请求都需要重新加载网页。这样的处理方式效率不高。用户体验时，所有页面都会消失，再重新载入，即使只是一部分页面元素改变也要重新载入整个页面，不仅要刷新改变的部分，连没有变化的部分也要刷新。这会加重服务器的负担。
   这可以用异步加载来解决。1995年，Java语言的第一版发布，随之发布的的Java applets（Java小程序）首次实现了异步加载。浏览器通过运行嵌入网页中的Java applets与服务器交换数据，不必刷新网页。1996年，Internet Explorer将iframe元素加入到HTML，支持局部刷新网页。
   1998年前后，Outlook Web Access小组写成了允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件。该组件原属于微软Exchange Server，并且迅速地成为了Internet Explorer 4.0的一部分。部分观察家认为，OutlookWeb Access是第一个应用了Ajax技术的成功商业应用程序，并成为领头羊。直到2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为简单易用。

lee_st · 2018-1-18 10:33:48

50.3.3 Ajax优缺点
   使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。
   Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
   对应用Ajax最主要的批评就是，它可能破坏浏览器的后退与加入收藏书签功能。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别可能非常微妙，用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，HTML5 之前的方法大多是在用户单击后退按钮来访问历史记录时，通过创建或使用一个隐藏的iframe来重现页面上的变化（例如，当用户在Google Maps中单击后退时，它在一个隐藏的iframe中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。
   关于无法将状态加入收藏或书签的问题，HTML5之前的一种方式是使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持追踪，允许用户回到指定的某个应用程序状态（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点）。HTML5 以后可以直接操作浏览历史，并以字符串形式存储网页状态，将网页加入网页收藏夹或书签时状态会被隐形地保留。上述两个方法也可以同时解决无法后退的问题。
   进行Ajax开发时，网络延迟，即用户发出请求到服务器发出响应之间的间隔，需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。