AJAX的介绍.doc

AJAX在五年前，我们还不知道有Ajax这种技术，我们一般在编写应用程序时基本上有两种选择：桌面应用程序和Web 应用程序。在应用上这两者是类似的，桌面应用程序通常以 CD 为介质（有时候可从网站下载）并完全安装到您的计算机上。桌面应用程序可能使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web 应用程序运行在某处的 Web 服务器上 毫不奇怪，要通过 Web 浏览器访问这种应用程序。不过，比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快（就在您的计算机上运行，不用等待互联网连接），具有漂亮的用户界面（通常和操作系统有关）和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。另一方面，Web 应用程序是最新的潮流，它们提供了在桌面上不能实现的服务（比如 A 和 eBay）。但是，伴随着 Web 的强大而出现的是等待，等待服务器响应，等待屏幕刷新，等待请求返回和生成新的页面。 相应的，一种利用已经成熟的技术构建具有良好交互性的web应用程序的好方法Ajax（Asynchronous JavaScript and XML）产生了。Ajax不是一项新的技术，它的各个组成部分均已出现了多年并非常成熟，且在 Ajax 这个单词出现前，就有很多成熟的产品已经在使用这种开发方式了，例如著名的 Outlook Web Access。广义上说，Ajax 同样也不是一个精确定义的概念，而是一种 Web设计的方式和态度，比如，现在很多 Ajax开发者都采用 JSON 来代替 XML 作为序列化的方式，这虽然并没有用到“Ajax”的“x”，但依然叫做 Ajax。 以下我会介绍有关Ajax的相关知识：1、 Ajax使用的技术 1描述页面的 HTML/XHTML 与传统的 Web 应用程序一样，Ajax 应用程序同样使用 HTML/XHTML 描述文档的结构。但这里它仅仅用来描述 Ajax 页面的初始样式，即用户第一次访问时看到的样式。在初始化之后，文档结构可能会随着程序的运行而有所变化。同时，HTML/XHTML 还会告知浏览器下载将运行于客户端的 JavaScript以及定义页面样式的 CSS等相关文件。 另外，为了方便 Ajax应用程序在运行中对文档进行维护，在编写这部分代码时还应该尽可能地使用严格符合 XML 语法的 XHTML 标记，以及使用富有语意的HTML 标签。 2表示文档结构的 DOM DOM即 Document Object Model（文档对象模型） ，是一种用来表示 XML 结构的层次型数据结构。JavaScript可以访问到浏览器提供的当前页面的 DOM 对象，并通过对其操作来间接地改变该页面的内容以及结构。 3定义元素样式的 CSS CSS 即 Cascading Style Sheet（层叠样式表） ，用来指定 HTML 文档中元素实现的样式。通过使用 CSS，可以将文档的结构和表现完全分开，这样 HTML部分即可专注于定义文档的结构，而控制样式则交给 CSS。这种将结构和表现分开处理的模型极大地降低了 DOM 对象的复杂性，也就方便了开发者使用 JavaScript对其进行维护。 4表示服务器和客户端通信内容的 XML 或 JSON XMLHttpRequest 对象从服务器得到客户端所需的数据，在传输过程中，这些数据将被序列化成文本的形式。虽然对这段文本的格式没有任何强制的要求，但我们通常选择 XML 或 JS方式来表示。 XML 是标准的数据表示方式，无论是服务器端还是客户端都可以很好地对其进行解释。特别是在用来实现服务器端程序的绝大多数编程语言中，均含有极为完善且简单易用的生成和维护XML 文档的功能。当 XML 数据返回至客户端时，JavaScript 需要首先对其进行进一步的解析，然后才能构造出 JavaScript 中的原生对象。某些浏览器解析 XML 的效率比较低，以致使其成为客户端性能的瓶颈。同时，相对于 JSON 方法，以 XML 方式表示的数据中有用的信息量偏低，这将带来更多的网络流量。 JSON，即 JavaScript Object Notation（JavaScript 对象标记） ，在客户端有着非常优良的性能，因为 JSON 的格式和 JavaScript 中定义对象的语法完全一致，只需要调用 JavaScript 中的 eval()函数，即可立即得到所需的对象。对于同样的数据，JSON表示方式要比 XML 表示方式更加短小精悍，这样也就减少了网络流量，进而提高了响应速度。JSON 的不足之处在于，在服务器端构造 JSON不如构造 XML 容易，但在目前主流的 CGI 语言/框架（例如 PHP、ASP.NET等）中，都已经有相关的类库对其进行支持。 5服务器端处理浏览器请求的 CGI 在使用 Ajax 技术将一部分表示层甚至业务逻辑移到了客户端进行的应用程序中， 服务器端 CGI程序至少仍需要实现数据持久化、用户输入验证等功能。而对于完全使用 Ajax 技术创建的“纯粹”Ajax 应用程序（例如完全使用 ASP.NET Ajax 客户端控件编写的 Ajax 应用程序） ，服务器端 CGI 则只需要提供数据即可，所有的表示层逻辑均将在客户端实现。 Ajax中并没有定义服务器端 CGI 的具体实现，也就是说，开发者可以随意选择他所熟悉的方式进行服务器端设计实现。 6实现与服务器异步通信的 XMLHttpRequest 对象 作为 Ajax的最核心部分XMLHttpRequest对象，早在 1998年就已经集成于IE 中了。随后，在各种主流的浏览器中也陆续开始得到支持。时至今日，XMLHttpRequest对象已经在绝大多数浏览器中使用，这也正是 Ajax兴起的客观基础以及前提条件。 XMLHttpRequest 对象的强大之处在于，它允许开发者在 JavaScript中以异步的方式向服务器发出 HTTP 请求并得到响应。这就让客户端可以在任何时候与服务器进行通信，而并不仅限于在整个页面提交的时候。同时，它的异步调用模型也并不会阻塞用户的当前操作，用户在等待时仍可以进行其他操作。 7协调上述各种技术的 JavaScript 最后，JavaScript 将上面提到的所有技术粘合在一起。通过 JavaScript 代码，开发者可以访问并维护当前页面的 DOM对象， 包括对其进行添加、 删除和修改等操作； 还可以通过维护某个 DOM元素的 CSS Class 来改变它的外观样式；也可以使用 XMLHttpRequest 对象访问服务器的 CGI程序，并将返回的 XML 或 JSON类型的数据解析后应用到当前的计算或显示中。 2、 Ajax的工作原理 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不 阻塞用户。 在创建Web站点时，在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能：l 动态更新购物车的物品总数，无需用户单击Update并等待服务器重新发送整个页面。l 提升站点的性能，这是通过减少从服务器下载的数据量而实现的。例如，在Amazon的购物车页面，当更新篮子中的一项物品的数量时，会重新载入整个页面，这必须下载 32K的数据。如果使用Ajax计算新的总量，服务器只会返回新的总量值，因此所需的带宽仅为原来的百分之一。l 消除了每次用户输入时的页面刷新。例如，在Ajax中，如果用户在分页列表上单击Next，则服务器数据只刷新列表而不是整个页面。l 直接编辑表格数据，而不是要求用户导航到新的页面来编辑数据。对于Ajax，当用户单击Edit时，可以将静态表格刷新为内容可编辑的表格。用户单击Done之后，就可以发出一个Ajax请求来更新服务器，并刷新表格，使其包含静态、只读的数据。 三、Ajax的优点和缺点 优点：传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。 与此不同，Ajax应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因此在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。 使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。 Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。缺点：虽然现在Ajax相关技术越来越成熟，但是它任然存在很多不足之处。首先面临无可避免的第一个问题即是浏览器的兼容性问题。各家浏览器对于JavaScriptDOMCSS的支持总有部分不太相同，甚至同一浏览器的各个版本间对于JavaScriptDOMCSS的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本身。因此，目前大部分的Ajax链接库或开发框架大多以js链接库