1.jQuery Ajax请求
Asynchronous JavaScript and Xml(异步JavaScript和Xml)
ajax 请求:
$.ajax(url,[settings]) // 通过 HTTP 请求加载远程数据。
load(url,[data],[callback]) // 载入远程 HTML 文件代码并插入至 DOM 中。
$.get(url,[data],[fn],[type]) // 通过远程 HTTP GET 请求载入信息。
$.post(url,[data],[fn],[type]) // 通过远程 HTTP POST 请求载入信息。
$.getJSON(url,[data],[fn]) // 通过 HTTP GET 请求载入 JSON 数据。
$.getScript(url,[callback]) // 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
ajax 事件:
ajaxComplete(callback) // AJAX 请求完成时执行函数。
ajaxError(callback) // AJAX 请求发生错误时执行函数。
ajaxSend(callback) // AJAX 请求发送前执行函数。
ajaxSuccess(callback) // AJAX 请求成功时执行函数。
ajaxStart(callback) // AJAX 请求开始时执行函数。
ajaxStop(callback) // AJAX 请求结束时执行函数。
其它:
$.ajaxPrefilter([type],fn)
$.ajaxSetup([options]) // 设置全局 AJAX 默认选项。
serialize() // 序列表表格内容为字符串。
serializeArray() // 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
jQuery对Ajax做了大量封装,使用方便,且不用担心浏览器兼容问题。
对于封装,jQuery采用了三层封装:
1.最底层封装 $.ajax()
2.第二层封装 load(), $.get(), $.post()
3.第三层封装 $.getScript, $.getJSON()
2.第一层封装: $.ajax()
//加载并执行一个 JS 文件。
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
//保存数据到服务器,成功时显示信息。
$.ajax({
type: "POST",
url: "some.php", //把数据交给some.php来处理保存
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
//装入一个 HTML 网页最新版本
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
//同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
//发送 XML 数据至服务器。设置 processData 选项为 false,防止自动转换数据格式
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
$.ajax() 参数详解:
以对象形式传参,所有选项都是可选的。
url:字符串(默认: 当前页地址),
一个用来包含发送请求的URL字符串。timeout:数字,
设置请求超时时间(毫秒)。此设置将覆盖全局设置。type:字符串(默认: "GET"),
请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。username:字符串,
用于响应HTTP访问认证请求的用户名xhr:fn
需要返回一个XMLHttpRequest 对象。默认在IE下是ActiveXObject 而其他情况下是XMLHttpRequest 。
用于重写或者提供一个增强的XMLHttpRequest 对象。这个参数在jQuery 1.3以前不可用。beforeSend:fn(xhr),
发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。
这是一个 Ajax 事件。如果返回false可以取消本次ajax请求。
function (XMLHttpRequest) {
this.选项; // 调用本次AJAX请求时传递的options参数
}complete:fn(xhr,status),
请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述成功请求类型的字符串。
function (XMLHttpRequest, textStatus) {
this.选项; // 调用本次AJAX请求时传递的options参数
}context:DOM对象,
让 Ajax 所有回调函数内this指向这个对象(如果不设定这个参数,那么this就指向该选项参数)。
$.ajax({ url: "test.html", context: document.body, success: function(){
$(this).addClass("done"); //this = document.body
}});data:字符串或对象,
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换,必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。error:fn(xhr,status,error),
(默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error", "notmodified" 和 "parsererror"。
function (XMLHttpRequest, textStatus, errorThrown) {
// 通常 textStatus 和 errorThrown 之中
// 只有一个会包含信息
this; // 调用本次AJAX请求时传递的options参数
}success:fn(data,status,xhr),
请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。
还有 jqXHR(在jQuery 1.4.x的中,XMLHttpRequest) 对象 。在jQuery 1.5, 成功设置可以接受一个函数数组。每个函数将被依次调用。 Ajax 事件。
function (data, textStatus) {
// data 可能是 xmlDoc, jsonObj, html, text, 等等...
this; // 调用本次AJAX请求时传递的options参数
}acceptsMap:(默认: 取决于数据类型),
内容类型发送请求头,告诉服务器什么样的响应会接受返回。如果accepts设置需要修改,推荐在$.ajaxSetup()方法中做一次。asyncBoolean:布尔值(默认: true),
默认设置下,所有请求均为异步请求。若设置为 false,则同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。cache:布尔值(默认: true),
(默认: true,dataType为script和jsonp时默认为false) jQuery 1.2 新功能,设置为 false 将不缓存此页面。contents:{字符串:正则表达式},
用来确定jQuery将如何解析响应,给定其内容类型。contentType:字符串(默认: "application/x-www-form-urlencoded"),
发送信息至服务器时内容编码类型。默认值适合大多数情况。$.ajax()会将该值发送给服务器(即使没有数据要发送)。converters:对象(默认: {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}),
一个数据类型对数据类型转换器的对象。每个转换器的值是一个函数,返回响应的转化值crossDomain:布尔值(默认: 同域请求为false),
跨域请求为true如果你想强制跨域请求(如JSONP形式)同一域,设置crossDomain为true。这使得例如,服务器端重定向到另一个域dataFilter:fn(data,type),
给Ajax返回的原始数据的进行预处理的函数。提供data和type两个参数:data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
function (data, type) {
// 对Ajax返回的原始数据进行预处理
return data // 返回处理后的数据
}dataType:字符串,
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。
在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
"text": 返回纯文本字符串global:布尔值(默认: true),
设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。headers:对象,
一个额外的"{键:值}"对映射到请求一起发送。此设置被设置之前beforeSend函数被调用;因此,消息头中的值设置可以在覆盖beforeSend函数范围内的任何设置。ifModified:布尔值(默认: false),
仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。isLocal:(默认: 取决于当前的位置协议),
允许当前环境被认定为“本地”,(如文件系统),即使jQuery默认情况下不会承认它。以下协议目前公认为本地:file, *-extension, and widget。
如果isLocal设置需要修改,建议在$.ajaxSetup()方法中这样做一次。jsonp:字符串,
在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,
比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。jsonpCallback:字符串,
为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,
这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。mimeType:字符串,
一个mime类型用来覆盖XHR的 MIME类型。password:字符串,
用于响应HTTP访问认证请求的密码processData:布尔值(默认: true),
默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,
以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。scriptCharset:字符串,
只有当请求时dataType为"jsonp"或"script",并且type是"GET"才会用于强制修改charset。通常只在本地和远程的内容编码不同时使用。statusCode:{},
一组数值的HTTP代码和函数对象,当响应时调用了相应的代码。例如,如果响应状态是404,将触发以下警报:
$.ajax({
statusCode: {404: function() {
alert('page not found');
}
});traditional:布尔值,
如果你想要用传统的方式来序列化数据,那么就设置为true。请参考工具分类下面的jQuery.param 方法。xhrFields:{},
一对“文件名-文件值”在本机设置XHR对象。例如,如果需要的话,你可以用它来设置withCredentials为true的跨域请求。
3.第二层封装: load(), $.get(), $.post()
(1) load(url, [data], [callback])
载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
url:待装入 HTML 网页网址。(必选)
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。(可选)
callback:载入成功或失败时回调函数。(可选)
$("ul").load("/Main_Page #box li"); //将 "/Main_Page" 中 id="box" 的元素中的 li 加载到 ul 标签中
$("div").load("a.html"); //将 a.html 文件内容加载到div中
$("div").load("a.html",{a:1,b:2}); //传递数据(post方式)
$("div").load("a.html?a=1&b=2"); //传递数据(get方式)
$("div").load("a.php", {limit: 25}, function(){ //以 POST 形式发送附加参数并在成功时显示信息
alert("发送成功!");
});
$("div").load("a.php",function(response,status,xhr){
console.log(response); //响应返回的内容
console.log(status); //请求状态,成功时值为"success",失败时值为 error.XMLHttpRequest
console.log(xhr) //即 XMLHttpRequest 对象,
});
//xhr.responseText 返回内容,即 response
//xhr.responseXML 如果是XML类型,返回包含数据的XML DOM文档
//xhr.status 响应的HTTP状态,值为数字代号
//xhr.statusText HTTP状态的文字说明
(2)$.get(url, [data], [callback], [type])
通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
$.get("test.php"); //请求 test.php 网页,忽略返回值
$.get("test.php", {name:"John", time:"2pm"}); //请求 test.php 网页,传送2个参数,忽略返回值。
$.get("test.php", function(data){ //显示 test.php 返回值(HTML 或 XML,取决于返回值)
alert(data);
});
$.get("test.xml", function(data){ //获取test.xml文件中 root 标签里的内容
alert($(data).find("root").text());
});
$.get("test.json", function(data){ //test.json文件:{{a:1,b:2},{a:2,b:3}}
alert($(data)[0].a); //弹出:1
});
//$.get()的三种传递数据的方式:
$.get("test.html",{a:1,b:2});
$.get("test.html","a=1&b=2");
$.get("test.html?a=1&b=2");
(3)$.post(url, [data], [callback], [type])
通过远程 HTTP POST 请求载入信息。这是一个简单的 POST 请求功能以取代复杂 $.ajax 。
url:待载入页面的URL地址。(必选)
data:待发送 Key/value 参数。(可选)
callback:载入成功时回调函数。fn(data)中参数data是返回的内容。(可选)
type:返回内容格式,xml, html, script, json, text, _default。(可选)
$.post("test.php", {name:"John", time:"2pm"}, //获得 test.php 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 函数进行处理
function(data){
process(data);
}, "xml");
$.post("test.php", { "func": "getNameAndTime" }, //获得 test.php 页面返回的 json 格式的内容
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");
//$.post()的两种传递数据的方式:
$.post("test.html",{a:1,b:2});
$.get("test.html","a=1&b=2");
4.第三层封装: $.getScript / $.getJSON()
(1)$.getJSON(url, [data], [callback])
通过 HTTP GET 请求载入 JSON 数据。
(2)jQuery.getScript(url, [callback])
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
url: 发送请求地址。
data: 待发送 Key/value 参数。
callback: 载入成功时回调函数。
$.getScript("test.js"); //加载并执行 test.js
$("div").click(function(){ //点击div时,加载并执行 test.js ,成功后显示信息
$.getScript("test.js", function(){ alert("OK")});
})
$.getJSON("test.json",function(r,s,xhr){ //test.json文件:{ {a:1,b:2},{a:2,b:3} }
alert(r[0].a) //弹出 1
})
5.Ajax全局事件
ajaxStart(callback) // AJAX 请求开始时执行函数。
ajaxStop(callback) // AJAX 请求结束(停止)时执行函数。
ajaxSend(callback) // AJAX 请求发送前执行函数。fn(e,xhr,set)
ajaxSuccess(callback) // AJAX 请求成功时执行函数。fn(e,xhr,set)
ajaxComplete(callback) // AJAX 请求完成时执行函数。fn(e,xhr,set)
ajaxError(callback) // AJAX 请求发生错误时执行函数。fn(e,xhr,set,error)
document.onclick=function(){
$.ajax({
url:"1.php",
type:"post",
timeout:2000 //超时2秒自动退出,执行sjaxStop
})
}
//最先执行(请求开始前)
$(document).ajaxStart(function(e,xhr,set){
alert("start");
})
//第二执行(发送请求)
$(document).ajaxSend(function(e,xhr,set){
alert(xhr.readyState); //1 服务器连接已建立,已调用send()方法,正在发动请求
alert(set.url); //a.php url的值
})
//第三执行(遇到错误)
$(document).ajaxError(function(e,xhr,set,error){
alert(xhr.readyState); //4 请求已完成
alert(set.url); //a.php url的值
alert(error); //Not Found 找不到a.php文件
})
//第四执行(请求完成)
$(document).ajaxComplete(function(e,xhr,set){
alert(xhr.readyState); //4 请求已完成
alert(set.url); //a.php url的值
})
//最后执行(请求结束)
$(document).ajaxStop(function(e,xhr,set){
alert("stop");
})
//连缀写法示例:/
$(document).ajaxStart(fn1).ajaxSend(fn2).ajaxStop(fn3)
局部和全局:
$.ajax({
url:"a.php",
type:"POST",
beforeSend:fn1,
success:fn2,
error:fn3,
complete:fn4
})
//等同:
$.ajax({
url:"a.php",
type:"POST",
beforeSend:fn1,
}).success(fn2).error(fn3).complete(fn4);
$.post("a.php").success(fn2).error(fn3).complete(fn4);
//等同:
$.post("a.php");
$(document).ajaxSuccess(fn2).ajaxError(fn3).ajaxComplete(fn4)
6.其它
表单 :
$.param() // 将对象序列化。
serialize() // 序列表表格内容为字符串。
serializearray() // 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
<form action="">
<input type="text" name="user" value="aaa" />
<input type="password" name="pass" value=123 />
<input type="text" name="lee" value="man" />
</form>
<script>
var obj={a:1,b:2}
var x1=$.param(obj); //x1 = "a=1&b=2"
var a1=$("form").serialize(); //a1 = "user=aaa&pass=123&lee=man"
var a2=$("form").serializeArray();
/*
a2等于:
[
{name:"user",value:"aaa"},
{name:"pass",value:123},
{name:"lee",value:"man"},
]
*/
</script>
jqXHR对象:
获取jaXHR对象:
var jaXHR = $.ajax({......});
建议用done(),fail(),always() 代替 success(),error(),complete().
jqXHR.done(fn1).fail(fn2).always(fn3); //成功时执行fn1,失败时执行fn2,完成时执行fn3
jqXHR重新定义时是添加之意不会覆盖,不会覆盖:
jqXHR.done(fn1);
jqXHR.done(fn2); //请求成功时执行fn1和fn2
同时操作多个jqXHR对象: $.when() 方法
var jqXHR1=$.ajax("a.html");
var jqXHR2=$.ajax("b.html");
jqXHR1.done(function(r){
alert(r); //请求成功时弹出a.html页面内容(包括所有html标签)
})
$.when(jqXHR1,jqXHR2).done(r1,r2){
//r1 是a.html页面内容
//r2 是b.html页面内容
}
注:可操纵多个,(jqXHR1,jqXHR2,...) 对应 (r1,r2,...)
其它:
$.ajaxPrefilter([type],fn)
$.ajaxSetup([options]) // 设置全局 AJAX 选项的默认值
//设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData }); //请求