jQuery学习笔记 — jQuery 与 Ajax 的应用

Ajax 全称为 “Asynchronous JavaScript and XML”，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

一. Ajax 的优势和不足
1. Ajax 的优势
(1) 不需要插件支持
(2) 优秀的用户体验：这是Ajax技术最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。
(3) 提高web程序的性能：与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交是通过表单 (Form) 来实现的，而数据获取是靠全面刷新来重新获取整页的内容。Ajax模式只是通过XMLHttpRequest 对象向服务器端提交希望提交的数据，即按需发送。
(4) 减轻服务器和带宽的负担

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

二. jQuery 中的 Ajax
jQuery 对 Ajax 操作进行了封装，在 jQuery 中 $.ajax() 方法属于最底层的方法，第2层是 load()、$.get() 和 $.post() 方法，第3层是 $.getScript()方法和 $.getJSON()方法。第2层方法是使用最高的方法。

1. load() 方法
(1) 载入HTML文档
load() 方法是 jQuery中最为简单和常用的 Ajax 方法，能载入远程HTML代码并插入 DOM 中：load(url [, data] [, callback])



2. $.get() 方法和 $.post() 方法
load() 方法通常用来从Web 服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值。在项目中，如果需要传递一些参数给服务器的页面，那么可以使用$.get() 或 $post() 方法(或后面要讲解的$.ajax()方法)

(1) $.get() 方法



(2) $.post()方法
它与 $.get() 方法的结构和使用方式都相同，不过它们之间仍然有一下的区别。
(a) GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器。
(b) GET方式对传输的数据有大小限制(通常不能大于2KB)，而使用POST方式传递的数据量要比GET方式大很多(理论上不受限制)。
(c) GET方式请求的数据会被浏览器缓存起来，因此他人可以从浏览器的历史记录中读取到这些数据。
(d) GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取。

3. $.getScript() 方法和 $.getJson() 方法
(1) $.getScript() 方法：jQuery提供了 $.getScript() 方法来直接加载js文件，与加载一个HTML方法一样简单，并且不需要对 JavaScript 文件进行处理，JavaScript文件会自动执行。
(2) $.getJson() 方法： 用于加载JSON文件，而且还能通过 JSONP 形式回调函数来加载其他网站的数据。关于JSONP：
a. jQuery将自动把URL里的回调函数，例如”url?callback=?”中的最后一个”?”替换为正缺的函数名，以执行回调函数。
b. JSONP(JSON with Padding) 是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 JavaScript Callback 的形式实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本，因此许多通道都可以交换JSON消息。而由于同源策略的限制，开发人员不能在与外部服务器进行通信的时候使用XMLHttpRequest。而JSONP是一种可以绕过同源策略的方法，即通过使用JSON 与
<script> 标记相结合的方法，从服务器端直接返回可执行的 JavaScript 函数调用或者 JavaScript 对象。目前JSONP已经成为各大公司的web应用程序的跨域首选。

4. $.ajax()方法
$.ajax() 方法是 jQuery 最底层的 Ajax 实现。
$.ajax(options); 该方法只有1个参数，但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息，参数以key/value 的形式存在，所有参数都是可选的。





三. 序列化元素
1. serialize()方法：该方法作用于一个jQuery对象，它能够将DOM元素内容序列化为字符串，用于Ajax 请求。该方法不仅仅能用于表单，还能用于其他选择器选取的元素。

2. serializeArray() 方法：该方法不是返回一个字符串，而是将DOM元素序列化后，返回JSON格式的数据。

3. $.param() 方法：该方法是 serialize() 方法的核心，用来对一个数组或对象按照 key/value 进行序列化。

四. jQuery中的 Ajax 全局事件
jQuery 简化 Ajax操作不仅体现在调用Ajax方法和处理响应方面，而且还体现在对调用 Ajax 方法的过程中的HTTP 请求的控制。通过 jQuery 提供的一些自定义全局函数，能够为各种与 Ajax 相关的事件注册回调函数。