jQuery Ajax 应用实例解析大全Word文档格式.docx
《jQuery Ajax 应用实例解析大全Word文档格式.docx》由会员分享,可在线阅读,更多相关《jQuery Ajax 应用实例解析大全Word文档格式.docx(17页珍藏版)》请在冰豆网上搜索。
还有get()和post()示例都是跨域调用的,发现传上来后没办法获取结果,所以把运行按钮去掉了。
2.jQuery.get(url,[data],[callback]):
使用GET方式来进行异步请求
参数:
发送请求的URL地址.
(可选)要发送给服务器的数据,以Key/value的键值对形式表示,会做为QueryString附加到请求URL中。
callback(Function):
(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的GET请求功能以取代复杂$.ajax。
请求成功时可调用回调函数。
如果需要在出错时执行函数,请使用$.ajax。
$.get("
./Ajax.aspx"
{Action:
"
get"
Name:
lulu"
},function(data,textStatus){
//返回的data可以是xmlDoc,jsonObj,html,text,等等.
//在这里this指向的是Ajax请求的选项配置信息,请参考下图
alert(data);
success,error等等。
当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
//alert(this);
点击发送请求:
jQuery.get()回调函数里面的this,指向的是Ajax请求的选项配置信息:
3.jQuery.post(url,[data],[callback],[type]):
使用POST方式来进行异步请求
(可选)要发送给服务器的数据,以Key/value的键值对形式表示。
type(String):
(可选)官方的说明是:
Typeofdatatobesent。
其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的POST请求功能以取代复杂$.ajax。
Ajax.aspx:
Response.ContentType="
application/json"
;
Response.Write("
{result:
'
+Request["
Name"
]+"
你好!
(这消息来自服务器)'
}"
);
jQuery代码:
$.post("
Ajax.aspx"
{Action:
"
post"
Name:
},
function(data,textStatus){
//data可以是xmlDoc,jsonObj,html,text,等等.
//this;
//这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this
alert(data.result);
},"
json"
点击提交:
这里设置了请求的格式为"
:
如果你设置了请求的格式为"
,此时你没有设置Response回来的ContentType为:
那么你将无法捕捉到返回的数据。
注意一下,alert(data.result);
由于设置了Accept报头为“json”,这里返回的data就是一个对象,并不需要用eval()来转换为对象。
4.jQuery.getScript(url,[callback]):
通过GET方式请求载入并执行一个JavaScript文件。
参数
待载入JS文件地址。
(可选)成功载入后回调函数。
jQuery1.2版本之前,getScript只能调用同域JS文件。
1.2中,您可以跨域调用JavaScript文件。
注意:
Safari2或更早的版本不能在全局作用域中同步执行脚本。
如果通过getScript加入脚本,请加入延时函数。
这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:
加载并执行test.js。
jQuery代码:
$.getScript("
test.js"
加载并执行AjaxEvent.js,成功后显示信息。
AjaxEvent.js"
function(){
alert("
AjaxEvent.js加载完成并执行完成.你再点击上面的Get或Post按钮看看有什么不同?
加载完后请重新点击一下上面的Load请求看看有什么不同。
jQueryAjax事件
Ajax请求会产生若干不同的事件,我们可以订阅这些事件并在其中处理我们的逻辑。
在jQuery这里有两种Ajax事件:
局部事件和全局事件。
局部事件就是在每次的Ajax请求时在方法内定义的,例如:
$.ajax({
beforeSend:
function(){
//HandlethebeforeSendevent
},
complete:
//Handlethecompleteevent
}
//...
全局事件是每次的Ajax请求都会触发的,它会向DOM中的所有元素广播,在上面getScript()示例中加载的脚本就是全局Ajax事件。
全局事件可以如下定义:
$("
#loading"
).bind("
ajaxSend"
$(this).show();
}).bind("
ajaxComplete"
$(this).hide();
或者:
).ajaxStart(function(){
我们可以在特定的请求将全局事件禁用,只要设置下global选项就可以了:
url:
test.html"
global:
false,//禁用全局Ajax事件.
下面是jQuery官方给出的完整的Ajax事件列表:
∙ajaxStart(GlobalEvent)
∙ThiseventisbroadcastifanAjaxrequestisstartedandnootherAjaxrequestsarecurrentlyrunning.
∙
obeforeSend(LocalEvent)
oThisevent,whichistriggeredbeforeanAjaxrequestisstarted,allowsyoutomodifytheXMLHttpRequestobject(settingadditionalheaders,ifneedbe.)
oajaxSend(GlobalEvent)
oThisglobaleventisalsotriggeredbeforetherequestisrun.
osuccess(LocalEvent)
oThiseventisonlycallediftherequestwassuccessful(noerrorsfromtheserver,noerrorswiththedata).
oajaxSuccess(GlobalEvent)
oThiseventisalsoonlycallediftherequestwassuccessful.
oerror(LocalEvent)
oThiseventisonlycalledifanerroroccurredwiththerequest(youcanneverhavebothanerrorandasuccesscallbackwitharequest).
oajaxError(GlobalEvent)
oThisglobaleventbehavesthesameasthelocalerrorevent.
ocomplete(LocalEvent)
oThiseventiscalledregardlessofiftherequestwassuccessful,ornot.Youwillalwaysreceiveacompletecallback,evenforsynchronousrequests.
oajaxComplete(GlobalEvent)
oThiseventbehavesthesameasthecompleteeventandwillbetriggeredeverytimeanAjaxrequestfinishes.
∙ajaxStop(GlobalEvent)
∙ThisglobaleventistriggerediftherearenomoreAjaxrequestsbeingprocessed.
∙具体的全局事件请参考API文档。
好了,下面开始说jQuery里面功能最强的Ajax请求方法$.ajax();
jQuery.ajax(options):
通过HTTP请求加载远程数据
这个是jQuery的底层AJAX实现。
简单易用的高层实现见$.get,$.post等。
$.ajax()返回其创建的XMLHttpRequest对象。
大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
如果你指定了dataType选项,请确保服务器返回正确的MIME信息,(如xml返回"
text/xml"
)。
错误的MIME类型可能导致不可预知的错误。
见SpecifyingtheDataTypeforAJAXRequests。
当设置datatype类型为'
script'
的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax()只有一个参数:
参数key/value对象,包含各配置及回调函数信息。
详细参数选项见下。
jQuery1.2中,您可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。
使用JSONP形式调用函数时,如"
myurl?
callback=?
jQuery将自动替换?
为正确的函数名,以执行回调函数。
数据类型设置为"
jsonp"
时,jQuery将自动调用回调函数。
(这个我不是很懂)
参数列表:
参数名
类型
描述
url
String
(默认:
当前页地址)发送请求的地址。
type
GET"
)请求方式("
POST"
或"
),默认为"
其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。
timeout
Number
设置请求超时时间(毫秒)。
此设置将覆盖全局设置。
async
Boolean
true)默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend
Function
发送请求前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头。
XMLHttpRequest对象是唯一的参数。
function(XMLHttpRequest){
this;
//theoptionsforthisajaxrequest
}
cache
true)jQuery1.2新功能,设置为false将不会从浏览器缓存中加载请求信息。
complete
请求完成后回调函数(请求成功或失败时均调用)。
XMLHttpRequest对象,成功信息字符串。
function(XMLHttpRequest,textStatus){
contentType
application/x-www-form-urlencoded"
)发送信息至服务器时内容编码类型。
默认值适合大多数应用场合。
data
Object,
发送到服务器的数据。
将自动转换为请求字符串格式。
GET请求中将附加在URL后。
查看processData选项说明以禁止此自动转换。
必须为Key/Value格式。
如果为数组,jQuery将自动为不同值对应同一个名称。
如{foo:
["
bar1"
"
bar2"
]}转换为'
&
foo=bar1&
foo=bar2'
dataType
预期服务器返回的数据类型。
如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递,可用值:
xml"
:
返回XML文档,可用jQuery处理。
html"
返回纯文本HTML信息;
包含script元素。
script"
返回纯文本JavaScript代码。
不会自动缓存结果。
返回JSON数据。
JSONP格式。
error
自动判断(xml或html))请求失败时将调用此方法。
这个方法有三个参数:
XMLHttpRequest对象,错误信息,(可能)捕获的错误对象。
function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThown只有其中一个有值
global
true)是否触发全局AJAX事件。
设置为false将不会触发全局AJAX事件,如ajaxStart或ajaxStop。
可用于控制不同的Ajax事件
ifModified
false)仅在服务器数据改变时获取新数据。
使用HTTP包Last-Modified头信息判断。
processData
true)默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型"
如果要发送DOM树信息或其它不希望转换的信息,请设置为false。
success
请求成功后回调函数。
这个方法有两个参数:
服务器返回数据,返回状态
function(data,textStatus){
//datacouldbexmlDoc,jsonObj,html,text,etc...
这里有几个Ajax事件参数:
beforeSend,success,complete,error。
我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。
注意一下,这些Ajax事件里面的this都是指向Ajax请求的选项信息的(请参考说get()方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。
示例代码,获取博客园首页的文章题目:
$.ajax({
type:
function(XMLHttpRequest){
//ShowLoading();
success:
function(data,textStatus){
.ajax.ajaxResult"
).html("
item"
data).each(function(i,domEle){
).append("
<
li>
+$(domEle).children("
title"
).text()+"
/li>
function(XMLHttpRequest,textStatus){
//HideLoading();
error:
//请求出错处理
这里将显示首页文章列表。
其他
jQuery.ajaxSetup(options):
设置全局AJAX默认选项。
设置AJAX请求默认地址为"
/xmlhttp/"
,禁止触发全局AJAX事件,用POST代替默认GET方法。
其后的AJAX请求不再设置任何选项参数。
$.ajaxSetup({
false,
$.ajax({data:
myData});
serialize()与serializeArray()
serialize():
序列表表格内容为字符串。
serializeArray():
序列化表格元素(类似'
.serialize()'
方法)返回JSON数据结构数据。
示例:
HTML代码:
pid="
results"
>
b>
Results:
<
/b>
/p>
form>
selectname="
single"
option>
Single<
/option>
Single2<
/select>
multiple"
multiple="
optionselected="
selected"
Multiple<
Multiple2<
Multiple3<
br/>
inputtype="
checkbox"
name="
check"
value="
check1"
/>
check1
check2"
checked="
checked"
check2
radio"
radio1"
radio1
radio2"
radio2
/form>
serializeArray()结果为: