Jquery——Day4（Ajax进阶：加载请求、错误请求、请求全局事件、json/jsonp）

1、加载请求

jQuery提供了两种全局事件：ajaxStart()、ajaxStop()。

只要用户触发了Ajax，请求开始时（未完成其他请求）激活ajaxStart()，请求结束时激活ajaxStop()

$('.loading').ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

若要请求时间太长。可以设置超时timeout；

若不想触发全局事件，可以设置“global”为false。

$.ajax({
	timeout:500
});

$.ajax({
	global:false
});

2、错误请求

（1）使用ajax，可以使用error()方法

$.ajax(function(){
	error:function(xhr,errorText,errorStatus){
		alert(xhr.status+':'+xhr.statusText);
	}
});

（2）$.post()使用连缀的error()方法提示错误，连缀方法被fail()取代。

$.post('user.php').error(function(xhr,errorText,errorType){
	alert(errorText+':'+errorType);
	alert(xhr.status+':'+xhr.statusText);
});

（3）$.post()使用全局ajaxError()提示错误

$(document).ajaxError(function(event,xhr,settings,info){
	for(var i in event){
		document.write(i+"<br/>");
	}
});

3、请求全局事件

（1）ajaxSuccess()，对应局部方法success()，请求成功完成时执行

（2）ajaxComplete()，对应complete()，请求完成后注册一个回调函数

（3）ajaxSend()，没有对应的局部方法，请求之前要绑定的函数。（只有属性beforeSend）

$(function(){
	$('form input[type=button]').click(function(){
		$.post('user.php',$('form').serialize());
	});

	$(document).ajaxSend(function(){
		alert("发送请求之前！");
	}).ajaxComplete(function(){
		alert("请求完成后！");
	}).ajaxSuccess(function(){
		alert("请求成功后！");
	}).ajaxError(funcion(){
		alert("请求失败后！");
	});
});

此外，若要在ajax()方法下执行上述这些函数，如下所示：

$.ajax({
	type:'POST',
	url:'user.php',
	data:$('form').serialize(),
	success:function(response,status,xhr){
		$('#box').html(response);
	},
	complete:function(){
		alert('请求完成后，不管成功与失败！');
	},
	beforeSend:function(){
		alert('请求发送之前！');
	},
	error:function(){
		alert('请求失败后！');
	}
});

4、JSON和JSONP

（1）JSON

首先，以一个json文件为例，text.json

[
	{
		"url":"baidu.com"
	}
]

若要在ajax中加载该json文件，即

$.ajax({
	type:'POST',
	url:'text.json',
	//dataType:'html',
	success:function(response,status,xhr){
		//alert(response);
	}

});

由于json文件默认的dataType为“json”；

若强制将其改为“html”，则在alert弹出对话框时，需要借助“response”

（2）JSONP

若想跨域进行操作文件时，就必须使用JSONP。

JSONP（JSON with Padding），它是一个非官方的协议，它允许在服务器集成Script tags返回至客户端，同时通过JavaScript callback回调函数的形式实现跨域访问。

//跨域的php端文件，即远程端的文件jsonp.php
<?php
	$arr=array('a'=>1,'b'=>2,'c'=>3);
	$result=json_encode($arr);
	$callback=$_GET['callback'];
	echo $callback"($result)";
?>

类似于上述的远程端php，需要使用jsonp文件，如下所示：
a、本地访问——“jsonp.php”

$.ajax({
	type:'POST',
	url:'jsonp.php',    //php文件默认是html文件，得到的是json文件；
	dataType:'json',
	success:function(response,status,xhr){
		alert(response.a);
	}

});

b、远程端访问
若url对应的不是“jsonp.php”，而是“http://www.li/jsonp.php?callback=?”
若远程访问json2.php，此时不用ajax()方法，用getJSON()方法

//跨域，远程
$.getJSON("http://www.li/json.php?callback=?",function(){
	alert(response.a);
	console.log(response);
});

远程访问json，采用jsonp进行
（1）若dataType:'json'时，所对应的url文件必须是含有“?callback=?”的情况；
（2）若不使用“callback”回调函数时，还可以使用第二种方法，在ajax()方法中，将“dataType”设置为“jsonp”。


5、jqXHR对象
该对象是原生XMLHttpRequest的超级，包括“success()、complete()、error()”
而对于jqXHR是$.ajax()返回的对象。

//获取jqXHR对象
var jqXHR=$.ajax({
	type:'POST',
	url:'test.php',
	data:$('form').serialize();
});
jqXHR.succss(function(){
	alert(response);
});

由于success()、complete()、error()方法可能取消，同时用done()、always()、fail()三种代替。
done()表示成功后的回调函数。

jqXHR.done(function(response){
	alert(response+'1');
}).done(function(response){
	alert(response+'2');
});

使用jqXHR的连缀方式比$.ajax()属性方式3大好处：
（1）可连缀操作，可读性大大提高；
（2）可以多次执行同一个回调函数；
（3）为多个操作指定回调函数。
（注意：在上述案例中类似于jqXHR.done().done()）