JQuery学习笔记整理：AJAX_H5之家 - 中国HTML5教程资源分享第一站

jQuery中封装了很多与AJAX请求相关的方法，这些方法能够让你更轻松地处理AJAX请求，在这里，并不打算讲解AJAX请求的原理，如需了解：可看这里：《JavaScript学习笔记整理（14）：AJAX》。

1、$.get()、$.post()

$.get() 使用HTTP GET方法发起Ajax请求

$.post() 使用HTTP POST方法发起Ajax请求

（1）$.get()

$.get()使用HTTP GET方法发起Ajax请求；$.post() 使用HTTP POST方法发起Ajax请求。

$.get( url [, data ] [, success ] [, type ] );

$.post( url [, data ] [, success ] [, type ] )

参数说明：

url ：指定请求的目标URL

data ：发送请求传递的数据

success ：请求成功时执行的回调函数，它会传递三个参数：第一个是response（请求返回的数据），第二个是请求状态文本（例如：success、notmodified、error、timeout、abort等），第三个是当前jqXHR对象（经过jQuery封装的XMLHttpRequest对象）。

type ：指定请求返回的数据类型，可以是xml、html、script、json、jsonp、text。如果省略此参数，jQuery会自动猜测返回数据类型，可能是：xml、json、script或html。

$.get( 'example.php?id=1' );

$.get( 'example.php', 'id=1' ); //和第一条等价

$.get( 'example.php', {id:1} ); //和第一条等价

$.get( 'example.php', {id:1}, function(response,textStatus,jqXHR){

//response是请求返回数据

//textStatus可能是success、notmodified

},'json'); //指定返回数据的类型是JSON格式，jQuery将会尝试将返回数据转换为JSON对象。

$.get()和$.post()两个方法的用法完全一样，底层也都是使用$.ajax()来实现的，但是两者请求方式不一样，前者是GET请求，后者是POST请求。

2、load()、$.getScript()、$.getJSON()

（1）load()

load()方法仅用来从服务器获取HTML数据，并替换当前匹配元素内容。

jQuery.load( url [, data ] [, complete] );

参数说明：

url ：指定请求的目标URL

data ：发送请求传递的数据

complete ：请求完成（不管成功或失败）后执行的回调函数，它会传递三个参数：第一个是response（请求返回的数据），第二个是请求状态文本（例如：success），第三个是当前jqXHR对象（经过jQuery封装的XMLHttpRequest对象）。

load()会返回jQuery对象本身。

$('.box').load('example.php'); //加载example.php的html内容来替换当前文档的每一个div.box元素

$('.box').load('example.php?id=1');

$('.box').load('example.php',{id: 1});

$('.box').load('example.php',{id: 1},function(response,textStatus,jqXHR){

//response 是返回的原始文本数据

//textStatus 是请求状态文本

//jqXHR是经过jQuery封装的XMLHttpRequest对象。

});

load()方法还有一个额外的用法：

$('.box').load('example.php?id=1 #box');

//会从返回来的html内容中获取id为box的元素来替换所有div.box元素。

注意：jQuery会自动过滤load()返回来的html内容中的DOCTYPE以及html、head、body的标签后再进行替换，而且如果jQuery对象中没有匹配元素，load()不会执行，既不会发送ajax请求，也不会执行回调函数。

（2）$.getScript()

$.getScript()方法用来载入JavaScript文件（以HTTP GET形式），并在全局作用域下执行其中的语句，而且它可以加载跨域的JS文件。

jQuery.getScript( url [, complete] );

参数说明：

url ：指定请求的目标URL

complete ：请求成功后执行的回调函数，它会传递三个参数：第一个是response（请求返回的数据），第二个是请求状态文本（例如：success），第三个是当前jqXHR对象（经过jQuery封装的XMLHttpRequest对象）。

$.getScript('example.js');

注意：如果多次加载相同URL的js文件，每次都会重新加载该js文件，因为getScript()函数会在js文件的URL后添加一个时间戳参数后缀，从而避免浏览器获取缓存的js文件。

（3）$.getJSON()

$.getJSON()方法用来从服务器获取JSON数据（以HTTP GET形式）。

jQuery.getJSON( url [, data ] [, complete] );

参数说明：

url ：指定请求的目标URL

data ：发送请求传递的数据

（4）使用JSONP

JSONP支持跨域加载数据。

//首先创建一个处理数据的函数

function processJSONP(data){}

//然后向服务器发起请求

$.getJSON( 'example.php?callback=processJSONP&id=1', function(response,textStatus,jqXHR){

//返回的数据会是这样的格式：processJSONP({"name": "tg"});

});

注意上面的请求地址格式（加上了 callback=processJSONP ）。

注意：因为jQuery中的所有关于AJAX方法在默认情况下都是异步的（如果将async设置为false就是同步），所以如果你要对AJAX方法返回来的数据进行操作时，就需要在complete回调函数里操作。

相关文章：JQuery的Ajax请求跨域问题

3、$.ajax()

上面都是介绍jQuery提供的一些便捷的AJAX方法（底层都是通过$.ajax()实现），接下来了解一下jQuery Ajax底层的API。

语法

$.ajax( url [, settings ])

参数说明：

url ：指定请求的目标URL

settings ：一个以键值对组成的请求设置，用来指定发送请求的可选参数。

settings中的可选参数说明：

accepts 发送的内容类型请求头，用于告诉服务器——浏览器可以接收服务器返回何种类型的响应，默认：取决于数据类型dataType

async 指定是否是异步请求，默认是true。当设置为true（同步请求）时，请求时将锁定浏览器，直到获取远程数据后才会执行其他操作。

beforeSend 指定在Ajax请求发起之前执行的回调函数，该函数还传入2个参数，第一个是jqXHR对象，第二个是当前settings对象。如果该函数返回false，将会取消本次请求。

cache 指定是否缓存URL请求，默认为true(dataType为'script'或'jsonp'时，则默认为false)。如果设为false将强制浏览器不缓存当前URL请求。该参数只对HEAD、GET请求有效。