034-jQuery Ajax全局回调函数

1. ajaxStart()方法

1.1. ajaxStart()方法在AJAX请求发送前执行函数。

1.2. 语法

$(selector).ajaxStart(function(even))

1.3. 参数

2. ajaxSend()方法

2.1. ajaxSend()方法在AJAX请求开始时执行函数。

2.2. 语法

$(selector).ajaxSend(function(even,jqXHR,options))

2.3. 参数

3. ajaxSuccess()方法

3.1. ajaxSuccess()方法在AJAX请求成功时执行函数。

3.2. 语法

$(selector).ajaxSuccess(function(even,jqXHR,options,response))

3.3. 参数

4. ajaxError()方法

4.1. ajaxError()方法在AJAX请求发生错误时执行函数。

4.2. 语法

$(selector).ajaxError(function(even,jqXHR,options,error))

4.3. 参数

5. ajaxComplete()方法

5.1. ajaxComplete()方法在AJAX请求完成时执行函数。

5.2. 语法

$(selector).jQueryajaxComplete(function(even,jqXHR,options))

5.3. 参数

6. ajaxStop()方法

6.1. ajaxStop()方法在AJAX请求结束时执行函数。

6.2. 语法

$(selector).ajaxStop(function(even))

6.3. 参数

7. 6个全局回调函数的运行顺序

7.1. 6个全局回调函数的运行顺序是: ajaxStart()、ajaxSend()、ajaxSuccess()/ajaxError()、ajaxComplete()和ajaxStop()。

8. 例子

8.1. 新建一个名为jQueryAjaxGlobalFunction动态WEB工程

8.2. 新建test.json

{"data": {"code": 1, "info": "success", "msg": "请求成功。"}}

8.3. 新建test.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
	<code>1</code>
	<info>success</info>
	<msg>请求成功。</msg>
</data>

8.4. 新建index.html

<!DOCTYPE html>
<html>
	<head>
		<title>jQuery-Ajax的全局回调函数</title>
		<meta charset="utf-8" />

		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$(this).ajaxStart(function(even){
					console.log('-------ajaxStart Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxStart End-------------');  
				}).ajaxSend(function(even, jqXHR, options){
					console.log('-------ajaxSend Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxSend End-------------');  
				}).ajaxSuccess(function(even, jqXHR, options, response){
					console.log('-------ajaxSuccess Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxSuccess End-------------');  
				}).ajaxError(function(even, jqXHR, options, error){
					console.log('-------ajaxError Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxError End-------------');  
				}).ajaxComplete(function(even, jqXHR, options){
					console.log('-------ajaxComplete Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxComplete End-------------');  
				}).ajaxStop(function(even){
					console.log('-------ajaxStop Start-------------');
					for(var i = 0; i < arguments.length; i++){
						console.log(arguments[i]);
					}		
					console.log('-------ajaxStop End-------------');  
				});
				
				$('#btn1').click(function(){
					$.get('test.json');
				});
				$('#btn2').click(function(){
					$.post('test.xml');
				});
				$('#btn3').click(function(){
					$("#result").load("test.json");
				});
				$('#btn4').click(function(){
					$.ajax({
						url: 'test.xml',
						dataType: 'xml',
						cache: false
					});
				});
			});
		</script>
		<style type="text/css">
			div {
				width: 450px;
				height: 100px;
				background-color: pink;
			}
		</style>
	</head>
	<body> 
  		<div id="result">结果区域</div><br />
  		<button id="btn1">get test.json</button> <button id="btn2">post test.xml</button><br /><br />
  		<button id="btn3">load test.json</button> <button id="btn4">ajax test.xml</button>
	</body>
</html>

8.5. 运行项目

猜你喜欢

转载自blog.csdn.net/aihiao/article/details/112398202