本篇是我jQuery系列网摘之第八篇,谢谢关注,请持续关注我后面的文章:
使用原始Ajax请求会在我以前的博客中有所说明,在这里就不提了,我这里使用的
Ajax以及前面的某些文章都是摘自比较好的一些资料,这里只是摘要:
使用原始Ajax,我们需要做较多的事情,比如创建XmlHttpRequest对象,判断请求状态,
编写回调函数等,然而使用jQuery的Load方法,只需要一句话,比如:
$("#divTest").load("data/AjaxGetCityInfo.aspx",{"resultType":"html"});
jQuery提供了几个用于发送Ajax请求的函数,其中最核心也最复杂的是jQuery.ajax(options),
所有的其他Ajax函数都是它的一个简化调用,当我们想要完全控制Ajax时可以使用此函数,
否则还是使用简化方法如get,post,load等更加方便,所以jQuery.ajax(options)方法放到
最后一个介绍,先来介绍最简单的load方法:
load(url,[data],[callback]) Returns:jQuery包装集
说明:load方法能够载入远程HTML文件代码并插入至DOM中,默认使用Get方式,
如果传递了data参数则使用Post方式.
load是最简单的Ajax函数,但是使用具有局限性,
下面是一个关于jQuery的load方法js代码:
<script src="jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#btnAjaxGet").click(function(event){
//发送Get方式的Ajax请求<a href="../testNo1.aspx">../testNo1.aspx</a>
$("#divResult").load("../testNo1.aspx");
});
$("#btnAjaxPost").click(function(event){
//发送Post方式的Ajax请求
$("#divResult").load("../testNo1.aspx",{"param":"Hello World"});
});
$("#btnAjaxCallBack").click(function(event){
//发送Post请求,返回后执行回调函数
$("#divResult").load("../testNo1.aspx",{"param":"Hello World"},
function(responseText,textStatus,XMLHttpRequest){
alert(responseText);
alert(textStatus);
alert(XMLHttpRequest.status);
alert(XMLHttpRequest.readyState)
});
});
});
</script>
get方式传递Ajax请求:
jQuery.get(url,[data],[callback],[type])
Returns:XMLHttpRequest
get请求的回调函数签名如下:
function(data,textStatus){
this;
}
其中data是返回的数据,testStatus表示状态码,可能是如下值:
"timeout","error","notmodified","success","parsererror"在回调函数中的this
是获取options对象的有关引用,有关options的各种说明,请参见API,type参数是指
data数据的类型,可能是下面的值:"xml","html","script","json","jsonp","text"
默认为"html",注意:jQuery.getJSON(url,[data],[callback])方法就相当于
jQuery.get(url,[data],[callback],"json"),
getJSON函数应用举例:
$.getJSON("../data/AjaxGetCityInfo.aspx",{"resultType":"json"},function(data,textStatus)
{
alert(data.length);
if(data.length>=1){
alert(data[0].CityName);
}
});
服务器端返回的字符串如下:
[{"CityName":"阿克苏","isHotCity":false},{"CityName":"朱强","isHotCity":true}]
//JSON格式
getScript方法:jQuery.getScript(url,[callback]) Returns:XMLHttpRequest
与getJSON讲解差不多,但是使用该函数跨域调用测试时(主要针对(IE6和FireFox))
回调函数中的data何textStatus均为undifined,测试跨域调用的两个方法分别为:
$.getScript("../scripts/getScript.js",function(data,textStatus){...});
$.getScript("http://resource.elong.com/getScript.js",function(data,textStatus){});
post请求方法:jQuery.post(url,[data],[call],[type]); Returns:XMLHttpRequest
该方法具体用法和get相同,只是提交方式由"GET"改为"POST";
下面介绍最根本的jQuery.ajax(options)方法,其他jQuery ajax都是间接调用此方法的,
是jQuery底层AJAX实现,$.ajax()只有一个参数:参数key/value对象,包含各配置及回调
函数信息,options主要参数如下:
async默认值true,表示同步或异步请求,
beforeSend(XMLHTTPRequest),在修改XMLHttpRequest对象前发送,使用此方法来设置定义页眉等
XMLHttpRequest是传递的唯一理由,你可以在函数中返回false以取消该请求.
cache如果设置为false将迫使您请求的网页不被浏览器缓存.
complete(XMLHttpRequest,textStatus) function;当请求完成后发生.
type,请求方式("post"或"get"),默认为get,
data[Object]要发送的数据对象,
dataType [String]预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息
返回responseXML或responseText,并作为回调函数参数传递,可用值在上面$.get函数已经
说过
timeout:设置请求超时时间(毫秒),此设置将覆盖全局设置
global是否禁用全局Ajax事件,默认为true,不禁用
url:请求页面地址
error:请求失败时将调用此方法,这个方法有三个参数:XMLHttpRequest对象,textStatus
错误信息,errorThrown可能捕获的错误对象
ifModified:[boolean]仅在服务器数据改变时获取新数据,使用HTTP包Last-Modified
success:[function]请求成功后回调函数,这个方法有两个参数,服务器返回数据,返回
状态:function(data,textStatus){this;}
Ajax相关函数:
jQuery提供了一些相关函数能够辅助Ajax函数,
jQuery.ajaxSetup(options)无返回值,该函数用于设置全局Ajax默认options选项.
比如我们在页面加载时使用下面的代码设置Ajax的默认option选项:
$.ajaxSetup({
url:"../data/AjaxGetMethod.aspx",
data:{"param":"ziqiu.zhang"},
global:true,
type:"Post",
success:function(data,textStatus){
$("#divResult").html(data);
}
});
serialize(),Returns:String,说明:序列表表格内容为字符串,用于Ajax请求,
序列化最常用在将表单数据发送到服务器端时,被序列化后的数据是标准格式,可以被
几乎所有的服务器端支持,为了尽可能正常工作,要求被序列化的表单字段都有name属性,
只有一个id是无法工作的,想这样写:
<input id="email" name="email" type="text"/>
serialize()函数将要发送给服务器的form中的表单对象拼接成一个字符串,便于我们使用
Ajax发送时获取表单数据,这个一个From按照Get方式提交时,自动将表单对象的名/值放到
url上提交差不多,
serializeArray(),Returns:Array<Object>说明:序列化表格元素(类似'serialize')返回
JSON数据结构数据,注意:此方法返回的是JSON对象而非JSON字符串,需要使用插件或者
第三方库进行字符串化操作.
jQuery还有全局Ajax事件,
ajaxComplete(callback),Ajax请求完成时执行函数
ajaxError(callback),Ajax请求发生错误时执行函数
ajaxSend(callback),Ajax请求发送前执行函数
ajaxStart(callback),Ajax请求开始时执行函数
ajaxStop(callback),Ajax请求结束时执行函数
ajaxSuccess(callback),Ajax请求成功时执行函数
注意事项:如果在Get请求发送的url中有两个同名参数,比如两个param参数:
url?param=..¶m=...;
使用服务器端方法获取param参数:
if(!String.IsNullOrEmpty(HttpContext.Current.Request["Param"]))
{
param = HttpContext.Current.Request["Param"];
}
此时获取到的param是一个用“,”分隔多个值的字符串:..,..;
至此jQuery Ajax简介基本结束.