第11章 jQuery与AJAX.pptVIP

第11章 jQuery 与AJAX Web应用的优点在于部署和维护过程非常简单，而桌面应用程序则具有丰富的界面和快速的响应能力。一直以来人们都是根据实际需要，在两种应用之间进行选择，通常只能获得一种应用的优势，但是今天情况却逐渐发生着变化。随着AJAX的普遍应用，许多Web应用都具有了桌面软件才有的丰富界面和好的用户体验。本章首先介绍AJAX的概念，然后对jQuery中的AJAX做详细讨论。 11.1 AJAX的应用 AJAX的使用使Web应用可以很轻松的实现和桌面软件几乎一样的效果，提升了用户使用体验的同时，也能够完成更多更复杂的功能。因此，AJAX也变得越来越流行。本节将首先介绍AJAX的历史，然后介绍几个相对比较成熟的使用AJAX的Web应用实例。 11.1.1 AJAX的历史 使用AJAX的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息，减少网络阻塞。随着Web 2.0的兴起，RIA概念的推出，AJAX的作用越来重要，甚至还没有找到一个更好的替代品。虽然Adobe公司（网址：/cn）的AS 3.0也推出。但是flash庞大的躯体，在目前拥挤的网络上还有点力不从心。 11.1.2 AJAX的应用 在2004年3月，一个使用XMLHttpRequest创建的高交互性的Web应用走到了世人的眼前。Google发布了Gmail邮箱（网址：），这是一个高交互性的基于JavaScript的Web邮件应用程序，其界面如图11.1所示。 Google地图（网址：）是另一个对AJAX应用较广泛的例子。Google地图是Google提供的服务。它为使用者提供强大、使用者友善的地图技术以及本地公司资讯，包括公司位置、联络资讯以及行车路线指示。 Google文档操作界面 11.2 AJAX原理与XMLHttpRequest对象 本节首先介绍AJAX的原理与实现，并对传统的Web程序和使用AJAX的Web程序应用模型作简单比较，然后介绍AJAX中的核心组件XMLHttpRequest对象的概念与应用。 11.2.1 AJAX的原理 AJAX不是一种技术，而是几种技术。每种技术都具有独特之处，合在一起就形成了一个功能强大的新技术。AJAX包括： XHTML和CSS； 使用文档对象模型（Document Object Model）进行动态显示和交互； 使用XML和XSLT进行数据交互和操作； 使用XMLHttpRequest进行异步数据接收； 使用JavaScript将它们绑定在一起。 11.2.1 AJAX的原理 传统的Web应用采用同步交互过程。这种情况下，用户首先向Web服务器发送一个请求，然后Web服务器根据用户请求的内容，执行相应的任务，并向用户返回结果，如图11.7所示。 11.2.1 AJAX的原理 与传统的Web应用不同，AJAX采用了异步交互的方式。它在用户和服务器之间引入了一个中间媒介，从而改变了同步交互过程中的“处理－等待－处理－等待”模式。 11.2.2 XMLHttpRequest对象 在基于AJAX的应用中，Garrett所定义的7项技术并不一定会全部用到，但是XMLHttpRequest对象却是实现AJAX应用必不可少的核心技术。客户端的脚本采用JavaScript实现，AJAX从本质上说是客户端的技术。因此对于开发人员而言，JavaScript编程尤其是JavaScript面向对象编程技术的要求是比较高的。 11.3 jQuery中的AJAX jQuery的AJAX工具包封装有三个层次。这样做是基于两个原因的考虑：一方面为了符合命名规范，可以让用户见名思义，比较容易理解和使用，不会发生混淆；另一方面，这样还可以区分跨域操作，也就是说将支持跨域操作的函数单独封装起来，作为第三层。 11.3.1 load()、get()和post()函数 在jQuery用于支持AJAX的众多API函数中，最常用的就是load()、get()和post()函数了。load()、get()和post()函数虽然使用比较简单，但是它们已经可以完成大部分常用的AJAX功能。下面将通过实例分别介绍。 11.3.1 load()、get()和post()函数 1．load( url, [data], [callback] )函数 load(url, [data], [callback])函数的作用、返回值以及参数意义如表11.3所示。 11.3.1 load()、get()和post()函数 2．jQuery.get(url, [data], [callback], [type]) jQuery中的get(url, [data], [