jQuery Ajax【下】

学习要点：

1.加载请求

2.错误处理

3.请求全局事件

4.JSON 和 JSONP

5.jqXHR 对象

一、加载请求

当网速较慢的时候，我们的请求迟迟没有被响应

这时候，用户就会感到不耐烦，因此我们需要一些友好的提示

JQ提供了两个全局事件,startAjax和stopAjax分别在ajax发生和结束请求的时候触发

// dome.html
<div></div>

// ajax.php
<?php echo 111;?>

$.ajax({
type : "get",
url : "ajax.php",
success : function (response, status, xhr) {
alert(response);
}
});
$(document).ajaxStart(function () {
$("div").html("数据加载中");
});
$(document).ajaxStop(function () {
$("div").html("数据加载完毕");
});

如果请求超时，我们可以设置超时的时间

首先我们来模拟一下，在ajax.php将响应时间加长

<?php
sleep(3000);
echo 111;
?>

$.ajax({
timeout : 2000,
type : "get",
url : "ajax.php",
success : function (response, status, xhr) {
alert(response);
},
error : function (response, status, xhr) {
alert("加载出错或者超时");
}
});
$(document).ajaxStart(function () {
$("div").html("数据加载中");
});
$(document).ajaxStop(function () {
$("div").html("数据加载完毕");
});

如果ajax不想触发全局事件，我们可以设置

$.ajax({
global : false,     // 这样ajaxStart和ajaxStop事件将不会触发了
type : "get",
url : "ajax.php",
success : function (response, status, xhr) {
alert(response);
}
});
$(document).ajaxStart(function () {
$("div").html("数据加载中");
});
$(document).ajaxStop(function () {
$("div").html("数据加载完毕");
});

二、错误处理

由于种种原因的限制，例如数据不存在或者网速的问题，我们的请求可能出来种种的问题，

这时我们就需要对错误进行处理，并且把他们表现出来

$.ajax()使用属性提示错误

$.ajax({
timeout : 2000,
type : "get",
url : "ajax.php",
success : function (response, status, xhr) {
alert(response);
},
error : function (xhr, errorText, errorStatus) {
alert(xhr.status + " : " + xhr.errorText);      // 0 : undefined
}
});
$(document).ajaxStart(function () {
$("div").html("数据加载中");
});
$(document).ajaxStop(function () {
$("div").html("数据加载完毕");
});

$.post()方法使用连缀.error()方法

在这里，test.php本身是不存在的

$.post("test.php").error(function (xhr, status, info) {
alert(xhr.status + " : " + xhr.errorText);      // 404 : undefined
alert(status + " : " + info);                   // error : Not Found
});

同时我们可以用.ajaxError()全局事件来提示错误

$(document).ajaxError(function (event, xhr, settings, infoError) {
alert(xhr.status + " : " + xhr.errorText);      // 0 : undefined
alert(settings + " : " + infoError);            // [object Object] : timeout
});
$.ajax({
timeout : 2000,
type : "get",
url : "ajax.php",
success : function (response, status, xhr) {
alert(response);
}
});

三、请求全局事件

在前面我们介绍了ajaxStart()、ajaxStop()和ajaxError()这三个全局事件

其实还有全局事件我们没有介绍，这里我们来列举几个常用的

1.第一组.ajaxSuccess()，对应一个局部方法：.success()，请求成功完成时执行。

<?php echo 111; ?>

// 局部方法.success()
$.ajax({
type : "get",
url : "ajax.php"
}).success(function (response, status, xhr) {
alert(response);        // 111
});
// 全局事件
$(document).ajaxSuccess(function (event, xhr, settings) {
alert(xhr.responseText);        // 111
});
$.ajax({
type : "get",
url : "ajax.php"
});

PS : 全局事件方法是所有 Ajax 请求都会触发到，并且只能绑定在 document 上。而局部方法，则针对某个 Ajax。

2.第二组：.ajaxComplete()，对应一个局部方法：.complete()，请求完成后注册一个回调函数。

局部方法.complete()

$.ajax({
type : "get",
url : "ajax.php"
}).complete(function (response, status, xhr) {
alert("complete");      // complete
});

全局事件

$(document).ajaxComplete(function (event, xhr, settings) {
// 遍历setteings
for (var s in settings) {
console.log(s + " : " + settings[s]);   // isLocal : false  ...
};
});
$.ajax({
type : "get",
url : "ajax.php"
});

3.第三组.ajaxSend()，没有对应的局部方法，只有属性 beforeSend，请求发送之前要绑定的函数。

ajax属性

$.ajax({
type : "get",
url : "ajax.php",
beforeSend : function (xhr, settings) {
alert("在发送之前的属性");      // 在发送之前的属性
}
});

全局事件

$(document).ajaxSend(function (event, xhr, settings) {
alert("数据发送之前");        // 数据发送之前
});
$.ajax({
type : "get",
url : "ajax.php"
});

四、JSON与JSONP

如果在同一个域下，$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。

而在非同域下，可以使用 JSONP，但也是有条件的。

在同域下

// ajax.json
{"name" : "zhang", "age" : 23}

$.ajax({
type : "post",
url : "ajax.json",
dataType : "json",
success : function (response, status, xhr) {
for (var i in response) {
alert(i + " : " + response[i]); // name : zhang ...
}
}
});

如果想跨域操作文件的话，我们就必须使用 JSONP

跨域的 PHP 端文件

http://114.215.112.235/test.php

<?php
$arr = array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
$result = json_encode($arr);
$callback = $_GET['callback'];
echo $callback."($result)";
?>

$.getJSON()方法跨越获取JSON文件

$.getJSON("http://114.215.112.235/test.php?callback=?", function (response) {
console.log(response);
});

$.ajax()跨域获取JSON

$.ajax({
url : 'http://114.215.112.235/test.php?callback=?',
dataType : "jsonp",
success : function (response, status, xhr) {
console(response);
alert(response.a);
}
});

五．jqXHR 对象

在之前我们使用的局部方法: .success()、.error()和.complete()方法，

使用的对象并非是XMLHttpRequest对象，而是jqXHR对象，

且我们推荐使用.done()、.fail()和.always()方法

var jqXHR = $.ajax({
url : "ajax.php",
type : "get"
});
for (var i in jqXHR) {
console.log(i + " : " + jqXHR[i]);      // readyState : 1  ....
}
jqXHR.done(function (response) {
alert(response);            // lll
});

使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处：

1.可连缀操作，可读性大大提高；

2.可以多次执行同一个回调函数；

3.为多个操作指定回调函数；

多个操作指定回调函数

// test1.php 和 test2.php
<?php echo "I am test1.php";?>
<?php echo "I am test2.php";?>

var jqXHR = $.ajax("test1.php");
var jqXHR2 = $.ajax("test2.php");
$.when(jqXHR, jqXHR2).done(function (r1, r2) {
// 遍历两个jqXHR对象
for(var v1 in r1) {
console.log(v1 + " : " + r1[v1]);       //0 : I am test1.php        ....
}
for(var v2 in r2) {
console.log(v2 + " : " + r2[v2]);       //0 : I am test2.php        ....
}
})