JQuery学习笔记整理: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请求正确触发注册的函数。