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. Spring Security Architecture--官方

    原文地址:https://spring.io/guides/topicals/spring-security-architecture/ Table of contents Authenticatio ...

  2. pig安装配置

    pig的安装配置很简单,只需要配置一下环境变量和指向hadoop conf的环境变量就行了 1.上传 2.解压 3.配置环境变量 Pig工作模式 本地模式:只需要配置PATH环境变量${PIG_HOM ...

  3. 如何快速复制Windows警告提示消息对话框内容

    凡是使用过计算机的朋友,都遇到过系统发出的警告提示消息对话框,如图所示. 哇!好长的一串英文错误警告,这要手写到什么时候呢?不!现在不用这么麻烦了. 你只要鼠标选中这个提示框Ctrl+C,然后打开你的 ...

  4. vue.js路由vue-router（一）——简单路由基础

    前言 vue.js除了拥有组件开发体系之外,还有自己的路由vue-router.在没有使用路由之前,我们页面的跳转要么是后台进行管控,要么是用a标签写链接.使用vue-router后,我们可以自己定义 ...

  5. 学习参考《零基础入门学习Python》电子书PDF+笔记+课后题及答案

    国内编写的关于python入门的书,初学者可以看看. 参考: <零基础入门学习Python>电子书PDF+笔记+课后题及答案 Python3入门必备; 小甲鱼手把手教授Python; 包含 ...

  6. jquery点击弹框外层关闭弹框

    $(document).bind("click",function(e){            if($( e.target ).closest(".game-cont ...

  7. CCF模拟 无线网络

    无线网络 时间限制: 1.0s 内存限制: 256.0MB   问题描述 目前在一个很大的平面房间里有 n 个无线路由器,每个无线路由器都固定在某个点上.任何两个无线路由器只要距离不超过 r 就能互相 ...

  8. jquery09--Callbacks : 回调对象

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 37.cgi网页交互

    1.Apache的安装 地址:链接:https://pan.baidu.com/s/1kWdSWwZ 密码:nuqo 2.在相应路径下写html如图所示 new.html代码: <html> ...

  10. PHP生成二维码方法

    <?php //先下载一份phpqrcode类,下载地址http://down.51cto.com/data/780947require_once("phpqrcode/phpqrco ...