jquery操作ajax

浏览数：26 / 时间：2015年06月09日

在ajax的基础是javascript，那么他的库jquery也一定可以实现这一功能！

jquery的封装了3个函数方便调用：$.get(),$.post(),$().load()这三个方法实现了ajax的异步交互，每一个方法都可以单独的完成交互工作！

$.get(url,data,callback,type)

这个方法中的url就是你要请求的url，你的data表示发送的数据，也可以直接跟在url后面，callback为会掉函数，也就是不管你的success与否，都会调用，还要注意的是你的函数调用是会默认接收返回信息的如xmlHttp

$.get("servlet/AjaxServlet?message=lxb",function(responseData,responseStatus){

if(responseStatus=="success"){

var res = responseData;

var resObj = eval("("+res+")");

var inner = "姓名："+resObj.name+"年龄："+resObj.age+" "+responseStatus;

document.getElementById("text").innerHTML =inner;

}

});

这段代码中的callback是判断responseStatus是否为success，如果成功则调用！

$.post(url,data,callback,type)

$.post("servlet/AjaxServlet",{message:"lxb"},function(responseHtml,responseStatus,XMLHttpRequest){

if(responseStatus=="success"){

var res = responseHtml;

var resObj = eval("("+res+")");

var inner = "姓名："+resObj.name+"年龄："+resObj.age+" "+responseStatus+XMLHttpRequest;

document.getElementById("text").innerHTML =inner;

}

});

同get方法

$("").load(url,data,callback)

//直接调用

$("#text").load("servlet/AjaxServlet",function(responseHtml,responseStatus,XMLHttpRequest){

if(responseStatus=="success"){

var res = responseHtml;

var resObj = eval("("+res+")");

var inner = "姓名："+resObj.name+"年龄："+resObj.age+" "+responseStatus+XMLHttpRequest;

document.getElementById("text").innerHTML =inner;

}

});

1该函数的主要用途就是直接用返回的内容去替代选择器选中的内容！如果不写回调函数的话，默认就是将responseHtml加到指定的选择器元素中

2这个函数默认使用GET方式来传递,如果[data]参数有数据,就会自动转换为POST方式。

还有一种没有高度封装的函数ajax，他没有封装但是使用灵活！

ajax()函数

$.ajax(options)是jQuery的底层Ajax实现,前面讲述的$.get,$.post等都是$.ajax简单易用的高层实现。$.ajax返回的是其创建XMLHttpRequest对象。

返回值:XMLHttpRequest 参数-所有参数都是可选的,由于参数巨多,下面会一一介绍这些参数都是通过json对象的形式存在的,如

$.ajax({url:"ajax.php",timeout:20,data:{1:2,3:4}}) 通过Http请求加载远程数据

参数列表:

url:发送请求的地址(默认为当前页面)String

type:请求方式get或post(默认为get)String

timeout:请求超时时间,单位毫秒(默认为0)Number

data:发送到服务器的数据,key/value格式{1:2,3:4},GET请求中附加在URL后,如果值为数组{1:["2","3"]}将自动为不同值对应同一个名称,如1=2&1=3。查看processData的值决定是否自动转换为请求字符串格式Object

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

contentType:发送数据至服务器时内容编码类型,默认是application/x-www-form-urlencoded,适合多数场合String

username:如果服务器需要登录访问时的用户名,一般不需要String

password:如果服务器需要登录访问时的密码,一般不需要String

accepts:主要类型有{xml:"application/xml,text/xml",html:"text/html",script:"text/javaScript,application/javaScript",

json:"application/json,text/javaScript",text:"text/plain",_default:"*/*"}用于告诉服务器可接受的数据类型,和dataType是对应的,不需要修改Object

dataType:预期服务器返回的数据类型,如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递。xml:返回XML文档 html:返回纯文本HTML信息,包含script元素 script:返回纯文本javaScript代码,不会自动缓存结果 json:返回JSON数据 jsonp:JSONP格式,使用JSONP形式调用函数时,如myurl?callback=? jQuery会自动替换?为正确的函数名,以执行回调函数String