3.5 JavaScript库

随着JavaScript的广泛使用，越来越多的JavaScript框架，即程序库也发展起来。JavaScript库封装了JavaScript代码，极大地简化了Web编程，使程序更具有可读性。

3.5.1 Ajax概述

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

HTTP的标准工作方式称为GET/POST方式，用户通过浏览器向服务器发送请求，服务器接收并处理请求，然后返回一个新的页面，工作方式如图3-21所示。

但如果更新前后的页面中大部分HTML代码是相同的，这种工作方式就会浪费很多带宽，有时甚至一处小小的修改也要将整个页面从浏览器发回服务器，并重新加载。用户发出请求后需要在一个毫无反应的页面前等待较长时间。

Ajax技术的诞生弥补了HTTP标准工作方式的不足。支持Ajax的Web页面在客户端包含一个JavaScript库，该库负责向Web服务器发送请求，称为异步请求；Web服务器对异步请求做出响应，称为异步响应，但返回的是结果数据而非整个页面；JavaScript库在接收到异步响应之后也只对页面上发生变化的部分进行更新。经Ajax扩展后的HTTP工作方式如图3-22所示。

图3-21 HTTP标准工作方式

图3-22 经Ajax扩展后的HTTP工作方式

所以Ajax在不重载全部页面的情况下，实现了对部分网页的更新。

Ajax技术目前被广泛用于各种流行的Web应用，如大家熟悉的Facebook、Google Gmail和新浪微博等。Ajax技术使Web应用程序比以往运行更流畅，给终端用户提供了更加及时的响应感受。

由于Ajax是向服务器发出异步请求，所以使用Ajax技术需要在服务器上运行，例如IIS服务器或Apache服务器等。

Ajax包括以下几个步骤：创建Ajax对象、发出HTTP请求、接收服务器传回的数据、更新网页数据。见【例3-25】。

【例3-25】 Ajax示例。

以访问服务的方式运行上述代码，得到如图3-23a所示的页面，单击“通过AJAX改变内容”按钮，得到如图3-23b所示的结果。

图3-23 【例3-25】运行结果

a)以访问服务方式运行【例3-25】 b)单击“通过AJAX改变内容”后结果

下面以【例3-25】的代码说明Ajax的工作过程。

1.创建Ajax对象

Ajax技术的核心是XMLHttpRequest（简称XHR）对象，这是由微软公司首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。创建一个XHR对象，也叫实例化一个XHR对象，使用如下语句。

如【例3-25】中代码如下。

使用if语句，是因为所有现代浏览器（IE7+、Firefox、Chrome、Safari以及Opera）均内建了XMLHttpRequest对象；而老版本的Internet Explorer（IE5和IE6）使用ActiveX对象。所以上例中，首先检测是否支持XMLHttpRequest对象。

2.发出HTTP请求

如需将请求发送到服务器，可使用XMLHttpRequest对象的open()和send()方法，语法为：

参数method表示请求的类型：GET或POST；url是文件在服务器上的位置；async是布尔型：true表示异步，false表示同步。

例如【例3-25】中代码如下。

3.响应

当请求发送到服务器时，需要执行服务器的响应，可以使用XMLHttpRequest对象的属性获取响应。XMLHttpRequest对象的常用属性见表3-21。

表3-21 XMLHttpRequest对象常用属性

每当readyState改变时，就会触发onreadystatechange事件。以responseText为例，【例3-25】中代码如下。

4.更新网页数据

接收服务器的响应后，需要更新网页数据以完成向服务器的请求。如【例3-25】中，使用元素的innerHTML属性更改页面内容，innerHTML属性的赋值即为XMLHttpRequest对象的responseText属性值。

3.5.2 jQuery概述

jQuery封装了常用JavaScript代码，它提供了一种简便的JavaScript设计模式，可以优化HTML文档操作、事件处理、CSS设计和Ajax交互。

jQuery于2005年由John Resig开发，经过十多年的发展，该框架底层代码经过不断优化变得非常简洁、高效，jQuery是一个轻量级、高效的JavaScript库。

1.jQuery功能

就jQuery的核心特性而言，它能够高效地实现以下功能。

● 取得文档中的元素。

● 修改页面的外观。

● 改变文档的内容。

● 响应用户的交互操作。

● 为页面添加动态效果。

● 无需刷新页面，从服务器获取信息。

2.jQuery优点

jQuery具有以下优点。

● 轻量级：jQuery库文件很小，不仅减少了存储空间，传输时还可以减少传输时间。

● 出色的浏览器兼容：jQuery提供了跨浏览器的标准，同时修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。

● 隐式迭代：jQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减小代码量。

● 链式操作：对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。

3.jQuery安装

使用jQuery，需要在JavaScript中引用jQuery库，所有的jQuery函数都在该文件中。可以在jQuery官网：http://jquery.com/download/下载需要的jQuery库文件“jquery.js”，并放在合适位置，例如HTML文档同级目录的“jquery”文件夹下，同时在HTML文档中需要像引用JS文件一样引用jQuery库文件。也可以直接在线引用jquery官网资源。

在JavaScript代码中，jQuery用$符号表示，见【例3-26】。

【例3-26】 jQuery示例。

上例中，jQuery的入口函数也可以简单写成：

使用“$(" button ").hide();”语句，将button设为隐藏。

以Ajax为例，jQuery将所有的Ajax操作封装到一个函数$.ajax()里，对Ajax进行了封装，简化了Ajax代码，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性，以及XMLHttpRequest对象的创建和使用问题。

最常用的方法见表3-22。

表3-22 jQuery Ajax常用方法

ajax()方法是jQuery对Ajax的基础封装，可以实现所有的Ajax功能，但ajax()方法的参数较多，常用的见表3-23。

表3-23 ajax()方法常用参数项

在此基础上，jQuery对Ajax进一步封装，以减少参数、简化操作，但适用面也窄。get()、post()方法是两个最常用的方法，其参数见表3-24。

表3-24 get()、post()方法参数

例如【例3-25】中的Ajax异步请求，可以使用【例3-27】的方法。

【例3-27】 jQuery Ajax示例。

【例3-27】的运行效果与【例3-25】是一样的，但代码却精简了许多。

由此，可以看出，JavaScript实现了用户与网页的动态交互，而jQuery封装了JavaScript，作为一个高效的轻量级库，可以简化JavaScript编程，使程序更具可读性。