`
mmdev
  • 浏览: 12826421 次
  • 性别: Icon_minigender_1
  • 来自: 大连
文章分类
社区版块
存档分类
最新评论

跟我学jquery(五)jquery中的ajax详解

 
阅读更多
Ajax让用户页面丰富起来,增强了用户体验.使用Ajax是所有Web开发的必修课.虽然Ajax技术并不复杂,但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异,并且让调用Ajax更加简单.Ajax最常见的用法就是把一块HTML代码加载到页面的某个区域中去。为此,只需简单地选择所需的元素,然后使用load()函数即可。然后如果要用普通的ajax的话会使用大量的代码来实现。下面我们就来看一下jquery中的ajax


一:jQueryAjax详解


jQuery提供了几个用于发送Ajax请求的函数.其中最核心也是最复杂的是jQuery.ajax(options),所有的其他Ajax函数都是它的一个简化调用.当我们想要完全控制Ajax时可以使用此结果,否则还是使用简化方法如get,post,load等更加方便.所以jQuery.ajax(options)方法放到最后一个介绍.先来介绍最简单的load方法:


1.load(url,[data],[callback]):载入远程HTML文件代码并插入至DOM中。


Returns:jQuery包装集

url(String):请求的HTML页的URL地址。

data(Map):(可选参数)发送至服务器的key/value数据。

callback(Callback):(可选参数)请求完成时(不需要是success的)的回调函数。

说明:

load方法能够载入远程HTML文件代码并插入至DOM中。

默认使用GET方式,如果传递了data参数则使用Post方式.

-传递附加参数时自动转换为POST方式。jQuery1.2中,可以指定选择符,来筛选载入的HTML文档,DOM中将仅插入筛选出的HTML代码。语法形如"url#some>selector",默认的选择器是"body>*".

讲解:

load是最简单的Ajax函数,但是使用具有局限性:

1它主要用于直接返回HTML的Ajax接口

2load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中,即使设置了回调函数也还是会加载.


不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:

[javascript] view plaincopyprint?
  1. <scripttype="text/javascript"src="../scripts/jquery-1.3.2-min.js"></script>
  2. <scripttype="text/javascript">
  3. $(function()
  4. {
  5. $("#btnAjaxGet").click(function(event)
  6. {
  7. //发送Get请求
  8. $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click"+"×tamp="+(newDate()).getTime());
  9. });
  10. $("#btnAjaxPost").click(function(event)
  11. {
  12. //发送Post请求
  13. $("#divResult").load("../data/AjaxGetMethod.aspx",{"param":"btnAjaxPost_click"});
  14. });
  15. $("#btnAjaxCallBack").click(function(event)
  16. {
  17. //发送Post请求,返回后执行回调函数.
  18. $("#divResult").load("../data/AjaxGetMethod.aspx",{"param":"btnAjaxCallBack_click"},function(responseText,textStatus,XMLHttpRequest)
  19. {
  20. responseText="AddintheCallBackFunction!<br/>"+responseText
  21. $("#divResult").html(responseText);//或者:$(this).html(responseText);
  22. });
  23. });
  24. $("#btnAjaxFiltHtml").click(function(event)
  25. {
  26. //发送Get请求,从结果中过滤掉"鞍山"这一项
  27. $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html"+"×tamp="+(newDate()).getTime()+"ul>li:not(:contains('鞍山'))");
  28. });
  29. })
  30. </script>
  31. </head>
  32. <body>
  33. <buttonid="btnAjaxGet">使用Load执行Get请求</button><br/>
  34. <buttonid="btnAjaxPost">使用Load执行Post请求</button><br/>
  35. <buttonid="btnAjaxCallBack">使用带有回调函数的Load方法</button><br/>
  36. <buttonid="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
  37. <br/>
  38. <divid="divResult"></div>
  39. </body>
  40. </html>

上面的示例演示了如何使用Load方法.

提示:我们要时刻注意浏览器缓存,当使用GET方式时要添加时间戳参数(netDate()).getTime()来保证每次发送的URL不同,可以避免浏览器缓存.

提示:当在url参数后面添加了一个空格,比如""的时候,会出现"无法识别符号"的错误,请求还是能正常发送.但是无法加载HTMLDOM.删除后问题解决.


2.jQuery.get(url,[data],[callback]):使用GET方式来进行异步请求

参数:

url(String):发送请求的URL地址.

data(Map):(可选)要发送给服务器的数据,以Key/value的键值对形式表示,会做为QueryString附加到请求URL中。

callback(Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

这是一个简单的GET请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码:

[javascript] view plaincopyprint?
  1. $.get("./Ajax.aspx",{Action:"get",Name:"caoshenghuan"},function(data,textStatus){
  2. //返回的data可以是xmlDoc,jsonObj,html,text,等等.
  3. this;//在这里this指向的是Ajax请求的选项配置信息,请参考下图
  4. alert(data);
  5. //alert(textStatus);//请求状态:success,error等等。
  6. 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
  7. //alert(this);
  8. });

点击发送请求:

jQuery.get()回调函数里面的this,指向的是Ajax请求的选项配置信息:


3.jQuery.post(url,[data],[callback],[type])

Returns:XMLHttpRequest

说明:

通过远程HTTPPOST请求载入信息。

这是一个简单的POST请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。

讲解:

具体用法和get相同,只是提交方式由"GET"改为"POST".


4.jQuery.getScript(url,[callback]):通过GET方式请求载入并执行一个JavaScript文件。

参数

url(String):待载入JS文件地址。

callback(Function):(可选)成功载入后回调函数。

jQuery1.2版本之前,getScript只能调用同域JS文件。1.2中,您可以跨域调用JavaScript文件。注意:Safari2或更早的版本不能在全局作用域中同步执行脚本。如果通过getScript加入脚本,请加入延时函数。

这个方法可以用在例如当只有编辑器focus()的时候才去加载编辑器需要的JS文件.下面看一些示例代码:

加载并执行test.jsjQuery代码:

$.getScript("test.js");

加载并执行AjaxEvent.js,成功后显示信息。


5.jQuery.ajax(options)

Returns:XMLHttpRequest

说明:

通过HTTP请求加载远程数据。

jQuery底层AJAX实现。简单易用的高层实现见$.get,$.post等。

$.ajax()返回其创建的XMLHttpRequest对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。

$.ajax()只有一个参数:参数key/value对象,包含各配置及回调函数信息。详细参数选项见下。

注意:如果你指定了dataType选项,请确保服务器返回正确的MIME信息,(xml返回"text/xml")。错误的MIME类型可能导致不可预知的错误。见SpecifyingtheDataTypeforAJAXRequests

注意:如果dataType设置为"script",那么所有的远程(不在同一域名下)POST请求都将转化为GET请求。(因为将使用DOMscript标签来加载)

jQuery1.2中,您可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。数据类型设置为"jsonp"时,jQuery将自动调用回调函数。

讲解:

这是jQueryAjax的核心函数,上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,使用这些参数可以完全控制ajax请求.Ajax回调函数中的this对象也是options对象.

因为平时使用最多的还是简化了的getpost函数,所以在此不对options参数做详细讲解了.options参数文档请见:

http://docs.jquery.com/Ajax/jQuery.ajax#options


参数列表:

参数名

类型

描述

url

String

(默认:当前页地址)发送请求的地址。

type

String

(默认:"GET")请求方式("POST""GET"),默认为"GET"。注意:其它HTTP请求方法,如PUTDELETE也可以使用,但仅部分浏览器支持。

timeout

Number

设置请求超时时间(毫秒)。此设置将覆盖全局设置。

async

Boolean

(默认:true)默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

beforeSend

Function

发送请求前可修改XMLHttpRequest对象的函数,如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。
function(XMLHttpRequest){

this;//theoptionsforthisajaxrequest

}

cache

Boolean

(默认:true)jQuery1.2新功能,设置为false将不会从浏览器缓存中加载请求信息。

complete

Function

请求完成后回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象,成功信息字符串。
function(XMLHttpRequest,textStatus){

this;//theoptionsforthisajaxrequest

}

contentType

String

(默认:"application/x-www-form-urlencoded")发送信息至服务器时内容编码类型。默认值适合大多数应用场合。

data

Object,
String

发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在URL后。查看processData选项说明以禁止此自动转换。必须为Key/Value格式。如果为数组,jQuery将自动为不同值对应同一个名称。如{foo:["bar1","bar2"]}转换为'&foo=bar1&foo=bar2'

dataType

String

预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTPMIME信息返回responseXMLresponseText,并作为回调函数参数传递,可用值:

"xml":返回XML文档,可用jQuery处理。

"html":返回纯文本HTML信息;包含script元素。

"script":返回纯文本JavaScript代码。不会自动缓存结果。

"json":返回JSON数据。

"jsonp":JSONP格式。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。

error

Function

(默认:自动判断(xmlhtml))请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest对象,错误信息,(可能)捕获的错误对象。
function(XMLHttpRequest,textStatus,errorThrown){

//通常情况下textStatuserrorThown只有其中一个有值

this;//theoptionsforthisajaxrequest

}

global

Boolean

(默认:true)是否触发全局AJAX事件。设置为false将不会触发全局AJAX事件,如ajaxStartajaxStop。可用于控制不同的Ajax事件

ifModified

Boolean

(默认:false)仅在服务器数据改变时获取新数据。使用HTTPLast-Modified头信息判断。

processData

Boolean

(默认:true)默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或其它不希望转换的信息,请设置为false

success

Function

请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
function(data,textStatus){

//datacouldbexmlDoc,jsonObj,html,text,etc...

this;//theoptionsforthisajaxrequest

}

这里有几个Ajax事件参数:beforeSendsuccesscompleteerror我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的this都是指向Ajax请求的选项信息的(请参考说get()方法时的this的图片)
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。

示例代码,获取CSDN首页的文章题目:

[javascript] view plaincopyprint?
  1. $.ajax({
  2. type:"get",
  3. url:"http://www.blog.csdn.net",
  4. beforeSend:function(XMLHttpRequest){
  5. //ShowLoading();
  6. },
  7. success:function(data,textStatus){
  8. $(".ajax.ajaxResult").html("");
  9. $("item",data).each(function(i,domEle){
  10. $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
  11. });
  12. },
  13. complete:function(XMLHttpRequest,textStatus){
  14. //HideLoading();
  15. },
  16. error:function(){
  17. //请求出错处理
  18. }
  19. });


.Ajax相关函数.


jQuery提供了一些相关函数能够辅助Ajax函数.

1.jQuery.ajaxSetup(options)


无返回值

说明:

设置全局AJAX默认options选项。

讲解:

有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,此后所有的Ajax请求的默认options将被更改.

options是一个对象,可以设置的属性请此连接:http://docs.jquery.com/Ajax/jQuery.ajax#toptions

比如在页面加载时,我使用下面的代码设置Ajax的默认option选项:

[javascript] view plaincopyprint?
  1. $.ajaxSetup({
  2. url:"../data/AjaxGetMethod.aspx",
  3. data:{"param":"ziqiu.zhang"},
  4. global:false,
  5. type:"POST",
  6. success:function(data,textStatus){$("#divResult").html(data);}
  7. });

上面的代码设置了一个Ajax请求需要的基本数据:请求url,参数,请求类型,成功后的回调函数.

此后我们可以使用无参数的get(),post()或者ajax()方法发送ajax请求.完整的示例代码如下:


[javascript] view plaincopyprint?
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQueryAjax-Load</title>
  5. <scripttype="text/javascript"src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
  6. <scripttype="text/javascript">
  7. $(document).ready(function()
  8. {
  9. $.ajaxSetup({
  10. url:"../data/AjaxGetMethod.aspx",
  11. data:{"param":"ziqiu.zhang"},
  12. global:false,
  13. type:"POST",
  14. success:function(data,textStatus){$("#divResult").html(data);}
  15. });
  16. $("#btnAjax").click(function(event){$.ajax();});
  17. $("#btnGet").click(function(event){$.get();});
  18. $("#btnPost").click(function(event){$.post();});
  19. $("#btnGet2").click(function(event){$.get("../data/AjaxGetMethod.aspx",{"param":"other"});});
  20. });
  21. </script>
  22. </head>
  23. <body>
  24. <buttonid="btnAjax">不传递参数调用ajax()方法</button><br/>
  25. <buttonid="btnGet">不传递参数调用get()方法</button><br/>
  26. <buttonid="btnPost">不传递参数调用post()方法</button><br/>
  27. <buttonid="btnGet2">传递参数调用get()方法,使用全局的默认回调函数</button><br/>
  28. <br/>
  29. <divid="divResult"></div>
  30. </body>
  31. </html>


注意当使用get()或者post()方法时,除了type参数将被重写为"GET"或者"POST",其他参数只要不传递都是使用默认的全局option.如果传递了某一个选项,比如最后一个按钮传递了url和参数,则本次调用会以传递的选项为准.没有传递的选项比如回调函数还是会使用全局option设置值.

2.serialize()

Returns:String

说明:

序列表表格内容为字符串,用于Ajax请求。

序列化最常用在将表单数据发送到服务器端时.被序列化后的数据是标准格式,可以被几乎所有的而服务器端支持.

为了尽可能正常工作,要求被序列化的表单字段都有name属性,只有一个eid是无法工作的.

像这样写name属性:


<inputid="email"name="email"type="text"/>


讲解:

serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串.便于我们使用Ajax发送时获取表单数据.这和一个From按照Get方式提交时,自动将表单对象的名/值放到url上提交差不多.

比如这样一个表单:

生成的字符串为:single=Single¶m=Multiple¶m=Multiple3&check=check2&radio=radio1

提示:代码见chapter6\7-serialize.htm

3.serializeArray()

Returns:Array<Object>

说明:

序列化表格元素(类似'.serialize()'方法)返回JSON数据结构数据。

注意,此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

讲解:

看说明文档让我有所失望,使用此函数获取到的是JSON对象,但是jQuery中没有提供将JSON对象转化为JSON字符串的方法.

JSON官网上没有找到合适的JSON编译器,最后选用了jquery.json这个jQuery插件:

http://code.google.com/p/jquery-json/

使用起来异常简单:

[javascript] view plaincopyprint?
  1. varthing={plugin:'jquery-json',version:1.3};
  2. varencoded=$.toJSON(thing);//'{"plugin":"jquery-json","version":1.3}'
  3. varname=$.evalJSON(encoded).plugin;//"jquery-json"
  4. varversion=$.evalJSON(encoded).version;//1.3


使用serializeArray()再配合$.toJSON方法,我们可以很方便的获取表单对象的JSON,并且转换为JSON字符串:


$("#results").html($.toJSON($("form").serializeArray()));


结果为:


[{"name":"single","value":"Single"},{"name":"param","value":"Multiple"},{"name":"param","value":"Multiple3"},{"name":"check","value":"check2"},{"name":"radio","value":"radio1"}]

.全局Ajax事件

jQuery.ajaxSetup(options)中的options参数属性中,有一个global属性:

global

类型:布尔值

默认值:true

说明:是否触发全局的Ajax事件.

这个属性用来设置是否触发全局的Ajax事件.全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:

名称

说明

ajaxComplete(callback)

AJAX请求完成时执行函数

ajaxError(callback)

AJAX请求发生错误时执行函数

ajaxSend(callback)

AJAX请求发送前执行函数

ajaxStart(callback)

AJAX请求开始时执行函数

ajaxStop(callback)

AJAX请求结束时执行函数

ajaxSuccess(callback)

AJAX请求成功时执行函数

用一个示例讲解各个事件的触发顺序:

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>jQueryAjax-AjaxEvent</title>
  5. <scripttype="text/javascript"src="../scripts/jquery-1.3.2.min.js"></script>
  6. <scripttype="text/javascript">
  7. $(document).ready(function()
  8. {
  9. $("#btnAjax").bind("click",function(event)
  10. {
  11. $.get("../data/AjaxGetMethod.aspx");
  12. })
  13. $("#divResult").ajaxComplete(function(evt,request,settings){$(this).append('<div>ajaxComplete</div>');})
  14. $("#divResult").ajaxError(function(evt,request,settings){$(this).append('<div>ajaxError</div>');})
  15. $("#divResult").ajaxSend(function(evt,request,settings){$(this).append('<div>ajaxSend</div>');})
  16. $("#divResult").ajaxStart(function(){$(this).append('<div>ajaxStart</div>');})
  17. $("#divResult").ajaxStop(function(){$(this).append('<div>ajaxStop</div>');})
  18. $("#divResult").ajaxSuccess(function(evt,request,settings){$(this).append('<div>ajaxSuccess</div>');})
  19. });
  20. </script>
  21. </head>
  22. <body>
  23. <br/><buttonid="btnAjax">发送Ajax请求</button><br/>
  24. <divid="divResult"></div>
  25. </body>
  26. </html>

我们可以通过将默认optionsglobal属性设置为false来取消全局Ajax事件的触发.


分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics