微信扫一扫打赏支持

js进阶 14-9 ajax事件有哪些

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 ?>

 

 

 

 

 

 

 

 
posted @ 2018-07-20 14:01  范仁义  阅读(1417)  评论(0)  编辑  收藏  举报