1、jQuery.ajax():执行异步HTTP(Ajax)请求
2、.ajaxComplete()方法:在AJAX请求完成时执行函数,即使请求并未成功。
语法:
.jQueryajaxComplete(function(event,xhr,options))
event:包含event对象
xhr:包含XMLHttpRequest对象
options:包含AJAX请求中使用的选项
XMLHttpRequest对象和设置作为参数传递给回调函数。
3、.ajaxError()方法:AJAX请求发生错误时执行函数
.ajaxError(function(event,xhr,options,exc))
//exc:包含JavaScript exception
$("div").ajaxError(function(){
alert("an error occurred!");
});
XMLHttpRequest对象和设置作为参数传递给回调函数。捕捉到的错误可作为最后一个参数传递:
function(event,XMLHttpRequest,ajaxOptions,thrownError){
//thrownError只有当异常发生时才会被传递this;
}
.ajaxSend([function(event,xhr,options)])
$("div").ajaxSend(function(e,xhr,opt){
$(this).html("Requesting"+opt.url);
});
5、jQuery.ajaxSetup()方法:设置全局AJAX默认选项
jQuery.ajaxSetup(name:value,name:value,...)
//为所有AJAX请求设置默认URL和success函数
$("button").click(function(){
$.ajaxSetup({
url:"demo_ajax_load.txt",
success:function(result){
$("div").html(result);
}
});
$.ajax();
});
设置默认地址为"/xmlhttp/",禁止触发全局AJAX事件,用POST代替默认的GET方法,其后的AJAX请求不再设置任何选项参数:
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
.ajaxStart(function())
$("div").ajaxStart(function(){
$(this).html("<img src='demo_wait.gif' />");
});
.ajaxStop(function(){})
$("div").ajaxStop(function(){
alert("所有AJAX请求已完成");
});
.ajaxSuccess(function(event,xhr,options))
$("#msg").ajaxSuccess(function(evt,request,setting){
$(this).append("<p>请求成功~</p>");
});
$(selector).get(url,data,success(response,status,xhr),dataType)
//等价于:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$("button").click(function(){
$.get("demo_ajax_load.txt",function(result){
$("div").html(result);
});
});
dataType:规定预计的服务器响应的数据类型。默认jQuery会智能判断。可能的类型有:"xml","html","text","script","json","jsonp"
示例1:请求test.php网页,传递两个参数,忽略返回值
$.get("test.php",{ name:"John", time:"2pm"});
示例2:显示test.php返回值(HTML或XML,取决于返回值)
$.get("test.php", function(data){
alert("Data Loaded"+data);
});
示例3:显示test.cgi返回值(HTML或XML,取决于返回值),添加一组请求参数
$.get("test.cgi",{ name:"John",time:"2pm"},function(data){
alert("Data Loaded:"+data);
});
发送到服务器的数据可作为查询字符串附加到URL之后,如果data参数的值是对象(映射),则附加到URL之前将转换为字符串,并进行URL编码。
传递给callback的返回数据,可以是JavaScript对象,或以JSON结构定义的数组,并使用S,parseJSON()方法进行解析。
jQuery.getJSON(url,data,success(data,status,xhr))
$.ajax({
url: url,
data: data,
success: callback,
dataType: json
});
$("button").click(function(){
$.getJSON("demo_ajax_load.js",function(result){
$.each(result,function(i,field){
$("div").append(field+"");
});
});
});
示例1:从test.js载入JSON数据并显示JSON数据中一个name字段数据:
$.getJSON("test.js",function(json){
alert("JSON Data:"+json.users[3].name);
});
示例2:从Flickr JSONP API载入4张最新的关于猫的图片
$.getJSON("http://api/flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",function(data){
$.each(data.time,function(i,item){
$("<img/>").attr("src",item.media.m).appendTo("#images");
if(i==3) return false;
});
});
示例3:从test.js载入JSON数据,附加参数,显示JSON数据中一个name字段数据
$.getJSON("test.js",{name:"John",time:"2pm"},function(json){
alert("JSON Data:"+json.users[3].name);
});
response:包含来自请求的结果数据
status:包含请求的状态("success","notmodified","error","timeout"或"parsererror")
jQuery.getScript(url.success(response,status))
//该函数是简写的Ajax函数,等价于:
$.ajax({
url:url,
dataType:"script",
success:success
});
$("button").click(function(){
$.getScript("demo_ajax_load.js");
});
示例:载入jQuery官方颜色动画插件,成功后绑定颜色变化动画
//HTML代码
<button id="go">Run</button>
<div class="block"></div>
//jQuery代码
jQuery.getScript("",function(){
$("#go").click(function(){
$(".block").animate({ backgroundColor:'pink'},1000).animate({ backgroundColor:'blue'},1000);
});
});
如果提供回调函数,则会在执行post-processing之后执行该函数
load(url,data,function(response,status,xhr))
$("button").click(function(){
$("div").load("demo_ajax_load.txt");
});
加载页面片段
.load()方法可以可以通过url参数的特殊语法插入远程文档的某个部分,例如:
$("#result").load("ajax/test.html #container");
url字符串中紧接着第一个空格的字符串就是所要加载内容的jQuery选择器。
如果执行该方法,会取回ajax/test.html的内容,不过然后jQuery会解析被返回的文档,来查找带有容器ID的元素。该元素连同其内容会被插入带有结果ID的元素中,所取回文档的其余部分会被丢弃。
jQuery使用浏览器的.innerHTML属性来解析被取回的文档,并把它插入到当前文档,在这个过程中,浏览器会从文档中过滤元素,如<html>,<title>或<head>元素。结果由.load()取回的元素可能与浏览器直接取回的文档不完全相同。
注:浏览器安全问题,大多数"Ajax"请求无法从不同的域、子域或协议成功的取回数据。
object:要进行序列化的数组或对象
traditional:规定是否使用传统的方式浅层进行序列化(参数序列化)
param()
jQuery.param(object,traditional)
var params = { width:1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);
//结果:width=1680&height=1050
示例1:显示对象的查询字符串表示以及URL编码版本:
var myObject = {
a:{
one: 1,
two: 2,
three: 3
},
b:[1,2,3]
};
var recursiveEncoded = $.param(myObject);
var recursiveDecoded = decodeURIComponent($.param(myObject));
alert(recursiveEncoded);
alert(recursiveDecoded);
输出的结果是:
a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3
a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3
示例2:可以将traditional参数设置为true,来模拟jQuery1.4之前版本中$.param()的行为:
var myObject = {
a:{
one: 1,
two: 2,
three: 3
},
b:[1,2,3]
};
var shallowEncoded = $.param(myObject,true);
var shallowDecoded = decodeURIComponent(shallowEncoded);
alert(shallowEncoded );
alert(shallowDecoded );
输出的结果:
a=%5Bobject+Object%5D&b=1&b=2&b=3
a=[object+Object]&b=1&b=2&b=3
jQuery.post(url,data,success(data,textStatus,jqXHR),dataType)
//等价于:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
//jqXHR对象
通过POST读取的页面不被缓存,因此jQuery.ajaxSetup()中的cache和ifModified选项不会影响这些请求。
注:如果有jQuery.post()发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的.ajaxError()方法。或对于jQuery1.5,jQuery.post()返回的jqXHR对象的.error()方法也可以用于错误处理。
jqXHR对象:
15、.serialize() 方法:通过序列化表单值,创建URL编码文本字符串,可以选择一个或多个表单元素(比如input及/或文本框),或者form元素本身,序列化的值可在生成AJAX请求时用于URL查询字符串中。
$(selector).serialize()
$("button").click(function(){
$("div").text($("form".serialize()));
});
$(selector).serializeArray()
$("button").click(function(){
x=$("form").serializeArray();
$.each(x,function(i,field){
$("#results").append(field.name + ":" + field.value + "");
});
});