使用jQuery ajax 访问
先在页面头里加入以下类似语句
/script >
jquery-1.4.4.min.js 文件因jquery 版本不同而不同
请求
描述
$(selector).load(url,data,callback)
把远程数据加载到被选的元素中, 这个方法不能跨域
$.ajax(options)
把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)
使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)
使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)
使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)
加载并执行远程的 JavaScript 文件
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 请求的页面返回的数据的类型
(html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
1. $(selector).load( url, [ data ], [ complete(responseText,
textStatus, XMLHttpRequest) ] ) 把一块 HTML 代码加载到页面的某个区域中去
参数:url (String) : 请求的HTML页的URL地址。
data (Map) : (可选参数) 发送至服务器的 key/value 数据。
complete(responseText, textStatus, XMLHttpRequest) 回调函数: (可选参数)
请求完成时(不管Response的返回状态是不是success)的回调函数。
这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。
jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如
"url #some "。
例如: $('#resultdiv').load("alocal.html #ol"); 这里 #ol 为指定选择符(xpath
语法)
示例代码:
$('#resultdiv').load("alocal.html",'', function (responseText,
textStatus, XMLHttpRequest){
this;//在这里this指向的是当前的DOM对象,即$('#resultdiv')
alert(responseText);//请求返回的内容
alert(textStatus);//请求状态:success,error
alert(XMLHttpRequest);//XMLHttpRequest对象
});
这个方法不能跨域,否则没有返回。比如
$('#resultdiv').load("http://www.cnblogs.com/QLeelulu/archive/2008/03/30/1130270.html");
这个函数装入的 文本里含有的script标签里面的语句会执行,但
写文档的操作返回无权限操作的提示,如document.write 语句。如果一定要执行,将打开一个新的页面,
并将document.write 语句将内容写入新文档。
---------------------------------------------------
2. $.get(url,[data],[success(response,status,xhr)],[dataType]) 返回
jqXHR:使用GET方式来进行异步请求,
参数:url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value
的键值对形式表示,会做为QueryString附加到请求URL中。
success(response,status,xhr) : (可选)
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法, 传入的参数有:
•response - 包含来自请求的结果数据
•status - 包含请求的状态
•xhr - 包含 XMLHttpRequest 对象
该函数里,代词this指向调用本次AJAX请求时传递的options参数 如 accepts async timeout
type 等
dataType:可选。规定预计的服务器响应的数据类型。默认地,jQuery 将智能判断。
可能的类型:•"xml" •"html" •"text" •"script" •"json" •"jsonp"
提示: 请求的URL地址的页面,如果文件后缀 为 .txt .htm .html .json , 返回的数据均被默认为
字符串。当返回的字符串格式 符合 script json xml格式时,
定义dataType这个参数值为相应的类型,则返回的数据就不再是简单的字符串, 而是已包装好, 可以直接使用的相关对象。
script类型则直接运行返回数据代表的代码.
请求的URL地址的页面,如果文件后缀 为 .xml .js ,
则提不提供dataType这个参数,返回的就是已包装好,可以直接使用XMLDOM对象 或
返回后就直接运行的js代码。如果提供这个参数,且返回文本的格式不相符,则出错, 无返回。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用
$.ajax。
示例代码:
$.get("alocal.json", {myAction:"get",myName:"lulu"}, function
(data, textStatus){alert(data[1].email); }, "json");
这个语句里, function (data, textStatus) 里的 data 是一个 json
对象。(是alocal.json返回的文本数据经 jscript 自动包装成为一个json 对象,
所以可以在函数里直接使用:alert(data[1].email,这里不能跨域
$.get("alocal.txt", {myAction:"get",myName:"lulu"}, function
(data,
textStatus){document.getElementByIdx_x_x("resultdiv").innerHTML=html2str(data);
}, "text");
这个语句里, function (data, textStatus) 里的 data
是一个文本字符串。$.get()函数的最后一个可选参数为"html"或"text" 结果是一样的. 返回的都是一个文本字符串。可以使用
.innerHTML 或 .innerText 来接收他. 注意, data 字符串里 script 里的语句是不会执行的.
这里不能跨域
$.get("alocal.php", {myAction:"get",myName:"lulu"}, function
(data, textStatus){//alert(data[1].email); }, "script");
这个语句里, function (data, textStatus) 里的 data
是一系列可执行语句.(要求alocal.php返回的是符合Javascript语法的 文本字符串。那么,
$.get()将在返回成功后立即执行这些语句.这里可以跨域
$.get("Http://netoffice/across.php",
{myAction:"get",myName:"lulu"}, function (data,
textStatus){//alert(data[1].email); }, "script");
$.get("alocaljsonp.php?callback=?",
{myAction:"getok",myName:"lulu"}, function (data,
textStatus){alert(data.myAction); }, "jsonp");
这个语句里,是jquery jsonp应用的一种。这里可以跨域. 有关这个应用,后面有详述.
特别说明, 在
是可以是跨域地址的, 如:
--------------------------------------
3. $.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [
dataType ] ) 返回 jqXHR
使用POST方式来进行异步请求
参数:url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选)
载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
dataType (String) : 可选。规定预期的服务器响应返回数据的类型。其规则与上面$.get()相同。
示例代码:
$.post('localpost.php', {mypost: 'mypostok',mypost1: 100, mypost2:
'mypostok2'}, function(data) { alert(data);});
显示:var cc= 'okk- local'; alert(cc);
$.post('localpost.php', {mypost: 'mypostok',mypost1: 100, mypost2:
'mypostok2'}, function(data) { alert(data);},"script");
则先 把var cc= 'okk- local'; alert(cc); 作为 script (js 代码) 先运行, 弹出 窗口显示
okk- local , 再运行成功时回调函数, 弹出 窗口显示 var cc= 'okk- local';
alert(cc);
如果返回的是一个json 格式的 字符串, 且第四个参数 type 指定为 "json", 则在回调函数里,
传入的data参数是一个包装好的 json 对象, 可以直接这样使用:data.mypost
$.post('localpost.php', {mypost: 'mypostok',mypost1: 100,
mypost2: 'mypostok2'}, function(data) {
alert(data.mypost);},"json"); 弹出 窗口显示 mypostok 如果没有提供这个参数,
则data参数就是一个json 格式的 字符串。弹出 窗口显示 {mypost: 'mypostok',mypost1: 100,
mypost2: 'mypostok2'},
$.post('a.xml', {mypost: 'mypostok',mypost1: 100, mypost2:
'mypostok2'}, function(data) {
alert(data.documentElement.childNodes(2).childNodes(0).childNodes(0).nodeValue);});
显示:mainc.htm
$.post('alocal.json', {mypost: 'mypostok',mypost1: 100, mypost2:
'mypostok2'}, function(data) { alert(data);});
显示
[{"id":1,"name":"local-SomeGuy","email":"example1@example.com"},{"id":2,"name":"local-Person
Face","email":"example2@example.com"},{"id":3,"name":"local-Scotty","email":"example3@example.com","0":{"hobbies":["fartings","bikes"]}}]
$.post('alocal.json', {mypost: 'mypostok',mypost1: 100, mypost2:
'mypostok2'}, function(data) { alert(data[0].name);},
"json");
显示 : local-SomeGuy
---------------------------------------------
4. $.getJSON( url, [ data ], [ success(data, textStatus, jqXHR) ] )
返回: jqXHR 用一个HTTP GET请求一个JavaScript JSON数据
参数:•url (String): 装入页面的URL地址。
•data (Map): (可选)发送到服务端的键/值对参数。
•success(data, textStatus, jqXHR): (可选) 当数据装入完成时执行的函数.
示例: $.getJSON( "alocaljsonp.php?callback=?", { myAction:
"getok", myName: "lulu" }, function(json){ alert("JSON Data: " +
json.myAction); });
----------------------------------------------
5. getScript( url, [ success(data, textStatus) ] ) 返回:
XMLHttpRequest 通过 GET 方式请求载入并执行一个 JavaScript 文件
参数: url (String) : 待载入 JS 文件地址。
success(data, textStatus): (可选) 成功载入并执行后,再执行的回调函数。
对于load方法,他的回调函数设置了complete回调,
其他的简易ajax方法,比如get,post,getJSON等,他们的回调函数都是设置了success回调。所以,你可以在load的回调里通过textStatus==”success”
或者 textStatus==”error” 来判断是否调用成功。或者用XMLHttpRequest.status
属性判断是200还是404或者其他的。
简易ajax方法不会触发error事件,但我们可以设置一个全局的ajaxError来作错误处理。
jquery jsonp应用
在 jquery里 jsonp可有以下几种方式应用:(jsonp应用 都是可以跨域的)
1. $.get("alocaljsonp.php?callback=?",
{myAction:"getok",myName:"lulu"}, function (data,
textStatus){alert(data.myAction); }, "jsonp");
$.get("Http://netoffice/acrossjsonp.php?mycallback=?",
{myAction:"getok",myName:"lulu"}, function (data,
textStatus){alert(data.myAction); }, "jsonp");
2. 在页面里先定义好回调函数, 在用下面的方式在页面里使用远程的json对象:
页面里先定义:
function tryjsonp(data)
{alert("fixfname: "+data.myAction);}
再在页面里这样调用这个函数,参数是远程页面返回的 json 对象:
3. $.getJSON( "alocaljsonp.php?callback=?", { myAction: "getok",
myName: "lulu" }, function(json){ alert("JSON Data: " +
json.myAction); });
$.getJSON( "http://netoffice/acrossjsonp.php?mycallback=?", {
myAction: "getok", myName: "lulu" }, function(json){ alert("JSON
Data: " + json.myAction); });
4.直接 $.ajax()函数。使用JSONP 形式, dataType
设置为"jsonp",默认将在url后面加&callback=?。如
"myurl?callback=?" 。
如果提供了jsonp 参数, 比如指定其值为:'onJSONPLoad'
,则callback=?变为onJSONPLoad=?从jQuery
1.5开始,设置jsonp选项值为false,则会阻止jQuery加入"?callback"字符串到URL或试图使用"=?"转换。在这种情况下,应该明确设置jsonpCallback的值,以提供回调函数名,否则请求不成功,虽然回调函数还会成功执行,但$.ajax()函数会触发error事件并执行相应的函数。例如,
{ jsonp: false, jsonpCallback: "callbackName" } , 请求的页面也应该返回:
callbackName(json对象)
格式文本。如果发请求的页面定义有callbackName函数,但在$.ajax()函数里,只有{ jsonp: false } 则
callbackName函数会执行, 之后就触发error事件并执行相应的函数。
jsonpCallback
参数指定回调函数名,在返回的页面里,直接用这个参数的值作为回调函数名包裹json对象法返回。比如指定其值为:'myJSONPfun'
, 则会用已定义好的myJSONPfun函数作为回调函数。和script一样,不会自动缓存结果(默认每次请求都会在url背后加上
"_=[TIMESTAMP]", 除非设置了"cache"参数)。
使用JSONP
形式,请求成功返回后,将立即执行回调函数,然后触发success事件,执行有关函数,同样在该函数里会传入一个json对象供使用,
(如同返回的回调函数)
和dataType 设置为"script"一样,使用JSONP 形式的
$.ajax()函数不会自动缓存结果(默认每次请求都会在url背后加上 "_=[TIMESTAMP]",
除非设置了"cache"参数)。
注意事项:
1、 除了第4种方式外,请求地址一定要有一个参数等于回调函数名。 这个参数名叫啥, 随意, 如 jsoncallback,
callback, mybackfn , 除了第2种方式,这个参数可以是 =? 比如 callback=?
这代表回调函数名由系统随意指定,返回页面里通过查询传来的这个参数的值, 就可得到回调函数名。
2、$.get(), $.getJSON() 两个函数的第二个参数一定要是json格式键/值对的格式。例:{ "email":
"123@163.com"}
3、您请求地址的页面需要返回标准的javascript 函数调用语句:
回调函数名(严格的json格式数据) //末尾无分号
如果格式不对, 就会出现回调函数不会执行的问题。
客户端代码举例:
$.ajax({ url: 'alocaljsonp.php', type: 'GET', dataType: 'jsonp',
jsonpCallback: 'tryjsonp', error: function(){ alert('Error loading
XML document'); }, success: function(data){ alert(data.myAction);}
})
成功返回后,将先执行tryjsonp函数(在页面里先定义), 再执行success:
function(xml)函数。若不提供jsonpCallback: 'tryjsonp',则将直接执行success:
function(xml)函数。若提供了jsonp参数, 如 jsonp: 'mycallback',
则在请求的页面里,要获取客户端传来的参数mycallback的值作为返回的回调函数名。
请求的页面举例: (php 代码)
<?php
$callback =
isset($_GET["callback"])?$_GET["callback"]:"callback";
$array4json-obj =
array("aaa"=>$aaa,"aaa2"=>$bbb);
//header('Content-Type: text/javascript; charset=utf8');
//header('Access-Control-Allow-Origin:
http://www.example.com/');
//header('Access-Control-Max-Age: 3628800');
header('Access-Control-Allow-Methods: GET, POST, PUT,
DELETE');
echo $callback . "(". json_encode($array4json-obj). ")";
?>
使用 jQuery.ajax([settings])
参数: settings 可选。用于配置 Ajax 请求的键值对集合。格式是 json数据格式 : {key1:value1,
key2:value2} , 所有配置都是可选的。
$.ajax()函数可以不带参数调用:$.ajax();
这里会加载当前页面的内容,但其结果没有。若要使用结果,我们可以实现的回调功能之一。也可以所有的选项都可以通过$.ajaxSetup()
函数来全局设置, 调用时$.ajax() 可以不带任何参数。
该函数 返回: XMLHTTPRequest jQuery VER1.5开始 返回jqXHR 对象。(有关 jqXHR
对象见后述)
$.ajax({ url: 'alocal.xml', type: 'GET', dataType: 'xml', timeout:
1000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
alert(xml.documentElement.childNodes(1).childNodes(0).childNodes(0).data);
}});
运行结果 弹窗显示mainc.htm
还可以指定 beforeSend、error、success 或者 complete 回调函数,向用户提供更多有关 Ajax
体验的反馈。
此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。
$.ajax({ url: 'alocaljson.txt', type: 'GET', timeout:
1000,dataType: 'json',
error: function(){ alert('Error loading XML document'); },
success: function(xml){ // alert(xml);
alert(xml[0].name);}});
*.json文件是被当做普通文本文件, 所以, *.txt 与 *.json
是一致的,返回的都是字符串,如果文件里的文本符合json格式,且提供了dataType: 'json'设置,
则返回的是一个json对象。如果文件里的文本符合 xml格式, 且提供了dataType: 'xml'设置,
则返回的是一个xml对象。若提供了dataType设置,但文本格式不符,则无成功返回且触发error事件。*.xml文件却不一样,
默认它返回的是一个xml对象。
$.ajax({ url: 'alocal.xml', type: 'GET', timeout: 1000,
error: function(){ alert('Error loading XML document'); },
success: function(xml){
alert(xml.documentElement.childNodes(1).childNodes(0).childNodes(0).data);}
});
$.ajax({ url: 'restsever/index.php/api/tyds/user/id/1', type:
'GET', error: function(){ alert('Error loading XML document');
},
success: function(data){
alert(data.documentElement.childNodes(3).childNodes(0).nodeValue);}
})
$.ajax({ url: 'restsever/index.php/api/tyds/user/id/1/format/json',
type: 'GET', error: function(){
alert('Error loading XML document'); },
success: function(data){ alert(data.name);}
})
$.get('http://tempweb/restsever/index.php/api/tyds/user/id/1/format/json',
'',function (data, textStatus){alert(data.name); }, "json");
当 success 回调函数返回 XML 文档后,您可以使用 jQuery 检索这个 XML 文档,其方式与检索 HTML
文档是一样的。这样使得处理 XML 文档变得相当地容易,并且把内容和数据集成到了您的 Web 站点里面。下面的代码 显示了
success 函数的一个扩展,它为 XML 中的每个 元素都添加了一个列表项到 Web 页面中。
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text();
$('
').html(item_text)
.appendTo('ol');
});
}
$.ajax(options) 函数具体的参数和事件见下表。该函数 1.5版后 把url 单 参数 函数定义为:
jQuery.ajax( url [, settings] )
jQuery中 $.ajax(options) 的options
参数名
类型
描述
url
String
(默认: 当前页地址) 发送请求的地址。
type
String
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为
"GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
accepts
String
这个值在请求头里发送,告诉服务器,他接受的返回数据的类型。和参数dataType选择值一样(默认值根据参数dataType的不同设置而变化。如果要设置修改该值,建议只在函数$.ajaxSetup()中设置修改它。
timeout
Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async
Boolean
(默认: true)
默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为
false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
cache
Boolean
(默认: true, 数据类型dataType为 'script' 和
'jsonp'时 默认:false) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
contents(1.5新增)
Map
一个以"{字符串:正则表达式}"配对的对象,用来确定jQuery将如何解析响应,给定其内容类型。
例:contents: {script: /javascript|ecmascript/ }
contentType
String
(默认:
"application/x-www-form-urlencoded")
发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
context
Object
这个对象用于设置Ajax相关回调函数的上下文。也就是说,让回调函数内this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数)。比如指定一个DOM元素作为context参数,这样就设置了success回调函数的上下文为这个DOM元素。就像这样:
$.ajax({ url: "test.html", context: document.body, success:
function(){ $(this).addClass("done"); }});
converters(1.5新增)
Map
默认: {"* text": window.String, "text
html": true, "text json": jQuery.parseJSON, "text xml":
jQuery.parseXML} 一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数,返回响应的转化值
属性
值
功能
* text
window.String
任意内容转换为字符串
text html
true
文本转换为HTML(true表示不需要转换,直接返回)
text json
jQuery.parseJSON
文本转换为JSON
text script
function( text ) {
jQuery.globaleval_r( text
);
return text;
}
用eval执行text
text xml
jQuery.parseXML
文本转换为XML
如果在上表示中没有找到对应的转换函数(类型A >
类型B),就再次遍历上表,寻找新的类型C,使得可以 A > C >
B。
crossDomain(1.5新增)
Boolean
默认: 同域请求为false, 跨域请求为true
上面说过, 使用 XMLHttpRequest 对象的AJAX 访问 在IE8 里,
可以跨域访问,但会弹出窗口提示跨域有风险。在FIREFOX9.01 里, 不能跨域使用。
$.ajax() 请求 html,xml,json, text 时, 和 FIREFOX9.01
一样,默认是不允许跨域。如果url是指向另一个域的页面且settings里没有明确设置crossDomain的值, 则请求不成功,
并触发error事件, 执行 error指定的回调函数.
$.ajax() 请求 script,jsonp
时,和html页面里script标签的scr属性一样允许跨域。但只执行返回的代码,没有代码文本返回.
如果你在$.ajax()里明确设置crossDomain的值,则当值是false时,$.ajax()用XMLHttpRequest对象提交请求,
并加上请求头headers[ "X-Requested-With" ] = "XMLHttpRequest";
告知服务器请求是用XMLHttpRequest方式提交的。该方式若请求成功,回调函数里可用返回的结果. 若请求 script
jsonp, 同样会在返回成功时执行返回的代码,同时有可访问的代码文本返回, ( XMLHttpRequest
的属性responseText, responseXML。)
当值是true时,$.ajax()用和html页面里script标签的scr属性一样的方式提交请求,并执行返回的代码或回调函数。与XMLHttpRequest无关,所以没有返回的responseText或
responseXML可用在有关回调函数里。
data
Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在
URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery
将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为
'&foo=bar1&foo=bar2'。
dataType
String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或
responseText,并作为回调函数参数传递,可用值:
•"xml": 返回 XML 文档,可用 jQuery 处理。
•"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
•"script": 评估为JavaScript并返回纯文本响应。不会自动缓存结果(默认每次请求都会在url背后加上
"_=[TIMESTAMP]",
除非设置了"cache"参数)。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
•"json": 评估为JSON响应,并返回一个JavaScript对象(JSON 数据对象)。可在回调函数里直接使用返回的JSON
数据对象, 如:alert(返回的JSON
数据对象[0].xxx);(见json.org的更多信息,注意必须返回正确的JSON格式。)
•"jsonp": JSONP 格式。使用JSONP
形式调用函数时,默认将在url后面加&callback=?。如 "myurl?callback=?"
jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。如果提供了jsonp 参数, 比如指定其值为:'onJSONPLoad'
,则callback=?变为onJSONPLoad=?如果提供了jsonpCallback
参数,比如指定其值为:'myJSONPfun' ,
则会用已定义好的myJSONPfun函数作为回调函数。和script一样,不会自动缓存结果(默认每次请求都会在url背后加上
"_=[TIMESTAMP]", 除非设置了"cache"参数)。
•"text": 返回纯文本字符串。
global
Boolean
(默认: true) 是否触发全局 AJAX 事件。设置为 false
将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
headers(1.5新增)
Map
Default: {}
一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数已调用;因此,消息头中的值设置可以覆盖beforeSend函数范围内的任何设置。
ifModified
Boolean
(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包
Last-Modified 头信息判断。在jQuery 1.4中,他也会检查服务器指定的'etag'来确定数据没有被修改过。
isLocal(1.5.1新增)
Boolean
默认:
取决于当前的位置协议允许当前环境被认定为“本地”,(如文件系统),即使jQuery默认情况下不会承认它。以下协议目前公认为本地:file,
*-extension, and
widget。如果isLocal设置需要修改,建议在$.ajaxSetup()方法中这样做一次。
jsonp
String
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery
1.5,,设置jsonp选项为false阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下,你也应该明确设置jsonpCallback设置。例如,
{ jsonp: false, jsonpCallback: "callbackName" }
jsonpCallback
String, Function
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。在jQuery
1.5,你也可以使用一个函数来设置该值,在这种情况下jsonpCallback的值为该函数的返回值(其返回的值应该是字符串)。
mimeType(1.5.1新增)
String
一个mime类型用来覆盖XHR的 MIME类型。
username
String
用于响应HTTP访问认证请求的用户名
password
String
用于响应HTTP访问认证请求的密码
scriptCharset
String
只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。
statusCode(1.5新增)
Map
默认: {}
一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。例如,如果响应状态是404,将触发以下警报:
$.ajax({
statusCode: {404: function() {
alert('page not found');
}
});
如果请求成功,状态代码函数和success事件触发的函数一样,会传入相同的参数;如果请求返回错误,状态代码函数和error事件触发的函数一样,传入相同的参数。
processData
Boolean
(默认: true)
默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型
"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为
false。
traditional
Boolean
如果你想要用传统的方式来序列化数据,那么就设置为true。参考工具分类下面的jQuery.param 方法.
xhr
Function
他的值是个函数。
调用$.ajax()函数会产生并返回一个xhr对象。一般这个过程是jQuery内部处理的.
但设置这个值(一个重载函数--重载jQuery.ajaxSettings.xhr),
var _super = jQuery.ajaxSettings.xhr,然后在函数里自己操作或修改 _super()
返回的xhr对象,最后把修改后的xhr返回。那么$.ajax()返回的就是这个xhr。通过这个xhr,可以从底层观察和操作这个Ajax请求,比如,可以调用这个对象的方法:xhr.abort()
以在该请求完成前终止该请求。
目前浏览器Firefox 有个bug: 虽然函数 .getResponseHeader('Content-Type')
能返回一个非空字符串, 但函数 .getAllResponseHeaders()
返回的是空字符串。而且,在jQuery里自动解码JSON CORS
类型请求的返回内容也是不支持的。一个较好的解决方法,就要用到这个设置:用下面的代码重载
jQuery.ajaxSettings.xhr函数:
var _super = jQuery.ajaxSettings.xhr;
jQuery.ajaxSettings.xhr = function () {
var xhr = _super(),
getAllResponseHeaders = xhr.getAllResponseHeaders;
xhr.getAllResponseHeaders = function () {
if ( getAllResponseHeaders() ) {
return getAllResponseHeaders();
}
var allHeaders = "";
$( ["Cache-Control", "Content-Language", "Content-Type",
"Expires", "Last-Modified", "Pragma"] ).each(function (i,
header_name) {
if ( xhr.getResponseHeader( header_name ) ) {
allHeaders += header_name + ": " + xhr.getResponseHeader(
header_name ) + "\n";
}
return allHeaders;
});
};
return xhr;
};
jQuery中Ajax会触发很多事件。有两种事件,一种是局部事件,一种是全局事件:局部事件:通过$.ajax来调用并且分配。
全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。
$("#loading").bind("ajaxSend", function(){ //使用bind
$(this).show();
});
$("#loading").ajaxComplete(function(){ //直接使用ajaxComplete
$(this).hide();
});
当然,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false
$.ajax({ url: "test.html", global: false, // ... });
下表按事件顺序列出:各事件触发的函数 这里 我们叫该事件的回调函数
参数名
类型
描述
ajaxStart
全局事件
开始新的Ajax请求,并且此时没有其他ajax请求正在进行。该事件无任何参数传入回调函数
beforeSend
局部事件
可使用该事件在发送请求前修改 XMLHttpRequest 对象,如添加自定义 HTTP
头。该事件把XMLHttpRequest 对象和调用这个ajax的时候的参数settings传入回调函数。这是一个 Ajax
事件。如果返回 false 可以取消本次 ajax 请求。从 jQuery 1.5开始,不论什么请求类型, 都会触发该事件.
function
(XMLHttpRequest, ajaxsettings ) {
this; // the options for this ajax
request
}
ajaxSend
全局事件
请求开始前触发的全局事件。在IE8.0里, 该事件不会触发,FireFox9.0里会触发
error
局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。 (默认: 自动判断
(xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest
对象,错误信息,(可能)捕获的错误对象。
如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "abort" 和
"parsererror"。这是一个 Ajax Event。 在jQuery 1.5,
在error设置可以接受函数组成的数组。每个函数将被依次调用。 注意:此处理程序不被跨域脚本和JSONP形式的请求调用。
function (XMLHttpRequest,
textStatus, errorThrown) {
//
通常情况下textStatus和errorThown只有其中一个有值
this; // the options for this ajax
request
}
ajaxError
全局事件
全局的发生错误时触发
ajaxError(function(event,xhr,options,exc))
•event - 包含 event 对象
•xhr - 包含 XMLHttpRequest 对象
•options - 包含 AJAX 请求中使用的选项
•exc - 包含 JavaScript exception
dataFilter(data, type)
局部事件
在请求成功之后调用。传入返回的数据以及dataType参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
success
局部事件
请求成功后触发,其回调函数有两个参数:服务器返回数据,返回状态
function (data,
textStatus) {
// data could be xmlDoc, jsonObj,
html, text, etc...
this;
// the options for this ajax
request
}
ajaxSuccess
全局事件
全局的请求成功时触发,
complete
局部事件
请求完成后回调函数 ( 请求成功或失败时均调用,
即便是同步请求,你都能在请求完成时触发这个事件。)。两个参数: XMLHttpRequest
对象,一个代表请求状态的字符串,以下值之一("success", "notmodified", "error", "timeout",
"abort", or "parsererror")
function (XMLHttpRequest,
textStatus) {
this;
// the options for this ajax
request
}
ajaxComplete
全局事件
全局的请求完成时触发
ajaxStop
全局事件
当没有Ajax正在进行中的时候,触发。
当开始一个 jquery的 ajax请求,不管使用 $.ajax()还是
get/post/load/getScript/getJSON等方法 ,
都会触发上述全局事件(ajaxSend事件在IE8.0里不会触发,FireFox9.0里会触发)。除了ajaxStart和ajaxStop之外,其他的事件都有3个参数:event,
XMLHttpRequest, ajaxOptions.
第一个是事件,第二个是XHR对象,第三个参数最有用,是当时调用这个ajax的时候的参数。对于ajaxError,还有第四个参数thrownError,只有当异常发生时才会被传递。
上述全局事件在代码里的使用, 等同于 $("xx").click(function(){}) 这种语法方式使用。
比如我们可以利用ajaxOptions来写一个全局的ajax事件。
$("#msg").ajaxSend(function(e,xhr,o) {
$(this).html("正在请求"+o.url);
});
这个例子使我们就可以很方便的全局地在某个地方显示当前的ajax状态。因为第三个参数实际上是传递给ajax的参数。所以ajaxOptions.url属性总是有效的。
还有更丰富的例子。
如果你用ajax调用,还可以传递自定义参数。下面的例子我就自定义了一个msg参数给了ajax调用
//自定义参数msg
$.ajax({url:"test1.html",type:"get",msg:"页面一"});
$.ajax({url:"test2.html",type:"get",msg:"页面二"});
$.ajax({url:"test3.html",type:"get",msg:"页面三"});
$.ajax({url:"test4.html",type:"get",msg:"页面四"});
//这里就能获取到自定义参数msg。
//这可以用来区别对待不同的ajax请求。
$("#msg").ajaxSend(function(e,xhr,o) {
$(this).html("正在请求"+o.msg);
}).ajaxSuccess(function(e,xhr,o) {
$(this).html(o.msg+"请求成功");
}).ajaxError(function(e,xhr,o) {
$(this).html(o.msg+"请求失败");
});
一个在页面里绑定ajax任务的例子:
$(function(){
// Bind a click event to the 'ajax' object id
$("#ajax").bind("click", function( evt ){
// Javascript needs totake over. So stop the browser from
redirecting the page
evt.preventDefault();
// AJAX request to get the data
$.ajax({
// URL from the link that was clicked on
url: $(this).attr("href"),
// Success function. the 'data' parameter is an array of objects
that can be looped over
success: function(data, textStatus, jqXHR){
alert('Successful AJAX request!');
},
// Failed to load request. This could be caused by any number of
problems like server issues, bad links, etc.
error: function(jqXHR, textStatus, errorThrown){
alert('Oh no! A problem with the AJAX request!');
}
});
});
});
jqXHR 对象
jqXHR 这是一个 XMLHTTPRequest对象的jQuery扩展加强版, 拥有XMLHTTPRequest的所有属性,
方法,事件。同时拥有jQuery的特有属性和方法。
在jQuery 1.5.1后,
jqXHR对象包含了overrideMimeType方法。他一般在beforeSend事件回电函数里调用。比如:
$.ajax({
url: 'http://fiddle.jshell.net/favicon.png',
beforeSend: function( xhr ) {
xhr.overrideMimeType( 'text/plain; charset=x-user-defined' );
},
success:function( data ) {... }
});
jqXHR是一个deferred对象(jquery 自有的一种对象类型)。 提供.error()
.success()和.complete()方法。(提示: jqXHR.success(), jqXHR.error(), 和
jqXHR.complete() 在 jQuery 1.8后 将叫做. jqXHR.done(), jqXHR.fail(), and
jqXHR.always()
)这些方法在$.ajax()请求终止后调用执行。他们接收的参数和$.ajax()有关事件的回调函数接收的参数相同。在jQuery
1.5不仅允许你指定一个请求的多个回调,甚至允许在请求完成后设置回调函数(如果请求已经完成,回调函数立即触发)。
代码举例:即使已在 $.ajax({...}) 里已写有关事件触发时调用的回调函数 也可:
var jqxhr = $.ajax( "example.php" )
.done(function() { alert("success"); })
.fail(function() { alert("error"); })
.always(function() { alert("complete"); });
可写多次done() .fail()和.always()方法, 他们会按定义先后执行
jqxhr.always(function() { alert("second complete"); });
代码 接收$.ajax({...})返回的 jqxhr 对象, 并用 链式写法 写 done()
.fail()和.always()方法,参数是一个函数定义。这些函数接收的参数和$.ajax({...})有关事件的回调函数接收的参数相同。代码里,没用到该参数。
为了兼容XMLHttpRequest ,jqXHR对象拥有下列属性和方法:readyState status statusText
responseXML responseText
setRequestHeader(name, value) getAllResponseHeaders()
getResponseHeader() abort()
对象不提供onreadystatechange机制,但有success , error ,
complete和status就可满足多数要求。
在回调函数里 this 代词指向这个Ajax()的参数 settings
对象,如果在settings里指定了context选项,则在所有回调函数里 this
代词指向context选项值代表的对象
某些类型Ajax的请求,如JSONP形式和跨域的GET请求,请不要使用XHR;在这些情况下XMLHttpRequest和textStatus参数传递给回调是undefined
。