jQuery基础7-Ajax请求

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 });    //请求

jQuery基础1-简介、语法

jQuery基础2-选择器

jQuery基础3-筛选（过滤、查找、串联）