`

jquery中各个事件执行顺序

阅读更多
jquery中各个事件执行顺序如下:

1.ajaxStart(全局事件)

2.beforeSend

3.ajaxSend(全局事件)

4.success

5.ajaxSuccess(全局事件)

6.error

7.ajaxError (全局事件)

8.complete

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地方)。

下例演示一次ajax请求过程中各个事件执行的顺序,以及全局ajax的使用方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
//点击按钮,并执行ajax请求
$("#ajaxReuqestID").click(function(){
$.ajax({
url: "http://hi.baidu.com/im886",
beforeSend:function(){
$("#ajaxStateID").text("berforeSend");
alert("berforeSend");
},
success: function(){
$("#ajaxStateID").text("success");
alert("success");   
},
error:function(){
$("#ajaxStateID").text("error");
alert("error");
},
complete:function(){
$("#ajaxStateID").text("complete");
alert("complete");
}
});
});

$("#ajaxStateID").ajaxStart(function(){
$(this).text("ajaxStart");
alert("ajaxStart");
}).ajaxSend(function(){
$(this).text("ajaxSend");
alert("ajaxSend");
}).ajaxSuccess(function(){
$(this).text("ajaxSuccess");
alert("ajaxSuccess");
}).ajaxError(function(){
$(this).text("ajaxError");
alert("ajaxError");
}).ajaxComplete(function(){
$(this).text("ajaxComplete");
alert("ajaxComplete");
}).ajaxStop(function(){
$(this).text("ajaxStop");
alert("ajaxStop");
});
})
</script>
</head>
<body>
<input type="button" value="点击触发ajax请求" id="ajaxReuqestID"/>
<div id="ajaxStateID"></div>
</body>
</html> 
分享到:
评论

相关推荐

    jquery $.ajax各个事件执行顺序

    下面将详细解释$.ajax的各个事件以及它们的执行顺序: 1. ajaxStart(全局事件) ajaxStart事件是在页面上第一个Ajax请求开始之前触发的全局事件。这个事件通常用于执行一些需要在所有Ajax请求开始前进行的初始化...

    jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    了解jQuery中Ajax全局事件的引用方式和各个事件的执行顺序对于开发动态交互式网页具有重要的参考价值。 首先,我们来介绍jQuery中的全局事件。全局事件是指在所有Ajax请求中都可能会触发的事件,它们提供了监控和...

    jQuery企业大事件攀爬效果

    3. **jQuery动画**:在JavaScript中,我们引入jQuery库,并通过选择器选取所有事件元素。使用`.animate()`方法,可以为每个事件元素设置一个动画,例如,让它们从底部逐渐滑动到指定位置,模拟攀爬的过程。可以设定...

    jQuery源码分析系列.pdf

    - **队列Queue**:讲解队列在jQuery动画和AJAX请求中的作用,以及如何管理和控制队列中的任务执行顺序。 #### 四、属性操作与事件处理 - **属性操作**:分析jQuery中对DOM元素属性进行操作的方法,包括设置、获取...

    jquery实现的hover事件导航条特效源码.zip

    同时,使用delay()和queue()可以控制动画的执行顺序和间隔,使得导航条的动态效果更加流畅自然。 综上所述,jQuery的Hover事件在导航条特效的实现中起到了关键作用。通过结合HTML、CSS和jQuery,我们可以轻松创建出...

    accp7.0 jquery课件

    2. 动画队列:jQuery通过动画队列控制多个动画顺序执行,如`.queue()`和`.dequeue()`,以及`.delay()`用于在动画序列中插入延迟。 3. 自定义动画:利用`.show()`, `.hide()`, `.fadeIn()`, `.fadeOut()`等方法,...

    jQuery源码分析系列

    这展示了jQuery如何使用队列来控制函数的执行顺序和时机。 6. 属性操作:涉及jQuery对DOM属性和样式进行读取和设置的方法,例如 attr(), removeAttr(), css() 等。 7. 事件处理-Event:分析jQuery中的事件绑定与...

    ecshop解决jquery冲突js

    在电子商务平台开发中,...总之,解决ECShop中的JQuery冲突是一个涉及理解JavaScript加载顺序、作用域和库交互的重要任务。通过合理使用`noConflict()`和其他技术,我们可以确保各个库和谐共存,提供顺畅的用户体验。

    jquery.中文帮助文档

    - **动画队列**: `queue()` 和 `dequeue()` 可以控制动画执行顺序。 ### 4. Ajax - **$.ajax()**: 这是jQuery的核心Ajax方法,用于发起异步请求。 - **$.get()** 和 **$.post()**: 简化版的Ajax请求,分别对应GET...

    jQuery 实战 光盘

    - **队列与速度控制**: `queue()`, `dequeue()`, `delay()`控制动画执行顺序和时间。 4. **Ajax交互** - **$.ajax()**: 核心Ajax函数,可以完全自定义请求参数。 - **$.get()**和**$.post()**: 简化的GET和POST...

    jQuery发展历程横向时间轴代码.zip

    2. **事件监听**:jQuery提供了方便的事件处理函数,如`$(document).ready()`用于页面加载完成后执行代码,以及`.on()`用于添加事件监听器。在这个例子中,可能有`mousedown`、`mouseup`和`mousemove`事件来实现鼠标...

    JQuery(A~Z)教程

    这个“JQuery(A~Z)教程”显然是一个全面涵盖jQuery各个方面知识的资源集合,从基础到高级,从A到Z,涵盖了所有关键概念和技术。 ### A - Ajax Ajax(Asynchronous JavaScript and XML)是jQuery的核心特性之一,...

    jquery流程插件

    3. **定义流程**:在配置对象中设定流程的步骤、顺序、状态等信息。 4. **绑定事件**:根据需求监听插件提供的事件,实现业务逻辑。 5. **更新状态**:在代码中调用插件的API方法,如切换步骤、改变状态等。 四、...

    李炎恢的jquery教程pdf合集

    9. **特效与效果**:探讨高级动画技术,如自定义动画、动画队列和延时,以及如何控制动画执行顺序。 10. **事件委托**:讲解事件委托的概念,如何使用`.delegate()`或`.on()`实现事件处理,提高性能,处理动态生成...

    jQuery-实现仿qq空间时间轴代码.zip

    3. **jQuery基础**:在JavaScript中引入jQuery库,通过`$(document).ready()`函数确保在页面加载完成后执行代码。jQuery提供了丰富的选择器(如`$(".class")`、`$("#id")`)和方法(如`.append()`、`.addClass()`、`...

    jquery171-20121018-win

    1.7.1版本在此基础上进行了性能提升,同时增加了更精确的控制选项,如定时器和动画队列,让开发者可以更好地控制动画的执行顺序和速度。 在DOM操作方面,jQuery提供了一系列便捷的方法,如`$(selector).html()`, `$...

Global site tag (gtag.js) - Google Analytics