免费AI编程助手
JQuery学习笔记整理：AJAX
jQuery中封装了很多与AJAX请求相关的方法，这些方法能够让你更轻松地处理AJAX请求，在这里，并不打算讲解AJAX请求的原理，如需了解：可看这里：《JavaScript学习笔记整理（14）：AJAX》。
- $.get()、$.post()
- load()、$.getScript()、$.getJSON()
- $.ajax()
$.get() 使用HTTP GET方法发起Ajax请求
$.post() 使用HTTP POST方法发起Ajax请求
$.get( url [, data ] [, success ] [, type ] );
$.post( url [, data ] [, success ] [, type ] )
$.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对象。
jQuery.load( url [, data ] [, complete] );
<div class="box"></div>
$('.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对象。
});
$('.box').load('example.php?id=1 #box');
//会从返回来的html内容中获取id为box的元素来替换所有div.box元素。
jQuery.getScript( url [, complete] );
$.getScript('example.js');
jQuery.getJSON( url [, data ] [, complete] );
//首先创建一个处理数据的函数
function processJSONP(data){}
//然后向服务器发起请求
$.getJSON( 'example.php?callback=processJSONP&id=1', function(response,textStatus,jqXHR){
//返回的数据会是这样的格式：processJSONP({"name": "tg"});
});
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请求有效。
complete 指定在Ajax完成（不管成功或失败）后执行的回调函数，该函数会传入2个参数：第一个是jqXHR对象，第二个是表示请求状态的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。
contents 一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。
contentType 使用指定的内容编码类型将数据发送给服务器，默认是'application/x-www-form-urlencoded; charset=UTF-8'。
context 用于设置Ajax相关回调函数的上下文对象(也就是函数内的this指针)。
converters 一个数据类型到数据类型转换器的对象。每个转换器的值是一个函数，返回经转换后的请求结果。默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}
crossDomain 指定是否是跨域请求，默认（同域请求为false，跨域请求为true）。如果想强制使用跨域请求（如JSONP形式），就要设置为true。
data 指定发送到服务器的数据，它将自动转为字符串。如果是GET请求，它将被添加到URL后面。
dataFilter 指定处理响应的原始数据的回调函数。该函数还有两个参数：其一表示响应的原始数据的字符串，其二是dataType属性字符串。
dataType 指定返回的数据类型，如不设置，jQuery会智能猜测（可能是xml、json、script或html）。
error 指定Ajax请求失败之后执行的函数。该函数还传入3个参数：第一个是jqXHR对象、 第二个是请求状态字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是错误信息字符串(响应状态的文本描述部分，例如'Not Found'或'Internal Server Error')。跨域脚本和跨域JSONP请求不会调用该函数。
global 指定是否触发全局Ajax事件，默认true。如果设为false，将会阻止全局事件处理函数被触发，例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。
headers 一个额外的"{键:值}"对映射到请求一起发送。此设置会在beforeSend 函数调用之前被设置 ;因此，请求头中的设置值，会被beforeSend 函数内的设置覆盖 。
ifModified 允许当前请求仅在服务器数据改变时获取新数据(如未更改，浏览器从缓存中获取数据)。它使用HTTP头信息Last-Modified来判断。从jQuery 1.4开始，他也会检查服务器指定的'etag'来确定数据是否已被修改。
isLocal 允许当前环境被认定为“本地”，（如文件系统），即使jQuery默认情况下不会这么做，默认false。以下协议目前公认为本地：file, *-extension, and widget。如果isLocal设置需要修改，建议在$.ajaxSetup()方法中这样做一次。
jsonp 重写JSONP请求的回调函数，默认是callback，如果主动设置，将取代callback部分，也就是"url?callback=?"中的callback。
jsonpCallback 指定JSONP请求的回调函数名，将取代jQuery自动生成的随机函数名。
method 指定HTTP请求方法 (比如："POST", "GET ", "PUT","DELETE")
mimeType 一个mime类型用来覆盖XHR的mime类型。
password 指定响应HTTP访问认证请求的密码。
processData 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
scriptCharset 设置该请求加载的脚本文件的字符集。只有当请求时dataType为"jsonp"或"script"，并且type是"GET"才会用于强制修改charset。这相当于设置<script>标签的charset属性。通常只在当前页面和远程数据的内容编码不同时使用。
statusCode 一个 HTTP响应状态码和当请求响应相应的状态码时执行的函数组成的对象，默认{}
success 指定Ajax请求成功完成之后执行的函数。该函数还传入3个参数：第一个是请求返回的数据data、第二个是响应状态字符串textStatus、第三个是jqXHR对象。
timeout 设置请求超时的毫秒值。
traditional 默认false，如果你希望使用传统方式来序列化参数，将该属性设为true。
type 指定请求类型，默认是“GET”，还可以是“POST”、“DELETE”、“PUT”，后两个有些浏览器不支持，慎用。
url 指定请求的URL，默认是当前页面URL。
username 指定响应HTTP访问认证请求的用户名。
xhr 一个用于创建并返回XMLHttpRequest对象的回调函数。你可以重写该属性以提供自己的XHR实现，或增强其功能。默认值：在IE下是ActiveXObject(如果可用)，在其他浏览器中是XMLHttpRequest。
xhrFields 一个具有多个"字段名称-字段值"对的对象，用于对本地XHR对象进行设置。一对「文件名-文件值」在本机设置XHR对象。例如，如果需要，你可以用它来为跨域请求设置XHR对象的withCredentials属性为true。
Ajax事件：
beforeSend 指定在Ajax请求发起之前执行的回调函数，该函数还传入2个参数，第一个是jqXHR对象，第二个是当前settings对象。如果该函数返回false，将会取消本次请求。
complete 指定在Ajax完成（不管成功或失败）后执行的回调函数，该函数会传入2个参数：第一个是jqXHR对象，第二个是表示请求状态的字符串('success'、 'notmodified'、 'error'、 'timeout'、 'abort'或'parsererror')。
error 指定Ajax请求失败之后执行的函数。该函数还传入3个参数：第一个是jqXHR对象、 第二个是请求状态字符串(null、 'timeout'、 'error'、 'abort'和'parsererror')、 第三是错误信息字符串(响应状态的文本描述部分，例如'Not Found'或'Internal Server Error')。跨域脚本和跨域JSONP请求不会调用该函数。
success 指定Ajax请求成功完成之后执行的函数。该函数还传入3个参数：第一个是请求返回的数据data、第二个是响应状态字符串textStatus、第三个是jqXHR对象。
textStatus 请求状态值说明：
abort 表示请求是jqXHR对象的abort方法终止的
error 表示一般的错误，这类错误通常是由服务器报告的
notmodified 表示这次请求得到的内容与上一次请求没有差别
parsererror 表示服务器返回的数据无法正常解析
success 表示请求成功完成
timeout 表示在服务器返回信息之前请求已经超时
dataType （指定返回的数据类型）可能值：
'xml' :返回XML文档，可使用jQuery进行处理。
'html': 返回HTML字符串。
'script': 返回JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
'json': 返回JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号，所有字符串也必须用双引号)，如果解析失败将抛出一个错误。从jQuery 1.9开始，空内容的响应将返回null或{}。
'jsonp': JSONP格式。使用JSONP形式调用函数时，如"url?callback=?"，jQuery将自动替换第二个?为正确的函数名，以执行回调函数。
'text': 返回纯文本字符串。
statusCode 一个 HTTP响应状态码和当请求响应相应的状态码时执行的函数组成的对象（例子）：
$.ajax({
url: 'example.php',
statusCode: {
404: function(){
alert('找不到页面');
},
200: function(){
alert('请求成功');
}
}
});
（1）全局设置
除了一个个参数设置外，如果你的所有Ajax请求都需要设置settings中某些参数时，你可以使用 $.ajaxSetup() 函数进行全局设置（从1.9版本后，仅在document上调用）。
$.ajaxSetup({
timeout: 5000
});
ajaxPrefileter()
指定预先处理Ajax参数选项的回调函数。在所有参数选项被jQuery.ajax()函数处理之前，你可以使用该函数设置的回调函数来预先更改任何参数选项。
$.ajaxPrefilter( [ dataType ,] handler);
参数：
dataType ：一个或多个用空格隔开的数据类型所组成的字符串。如果未指定该参数，则表示所有数据类型。可用的数据类型为"xml"、 "html"、 "text"、 "json"、 "jsonp"、 "script"。该字符串为它们之间的任意组合(多种类型用空格隔开)，例如："xml"、 "text html"、 "script json jsonp"。
handler ： 用于预处理参选项的回调函数，它会传入三个参数：
handler(options,originalOpetions,jqXHR)
options ： 当前Ajax请求的所有参数选项
originalOptions ： 传递给$.ajax()方法的未经修改的残血选项
jqXHR ： 当前请求的jqXHR对象。
（2）事件方法
ajaxComplete(function) 注册在Ajax请求完成后执行的函数（不管请求成功或失败）
ajaxError(function) 注册在Ajax请求失败后执行的函数
ajaxSend(function) 注册在Ajax请求开始之前的执行的函数
ajaxStart(function) 注册在Ajax请求开始时执行的函数
ajaxStop(function) 注册在所有Ajax请求完成之后执行的函数
ajaxSuccess(function) 注册在Ajax请求成功完成之后执行的函数
除了ajaxStop回调函数不会收到任何参数，其他回调函数则会接收到以下三个参数（ajaxError方法还会额外得到一个描述出错信息的参数）：
参数说明：
event ： 描述当前事件的Event对象
jqXHR ： 描述当前请求的jqXHR对象
settings ： 包含当前请求配置信息对象。
$(document).ajaxComplete(function(event,jqXHR,settings){});
$(document).ajaxError(function(event,jqXHR,settings,errorMsg){})
errorMsg ：描述出错信息的参数
注意：从1.9版本开始，上面这些事件方法仅允许在 document 对象上使用，而且这些方法必须在发起任何Ajax请求之前调用，以确保每一个Ajax请求正确触发注册的函数。
更多建议：