第6章 jQuery与Ajax的应用

6.1 Ajax的优势和不足

6.1.1 Ajax的优势

1.不需要插件支持
2.优秀的用户体验
3.提高Web程序的性能

Ajax模式只是通过XMLHttpRequest对象向服务器端提交希望提交的数据，即按需发送。
4.减轻服务器和带宽的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担。

6.1.2 Ajax的不足

1.浏览器对XMLHttpRequest对象的支持度不足
2.破坏浏览器前进、“后退”按钮的正常功能
3.对搜索引擎的支持的不足
4.开发和调试工具的缺乏

6.2 Ajax的XMLHttpRequest对象

Ajax的核心是xMLHttpRequest对象，它是Ajax实现的关键—发送异步请求、接收响

应及执行回调都是通过它来完成的。

6.4编写第1个Ajax例子

在正式接触jQuery的Ajax操作之前，先看一个用传统的JavaScript实现的Ajax例子。

点击按钮，返回字符串：

（1）定义一个函数，通过该函数来异步获取信息，代码如下:

（2）声明一个空对象用来装入XMLHttpRequest对象，代码如下：

（3）给XMLHttpRequest对象赋值，代码如下:

IE5, IE 6是以ActiveXObject的方式引入XMLHttpRequest对象的，而其他浏览器的XMLHtttRequest对象是window的子对象。

（4）实例化成功后，使用open()方法初始化}CMLHttpRequest对象，指定HTTP方法和要使用的服务器URL，代码如下:

（5）因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器，代码如下：

在处理该响应之前，事件处理器应该一首先检查readyState的值和HTTP状态。当请求完成加载(readyState值为4)并且响应已经成功(HTTP状态值为200）时，就可以调用一个JavaScript函数来处理该响应内容，代码如下:

6.5 jQuery中的Ajax

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是 load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。首先介绍第2层的方法，因为其使用频率很高。

6.5.1 load()方法

1.载入HTML文档

例如：

test.html页面的HTML内容就会被加载并插入主页面`

的元素中。
2.筛选载入的HTML文档

如果只需要加载test.html页而内的某些元素，那么可以使用load()方法的URL参数来达到目的。

load)方法的URL参数的语法结构为 “urt selector”。注意，URL和选择器之间有一个空格。例如只需要加载test.html页面中class为“para”的内容，以使用如下代码来完成:

3.传递方式

load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；

反之，则会自动转换为POST方式。
4.回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数( callback ),该函数有3个参数，分别代表请求返问的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

6.5.2 `$.get()`方法和`$.post()`方法

1.$.get()方法

$.get()方法使用GET方式来进行异步请求。

它的结构为:
2.$.post()方法

它与$.get()方法的结构和使Il]方式都相同，不过它们之间仍然有以下区别。

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。当然，在Ajax请求中，这种区别对用户是不可见的。

GET方式对传输的数据有大小限制(通常不能大于2KB )，而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)。

GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。

GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_GET[] 获取，而POST方式可以$_POST[] 获取。两种方式都可以用$_REQUEST[]来获取。

6.5.3 `$.getScript()`方法和 `$.getJSON()`方法

1.$.getScript()方法

有时候，在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时，动态地创建<script>标签，jQuery代码如下:

等同于：

但这种方式并不理想。为此，jQuery提供了$.getScript()方法来直接加载.js文件：

1. $.getJSON()方法
  
  $.getJSON()方法用于加载JSON文件，与$.getScript()方法的用法相同。
  
  以下例子加载JSON文件，并在回调函数中处理返回的数据：

jQuery提供了一个通用的遍历方法 $.each() 以用于遍历对象和数组。

$.each()函数不同于jQuery对象的each()方法，它是一个全局函数，不操作jQuery对象，而是以一个数组或者对象作为第1个参数，以一个回调函数作为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引，第2个为对应变量或内容。代码如下:

不仅如此，还能通过使用JSONP形式的回调函数来加载其他网站的JSON数据.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过JavaScript Callback的形式实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本，因此许多通道都可以交换JSON消息。而由于同源策略的限制，开发人员不能在与外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用JSON与<script> 标记相结合的方法，从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选，例如Youtube GData, Google Social Graph, Digg、豆瓣、Del.icio.us等.

6.5.4 `$.ajax()`方法

$.ajax()方法是jQuery最底层的Ajax实现。

它的结构为:

该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value的形式存在，所有参数都是可选的，常用参数如表6-3所示。

前面用到的$.load(), $.get(), $.post(), $.getScript() 和$.getJSON()这些方法，都是基于$.ajax() 方法构建的，$.ajax()方法是jQuert最底层的Ajax实现，因此可以用它来代替前面的所有方法。

6.6 序列化元素

1.serialize()方法

为了获取姓名和内容，必须将字段的值逐个添加到data参数中。代码如下;

这种方式在只有少量字段的表单中，勉强还可以使用，但如果表单元素越来越复杂，使用这种方式在增大工作一鼠的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了简化的方法——serialize()。与jQuery中其他方法一样，serialize()方法也是作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax请求。

2.serializeArray()方法

在jQuery中还有一个与serialize()类似的方法一serializeArray(),该方法不是返回字符串，而是将DOM元素序列化后，返回JOSN格式的数据。jQuery代码如下：
1. $.param()方法
  
  它是serialize()方法的核心，用来对一个数组或对象按照key/value进行序列化。
  
  比如将一个普通的对象序列化:

6.7 jQuery中的Ajax全局事件

通过jQuery提供了一些自定义全局函数，能够为各种与Ajax相关的事件注册回调函数。例如当Ajax请求开始时，会触发ajaxStart()方法的回调函数；当Ajax请求结束时，会触发ajaxStop{)方法的回调函数。这些方法都是全局的方法，因此无论创建它们的代码位于何处，只要有Ajax请求发生时，就会触发它们。

如需要为网页添加一个提示信息，常用的提示信息是“加载中…”，代码如下:

Note:

如果想使某个Ajax请求不受全局方法的影响，那么可以在使用$.ajax(options)方法时，将参数中的global设置为false, jQuery代码如下: