AJAX
1.ajax请求
1.1 $.ajax(url,[settings]) 用于通过后台HTTP请求加载远程数据。通过该函数，我们无需刷新当前页面即可获取远程服务器上的数据。
jQuery.ajax()函数是jQuery的底层AJAX实现。jQuery.get()、 jQuery.post()、 load()、 jQuery.getJSON()、 jQuery.getScript()等函数都是该函数的简化形式(都调用该函数，只是参数设置有所不同或有所省略)
属性：accepts 默认值 取决于dataType属性
发送的内容类型请求头，用于告诉服务器——浏览器可以接收服务器返回何种类型的响应
async 默认值 true
表示是否是异步请求
beforeSend 指定在请求发送前需要执行的毁掉函数
该函数还有两个参数：其一是jqXHR对象，其二是当前settings对象。这是一个Ajax事件，如果该函数返回false，将取消本次ajax请求。
cache 默认值 true (dataType为script或jsonp时，则默认为false)
指示是否缓存URL请求。如果设为false将强制浏览器不缓存当前URL请求。该参数只对HEAD、GET请求有效(POST请求本身就不会缓存)。
complete 指定请求完成(无论成功或失败)后需要执行的回调函数
contents 一个以"{字符串：正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型
contentType 默认值 'application/x-www-form-urlencoded; charset=UTF-8'
使用指定的内容编码类型将数据发送给服务器
context 用于设置ajax相关回调函数的上下文对象（函数内的this）
converters 默认值 {'* text': window.String, 'text html': true, 'text json': jQuery.parseJSON, 'text xml': jQuery.parseXML}
一个数据类型转换器。每个转换器的值都是一个函数，用于返回响应转化后的值
crossDomain 默认值 同域请求为false 跨域为true
指示是否是跨域请求
data 发送到服务器的数据，它将被自动转为字符串类型。如果是GET请求，它将被附加到URL后面。
dataFilter 指定处理响应的原始数据的回调函数
dataType 默认值：jQuery智能猜测，猜测范围(xml、 json、 script或html)
指定返回的数据类型。该属性值可以为：
'xml' :返回XML文档，可使用jQuery进行处理。
'html': 返回HTML字符串。
'script': 返回JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
'json': 返回JSON数据。JSON数据将使用严格的语法进行解析(属性名必须加双引号，所有字符串也必须用双引号)，如果解析失败将抛出一个错误。从jQuery 1.9开始，空内容的响应将返回null或{}。
'jsonp': JSONP格式。使用JSONP形式调用函数时，如"url?callback=?"，jQuery将自动替换第二个?为正确的函数名，以执行回调函数。
'text': 返回纯文本字符串。
error 指定请求失败时执行的回调函数
global 默认值 true
指示是否触发全局ajax，将该值设为false将阻止全局事件处理函数被触发，例如ajaxStart()和ajaxStop()。它可以用来控制各种Ajax事件。
headers 默认值：true
以对象形式指定附加的请求头信息。请求头X-Requested-With: XMLHttpRequest将始终被添加，当然你也可以在此处修改默认的XMLHttpRequest值。headers中的值可以覆盖beforeSend回调函数中设置的请求头(意即beforeSend先被调用)。
$.ajax({
url: "my.php" ,
headers: {
"Referer": "http://www.365mini.com" // 有些浏览器不允许修改该请求头
,"User-Agent": "newLine" // 有些浏览器不允许修改该请求头
,"X-Power": "newLine"
,"Accept-Language": "en-US"
}
});
jsonp 重写JSONP请求的回调函数名称。该值用于替代"url?callback=?"中的"callback"部分。
jsonpCallback 为JSONP请求指定一个回调函数名。
statusCode 默认值 {}
一组数值的HTTP代码和函数构成的对象，当响应时调用了相应的代码。例如：
$.ajax({
url: a_not_found_url ,
// 当响应对应的状态码时，执行对应的回调函数
statusCode: {
404: function() {
alert( "找不到页面" );
},
200: function(){
alert("请求成功");
}
}
});
type 默认值 get
请求类型，可以为'POST'或'GET'
$.ajax({
url: "jquery_ajax.php"
, type: "POST"
, data: "name=codeplayer&age=18"
, success: function( data, textStatus, jqXHR ){
// data 是返回的数据
// textStatus 可能为"success"、"notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象
alert("返回的数据" + data);
}
});
$.ajax({
url: "jquery_ajax.php?page=1&id=3"
, type: "POST"
// jQuery会自动将对象数据转换为 "name=codeplayer&age=18&uid=1&uid=2&uid=3"
, data: { name:"codeplayer", age:18, uid: [1, 2, 3] }
// 请求成功时执行
, success: function( data, textStatus, jqXHR ){
alert("返回的数据" + data);
}
// 请求失败时执行
, error: function(jqXHR, textStatus, errorMsg){
// jqXHR 是经过jQuery封装的XMLHttpRequest对象
// textStatus 可能为： null、"timeout"、"error"、"abort"或"parsererror"
// errorMsg 可能为： "Not Found"、"Internal Server Error"等
alert("请求失败：" + errorMsg);
}
});
// 将url单独提取出来作为第一个参数(jQuery 1.5+才支持)
$.ajax("jquery_ajax.php?action=type&id=3", {
dataType: "json" // 返回JSON格式的数据
, success: function( data, textStatus, jqXHR ){
// 假设返回的字符串数据为{ "name": "CodePlayer", age: 20 }
// jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
alert( data.name ); // CodePlayer
}
});
$.ajax( {
// 注意这里有个参数callback=?
url: "http://cross-domain/jquery_ajax.php?name=Jim&callback=?&age=21"
, async: false // 同步请求，发送请求后浏览器将被锁定，只有等到该请求完成(无论成功或失败)后，用户才能操作，js代码才会继续执行
, dataType: "jsonp" // 返回JSON格式的数据
, success: function( data, textStatus, jqXHR ){
// 假设返回的字符串数据为{ "site_name": "CodePlayer", "site_desc": "专注于编程开发技术分享" }
// jQuery已帮我们将该JSON字符串转换为对应的JS对象，可以直接使用
alert( data.site_desc ); // 专注于编程开发技术分享
}
});
$.ajax( {
// 加载指定的js文件到当前文档中
url: "http://code.jquery.com/jquery-1.8.3.min.js"
, dataType: "script"
});
1.2 $.get(url,[data],[success],[type]) 通过HTTP GET形式的AJAX请求获取远程数据。
// 以GET请求方式获取http://localhost/index.php?id=5的数据，将返回的html内容追加到body标签内
$.get( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
$("body").append( data );
} );
$.get( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
// 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
// 由于get()指定了返回数据的类型为JSON，则jQuery将会尝试将返回数据转换为JSON对象
// 如果转换成功，这里的data就已经是一个js对象
alert( data.name ); // CodePlayer
}, "json" );
1.3 $.post(url,[data],[success],[type]) 通过HTTP POST形式的AJAX请求获取远程数据。
// 以POST请求方式获取http://localhost/index.php?id=5的数据，将返回的html内容追加到body标签内
$.post( "http://localhost/index.php?id=5", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
$("body").append( data );
} );
$.post( "http://localhost/index.php?id=5", { bookId: 2 }, function(data, textStatus, jqXHR){
// 如果返回的原始文本数据为{ "name": "CodePlayer", "age": 20 }
// 由于post()指定了返回数据的类型为JSON，则jQuery将会尝试将返回数据转换为JSON对象
// 如果转换成功，这里的data就已经是一个js对象
alert( data.name ); // CodePlayer
}, "json" );
1.4 $.get()与$.post()的一些区别
1)GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。
2）GET方式对传输的数据大小有限制，通常不能大于2KB,而POST方式传递的数据量要比GET方式大得多，理论上不受限制。
3）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
4）GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_GET[]获取，而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取
1.5 $.getJSON(url,[data],[success]) 用于通过HTTP GET形式的AJAX请求获取远程JSON编码的数据
SON是一种数据格式，JS原生支持JSON格式，通过jQuery.getJSON()从服务器获得的JSON数据，jQuery会先尝试将其转为对应的JS对象。
如果请求的URL中包括"callback=?"等类似的部分，jQuery会自动将其视作JSONP，并执行对应的回调函数来获取JSON数据。
// 获取index.php?type=json的JSON数据，获取成功时弹出对话框
$.getJSON( "index.php?type=json", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
// 如果服务器返回的JSON格式的数据是 {"id": 5, "name": "CodePlayer"}
// JSON格式的数据的属性名称必须加双引号，字符串值必须加双引号。
// jQuery已经将其转换成对应的JS对象
alert( data.id ); // 5
alert( data.name ); // CodePlayer
} );
// 获取"/action.php?m=list&page=2&size=10"的JSON数据，获取成功时弹出对话框
$.getJSON( "/action.php?m=list", { page: 2, size: 10 }, function(data, textStatus, jqXHR){
// 如果服务器返回的JSON格式的数据是 [ {"id":11, "title":"文章11"}, {"id":12, "title":"文章12"}, {"id":13, "title":"文章13"} ]
// jQuery将获取的JSON格式数据转换为JS数组
for(var i in data){
var obj = data[i];
alert( obj.title );
}
} );
1.6 $.getScript(url,[success]) 用于通过HTTP GET形式的加载JavaScript文件并运行它。该函数用于动态加载JS文件，并在全局作用域下执行文件中的JS代码。函数可以加载跨域的JS文件。请注意，该函数是通过异步方式加载数据的。
$.getScript( "http://www.365mini.com/static/js/jquery-util.js" );
//加载并执行js文件：http://www.365mini.com/static/js/jquery-util.js?v=1.3
//并在成功后执行回调函数
$.getScript( "http://www.365mini.com/static/js/jquery-util.js?v=1.3", function(data, textStatus, jqXHR){
// data 是该请求返回的数据(可能经过处理)
// textStatus 可能是"success"、 "notmodified"等
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
alert( "加载成功" );
// 这里假设加载的js文件中定义了函数renderUI()，这里即可执行
renderUI();
});
1.7 load(url,[data],[complete]) 从服务器加载数据，并使用返回的html内容替换当前匹配元素的内容
load()函数只会替换每个匹配元素的内部内容(innerHTML)。
$("div").load("action.php?id=5", { username: "CodePlayer", age: 15 }, function(responseText, textStatus, jqXHR){
// responseText 是响应(返回)的原始文本数据
// textStatus 可能是 "success"、 "notmodified"、 "error"、 "timeout"、 "abort"或"parsererror"中的一个
// jqXHR 是经过jQuery封装的XMLHttpRequest对象(保留其本身的所有属性和方法)
if(textStatus == "success" || textStatus == "notmodified"){
alert("加载成功!");
}
});
2.ajax事件
2.1 ajaxStart(callback) 用于为AJAX请求的ajaxStart事件绑定处理函数。
$("p").ajaxStart(function(){alert(){this.id}})
2.2 ajaxStop(callback) 为AJAX请求的ajaxStop事件绑定处理函数
$("p").ajaxStop(function(){alert(){this.id}})
2.3 ajaxSend(callback) 置当AJAX请求即将被发送时执行的回调函数。
$("div").ajaxSend( function(event, jqXHR, options){
alert("处理函数1： 当前元素的id为" + this.id + "，请求的url为" + options.url);
} );
2.4 ajaxComplete(callback) 用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数。
$("div").ajaxComplete( function(event, jqXHR, options){
alert("处理函数2：请求方式为" + options.type);
} );
2.5 ajaxSuccess(callback) 用于设置当AJAX请求成功完成时执行的回调函数。
$("div").ajaxSuccess( function(event, jqXHR, options, data){
alert("处理函数2：请求方式为" + options.type + "，返回的数据是" + data);
} );
2.6 ajaxError()函数用于设置当AJAX请求失败时执行的回调函数。
$("div").ajaxError( function(event, jqXHR, options, errorMsg){
alert("处理函数2：请求方式为" + options.type + "，错误描述为" + errorMsg);
} );
3.其他
3.1 $.ajaxSetup()函数用于设置AJAX的全局默认设置。
$("button").click(function(){
$.ajaxSetup({url:"demo_ajax_load.txt",success:function(result){
$("div").html(result);}});
$.ajax();
});
3.2 $.param() 方法
param() 方法创建数组或对象的序列化表示。
该序列化值可在进行 AJAX 请求时在 URL 查询字符串中使用。
序列化一个 key/value 对象：
var params = { 1900, height:1200 };
var str = jQuery.param(params);
$("#results").text(str);
结果:
width=1680&height=1050
3.3 serialize() 方法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
$("button").click(function(){
$("div").text($("form").serialize());
});
3.4 serializeArray() 方法
serializeArray() 方法通过序列化表单值来创建对象数组（名称和值）,返回 JSON 数据结构数据。
$("button").click(function(){
x=$("form").serializeArray();
$.each(x, function(i, field){
$("#results").append(field.name + ":" + field.value + " ");
});
});