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

 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

       </style>

 </style>

 </head>

 <body>

     <input type="button" id="btn" value="Ajax测试">

     <div id="test"></div>

 <script type="text/javascript">

     $(function(){

         $('#btn').click(function(){

             $('#test').load('test1.php')

         })

         $(document).ajaxStart(function(){

             alert('ajaxStart() AJAX 请求开始时执行函数')

         })

         $(document).ajaxComplete(function(){

           alert('ajaxComplete() AJAX 请求完成时执行函数')

         });

         $(document).ajaxStop(function(){

           alert('ajaxStop() AJAX 请求结束时执行函数。')

         });

         $(document).ajaxSuccess(function(){

           alert('ajaxSuccess() aAJAX 请求成功时执行函数')

         });

         $(document).ajaxSend(function(){

           alert('ajaxSend() AJAX 请求发送前执行函数。Ajax 事')

         })

         $(document).ajaxSend(function(){

           alert('请求发生错误！')

         })

      })

 </script>

 </body>

 </html>

php

 <?php

     echo "AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。";

 ?>
 

js进阶 14-9 ajax事件有哪些的更多相关文章

  1. js进阶 14 jquery的ajax有哪些函数和事件（多练）

    js进阶 14 jquery的ajax有哪些函数和事件(多练) 一.总结 一句话总结:常用:load.ajax.post.get.getScript().getJSON().表单序列化,ajax事件这 ...

  2. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  3. js进阶 12-14 jquery的事件触发函数是哪两个

    js进阶 12-14 jquery的事件触发函数是哪两个 一.总结 一句话总结:trigger和triggerHandler 1.trigger传额外参数时候的注意事项是什么? 注意样例中是三个参数 ...

  4. js进阶 12-4 jquery键盘事件如何使用

    js进阶 12-4 jquery键盘事件如何使用 一.总结 一句话总结:键盘和鼠标都是外设输入设备,所以函数很像,所以使用就像鼠标事件click一样 1.jquery键盘事件有哪三个? 1(up和do ...

  5. JS进阶 | 解决JQ keyup事件延迟的问题

    写在前面 在使用keyup事件时,存在一个问题,假如想要做出类似于表单验证的demo:表单输入账号 “xxx” 后  再去ajax异步去后台数据库匹配,但是keyup事件的原理是每次键盘事件弹起就会检 ...

  6. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  7. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  8. js进阶ajax基本用法（创建对象，连接服务器，发送请求，获取服务器传过来的数据）

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  9. js进阶课程ajax简介（ajax是浏览器来实现的）

    js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...

随机推荐

  1. 963B：Destruction of a Tree

    You are given a tree (a graph with n vertices and n - 1 edges in which it's possible to reach any ve ...

  2. effective stl读书笔记 & stl里面提供的算法 & emplace & ostream_iterator

    加锁和解锁,也可以在构造函数和析构函数里面,自动调用. 相等和等价的关系:等价是用在排序的时候,跟less函数有关. vector,deque,string 要用erase-remove组合:而关联容 ...

  3. HDU 4588 Count The Carries 数位DP || 打表找规律

    2013年南京邀请赛的铜牌题...做的非常是伤心.另外有两个不太好想到的地方.. ..a 能够等于零,另外a到b的累加和比較大.大约在2^70左右. 首先说一下解题思路. 首先统计出每一位的1的个数, ...

  4. android Manifest.xml选项

    结构 继承关系 public final class Manifest extends Object java.lang.Object android.Manifest 内部类 class  Mani ...

  5. eXtremeDB相关问题解答（3）

    > 1.         Could our database support multi-database under one single instance? >   > 2. ...

  6. AngularJS实现cookie跨域

    前后端分离被越来越多的公司重视利用.然后带来的最棘手的问题就是.用户信息应怎样保存. 一.场景描写叙述 以Java为后台,AngluarJS做前端为例进行描写叙述:当用户在界面登录时.需把用户信息(如 ...

  7. ORA-06575: 程序包或函数 NO_VM_DROP_PROC 处于无效状态

    SQL> drop user aaa ;   drop user aaa   ORA-00604: 递归 SQL 级别 1 出现错误 ORA-06575: 程序包或函数 NO_VM_DROP_P ...

  8. OpenCV —— 矩阵和图像操作

    cvAbs , cvAbsDiff , cvAbsDiffS cvAdd , cvAddS , cvAddWeighted(可添加权重) #include <cv.h> #include ...

  9. 计算加班类型以及小时数(js)

    function GetDateDiff(startTime, endTime, diffType) { //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式 startTime ...

  10. 【t038】&&【u214】金字塔

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 小X来到一个雄奇的金字塔挖宝,但是这是一座被诅咒的金字塔,小X必须马上逃离这里,否则小X就会被埋在金字 ...