php与html请求,html javascript php 中请求其他页面的方式(ajax jqXHR curl)

使用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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值