js进阶 14-9 ajax事件有哪些
一、总结
一句话总结：ajax开始时事件、发送时事件，请求完成时事件，请求成功时事件，请求结束时事件，请求错误时事件事件。
1、ajax事件的监听对象是谁？
都是document对象
21 $(document).ajaxStart(function(){
22 alert('ajaxStart() AJAX 请求开始时执行函数')
23 })
24 $(document).ajaxComplete(function(){
25 alert('ajaxComplete() AJAX 请求完成时执行函数')
26 });
2、ajax事件如何使用？
直接监听document对象，然后在ajax发生的时候，这些事件就会被调用
21 $(document).ajaxStart(function(){
22 alert('ajaxStart() AJAX 请求开始时执行函数')
23 })
二、ajax事件有哪些
1、相关知识
ajax事件
$.ajax()方法是jQuery底层AJAX实现。之前讲的简单易用的$.get,$.post 等为高层实现见。$.ajax()返回其创建的XMLHttpRequest 对象。大多数情况下我们无需直接操作该函数。除非你需要操作不常用的选项，以获得更多的灵活性。
- ajaxStart()AJAX请求开始时执行函数。
- ajaxStop()AJAX请求结束时执行函数。
- ajaxComplete()AJAX请求完成时执行函数。
- ajaxError()AJAX请求发生错误时执行函数。
- ajaxSuccess()AJAX请求成功时执行函数。
- ajaxSend()AJAX请求发送前执行函数。Ajax事件。
2、代码
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <style> 4 </style> 5 <head> 6 <meta charset="UTF-8"> 7 <title>演示文档</title> 8 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 9 <style type="text/css"> 10 </style> 11 </style> 12 </head> 13 <body> 14 <input type="button" id="btn" value="Ajax测试"> 15 <div id="test"></div> 16 <script type="text/javascript"> 17 $(function(){ 18 $('#btn').click(function(){ 19 $('#test').load('test1.php') 20 }) 21 $(document).ajaxStart(function(){ 22 alert('ajaxStart() AJAX 请求开始时执行函数') 23 }) 24 $(document).ajaxComplete(function(){ 25 alert('ajaxComplete() AJAX 请求完成时执行函数') 26 }); 27 $(document).ajaxStop(function(){ 28 alert('ajaxStop() AJAX 请求结束时执行函数。') 29 }); 30 $(document).ajaxSuccess(function(){ 31 alert('ajaxSuccess() aAJAX 请求成功时执行函数') 32 }); 33 $(document).ajaxSend(function(){ 34 alert('ajaxSend() AJAX 请求发送前执行函数。Ajax 事') 35 }) 36 $(document).ajaxSend(function(){ 37 alert('请求发生错误！') 38 }) 39 40 }) 41 </script> 42 </body> 43 </html>
php
1 <?php 2 echo "AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。"; 3 ?>