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. Sqoop Import原理和详细流程讲解

    Sqoop Import原理 Sqoop Import详细流程讲解 Sqoop在import时,需要指定split-by参数.Sqoop根据不同的split-by参数值来进行切分,然后将切分出来的区域 ...

  2. XDoclet学习

    XDoclet可以通过你在java源代码中的一些特殊的注释信息,自动为你生成配置文件.源代码等等,例如web.ejb的部署描述文件.为你生成struts的struts-config.xml配置文件.j ...

  3. ADO.NET数据读取封装

    public class sqlserver { //private string sqlstr = System.ConfigurationManager.ConnectionStrings[&qu ...

  4. 洛谷P2633 Count on a tree

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  5. 【实用篇】Android之应用程序实现自动更新功能

    我个人用的是友盟提供的自动更新组件,因此在这里只描述如何实用友盟提供的组件来完成程序的自动更新,步骤如下: 1.登录友盟官网,点击注册一个友盟账号. 2.注册成功后将会自动进入到添加新应用界面,选择添 ...

  6. mysql安装遇到的坑

    安装mysql的三步: mysqld --initialize-insecure mysqld -install net start mysql 中间遇到了坑, 看这篇文章完美的解决了,记录一下 .以 ...

  7. JS实现分页效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. qqwry - 纯真ip库的golang服务

    qqwry 纯真 IP 库的一个服务.通过http提供一个ip地址归属地查询支持 软件介绍 我们大家做网站的时候,都会需要将用户的IP地址转换为归属地址功能,而之前的作法大都是从硬盘的数据文件中读取, ...

  9. CentOS6.4安装Docker

    首先,须要安装EPEL仓库 # wget http://mirrors.yun-idc.com/epel/6/i386/epel-release-6-8.noarch.rpm # rpm -ivh e ...

  10. 手动连接数据库(jdbc)

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...