第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代码如下: