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接口的使用:
- <scripttype="text/javascript"src="../scripts/jquery-1.3.2-min.js"></script>
- <scripttype="text/javascript">
- $(function()
- {
- $("#btnAjaxGet").click(function(event)
- {
- $("#divResult").load("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click"+"×tamp="+(newDate()).getTime());
- });
- $("#btnAjaxPost").click(function(event)
- {
- $("#divResult").load("../data/AjaxGetMethod.aspx",{"param":"btnAjaxPost_click"});
- });
- $("#btnAjaxCallBack").click(function(event)
- {
- $("#divResult").load("../data/AjaxGetMethod.aspx",{"param":"btnAjaxCallBack_click"},function(responseText,textStatus,XMLHttpRequest)
- {
- responseText="AddintheCallBackFunction!<br/>"+responseText
- $("#divResult").html(responseText);
- });
- });
- $("#btnAjaxFiltHtml").click(function(event)
- {
- $("#divResult").load("../data/AjaxGetCityInfo.aspx?resultType=html"+"×tamp="+(newDate()).getTime()+"ul>li:not(:contains('鞍山'))");
- });
- })
- </script>
- </head>
- <body>
- <buttonid="btnAjaxGet">使用Load执行Get请求</button><br/>
- <buttonid="btnAjaxPost">使用Load执行Post请求</button><br/>
- <buttonid="btnAjaxCallBack">使用带有回调函数的Load方法</button><br/>
- <buttonid="btnAjaxFiltHtml">使用selector过滤返回的HTML内容</button>
- <br/>
- <divid="divResult"></div>
- </body>
- </html>
上面的示例演示了如何使用Load方法.
提示:我们要时刻注意浏览器缓存,当使用GET方式时要添加时间戳参数(netDate()).getTime()来保证每次发送的URL不同,可以避免浏览器缓存.
提示:当在url参数后面添加了一个空格,比如""的时候,会出现"无法识别符号"的错误,请求还是能正常发送.但是无法加载HTML到DOM.删除后问题解决.
2.jQuery.get(url,[data],[callback]):使用GET方式来进行异步请求
参数:
url(String):发送请求的URL地址.
data(Map):(可选)要发送给服务器的数据,以Key/value的键值对形式表示,会做为QueryString附加到请求URL中。
callback(Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
这是一个简单的GET请求功能以取代复杂$.ajax。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用$.ajax。示例代码:
- $.get("./Ajax.aspx",{Action:"get",Name:"caoshenghuan"},function(data,textStatus){
- this;
- alert(data);
- 当然这里捕捉不到error,因为error的时候根本不会运行该回调函数
- });
点击发送请求:
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.js。jQuery代码:
$.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请求。(因为将使用DOM的script标签来加载)
jQuery1.2中,您可以跨域加载JSON数据,使用时需将数据类型设置为JSONP。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。数据类型设置为"jsonp"时,jQuery将自动调用回调函数。
讲解:
这是jQuery中Ajax的核心函数,上面所有的发送Ajax请求的函数内部最后都会调用此函数.options参数支持很多参数,使用这些参数可以完全控制ajax请求.在Ajax回调函数中的this对象也是options对象.
因为平时使用最多的还是简化了的get和post函数,所以在此不对options参数做详细讲解了.options参数文档请见:
http://docs.jquery.com/Ajax/jQuery.ajax#options
参数列表:
参数名
|
类型
|
描述
|
url
|
String
|
(默认:当前页地址)发送请求的地址。
|
type
|
String
|
(默认:"GET")请求方式("POST"或"GET"),默认为"GET"。注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。
|
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将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递,可用值:
"xml":返回XML文档,可用jQuery处理。
"html":返回纯文本HTML信息;包含script元素。
"script":返回纯文本JavaScript代码。不会自动缓存结果。
"json":返回JSON数据。
"jsonp":JSONP格式。使用JSONP形式调用函数时,如"myurl?callback=?"jQuery将自动替换?为正确的函数名,以执行回调函数。
|
error
|
Function
|
(默认:自动判断(xml或html))请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest对象,错误信息,(可能)捕获的错误对象。 function(XMLHttpRequest,textStatus,errorThrown){
//通常情况下textStatus和errorThown只有其中一个有值
this;//theoptionsforthisajaxrequest
}
|
global
|
Boolean
|
(默认:true)是否触发全局AJAX事件。设置为false将不会触发全局AJAX事件,如ajaxStart或ajaxStop。可用于控制不同的Ajax事件
|
ifModified
|
Boolean
|
(默认:false)仅在服务器数据改变时获取新数据。使用HTTP包Last-Modified头信息判断。
|
processData
|
Boolean
|
(默认:true)默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或其它不希望转换的信息,请设置为false。
|
success
|
Function
|
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态 function(data,textStatus){
//datacouldbexmlDoc,jsonObj,html,text,etc...
this;//theoptionsforthisajaxrequest
}
|
这里有几个Ajax事件参数:beforeSend,success,complete,error。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。注意一下,这些Ajax事件里面的this都是指向Ajax请求的选项信息的(请参考说get()方法时的this的图片)。
请认真阅读上面的参数列表,如果你要用jQuery来进行Ajax开发,那么这些参数你都必需熟知的。
示例代码,获取CSDN首页的文章题目:
- $.ajax({
- type:"get",
- url:"http://www.blog.csdn.net",
- beforeSend:function(XMLHttpRequest){
- },
- success:function(data,textStatus){
- $(".ajax.ajaxResult").html("");
- $("item",data).each(function(i,domEle){
- $(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
- });
- },
- complete:function(XMLHttpRequest,textStatus){
- },
- error:function(){
- }
- });
二.Ajax相关函数.
jQuery提供了一些相关函数能够辅助Ajax函数.
1.jQuery.ajaxSetup(options)
无返回值
说明:
设置全局AJAX默认options选项。
讲解:
有时我们的希望设置页面上所有Ajax属性的默认行为.那么就可以使用此函数设置options选项,此后所有的Ajax请求的默认options将被更改.
options是一个对象,可以设置的属性请此连接:http://docs.jquery.com/Ajax/jQuery.ajax#toptions
比如在页面加载时,我使用下面的代码设置Ajax的默认option选项:
- $.ajaxSetup({
- url:"../data/AjaxGetMethod.aspx",
- data:{"param":"ziqiu.zhang"},
- global:false,
- type:"POST",
- success:function(data,textStatus){$("#divResult").html(data);}
- });
上面的代码设置了一个Ajax请求需要的基本数据:请求url,参数,请求类型,成功后的回调函数.
此后我们可以使用无参数的get(),post()或者ajax()方法发送ajax请求.完整的示例代码如下:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQueryAjax-Load</title>
- <scripttype="text/javascript"src="../scripts/jquery-1.3.2-vsdoc2.js"></script>
- <scripttype="text/javascript">
- $(document).ready(function()
- {
- $.ajaxSetup({
- url:"../data/AjaxGetMethod.aspx",
- data:{"param":"ziqiu.zhang"},
- global:false,
- type:"POST",
- success:function(data,textStatus){$("#divResult").html(data);}
- });
- $("#btnAjax").click(function(event){$.ajax();});
- $("#btnGet").click(function(event){$.get();});
- $("#btnPost").click(function(event){$.post();});
- $("#btnGet2").click(function(event){$.get("../data/AjaxGetMethod.aspx",{"param":"other"});});
- });
- </script>
- </head>
- <body>
- <buttonid="btnAjax">不传递参数调用ajax()方法</button><br/>
- <buttonid="btnGet">不传递参数调用get()方法</button><br/>
- <buttonid="btnPost">不传递参数调用post()方法</button><br/>
- <buttonid="btnGet2">传递参数调用get()方法,使用全局的默认回调函数</button><br/>
- <br/>
- <divid="divResult"></div>
- </body>
- </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/
使用起来异常简单:
- varthing={plugin:'jquery-json',version:1.3};
- varencoded=$.toJSON(thing);
- varname=$.evalJSON(encoded).plugin;
- varversion=$.evalJSON(encoded).version;
使用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请求发生的事件.主要有如下事件:
用一个示例讲解各个事件的触发顺序:
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQueryAjax-AjaxEvent</title>
- <scripttype="text/javascript"src="../scripts/jquery-1.3.2.min.js"></script>
- <scripttype="text/javascript">
- $(document).ready(function()
- {
- $("#btnAjax").bind("click",function(event)
- {
- $.get("../data/AjaxGetMethod.aspx");
- })
- $("#divResult").ajaxComplete(function(evt,request,settings){$(this).append('<div>ajaxComplete</div>');})
- $("#divResult").ajaxError(function(evt,request,settings){$(this).append('<div>ajaxError</div>');})
- $("#divResult").ajaxSend(function(evt,request,settings){$(this).append('<div>ajaxSend</div>');})
- $("#divResult").ajaxStart(function(){$(this).append('<div>ajaxStart</div>');})
- $("#divResult").ajaxStop(function(){$(this).append('<div>ajaxStop</div>');})
- $("#divResult").ajaxSuccess(function(evt,request,settings){$(this).append('<div>ajaxSuccess</div>');})
- });
- </script>
- </head>
- <body>
- <br/><buttonid="btnAjax">发送Ajax请求</button><br/>
- <divid="divResult"></div>
- </body>
- </html>
我们可以通过将默认options的global属性设置为false来取消全局Ajax事件的触发.
分享到:
相关推荐
JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解JQuery详解
jQueryPager(JQuery分页插件pagination实现Ajax分页) CSDN犀利助互群60168829
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
第1章 Web开发的发展与...第14章 jQuery中使用AJAX跨域操作 第15章 jQuery+PHP动态网站实践 第16章 jQuery键盘操作 第17章 jQuery可视化数据显示 本资料共包含以下附件: 《jQuery开发技术详解》光盘 源文件+ppt.rar
jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading
AJAX与jquery试题,检查对ajax和jquery基本知识的掌握
jQuery-ajax-用户名异步请求,转载请注明出处:https://blog.csdn.net/qq_40374604(如有需要欢迎留言,我一定会尽快解答)
jqueryajax jquery ajax
Jquery跨域访问Web服务的demo源码
Jquery各种连接操作 Ajax JqueryJquery各种连接操作 Ajax Jquery
SSH +jquery+json做的Ajax级联操作 简练清晰 容易理解 完全可以拷贝引用
Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用
jquery + struts1 + ajax学习例子
jquery ajax框架jquery ajax框架jquery ajax框架jquery ajax框架jquery ajax框架
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。本文跟大家介绍JQuery中$.ajax()方法参数详解,小伙伴们一起学习吧
php 用jquery ajax登陆,这是一个最简单的jquery ajax登陆实例,看了这个相信聪明的你能写出更好的东东!
jquery+asp ajax 中文乱码问题解决文档
JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,JQuery,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,ajax,一个关于在js中通过JQuery实现异步无...
jquery1.9.1 支持低版本ajax (ajax前jQuery.support.cors=true )