ajax_jquerys_事件机制分析

在实际的项目开发中，作为前端人员，平日接触最多就是对HTML元素操作和前端发请求去获取后端数据，由于浏览器兼容性和原生写法过于复杂，这时jQuery给我们提供了对发送请求的封装，那就是jQuery的ajax方法，非常的实用和方便。那有去了解过jQuery到底是怎么做的？其实jQuery就是通过事件原理来做的，下面源码时代web前端培训讲师来对jQuery的ajax方法来做一些分析。

如下jQuery 3.0版本代码。

首先jQuery定义的有关请求的全局状态：

//jQuery开始声明了一个变量来表示是否支持AJAX

 global: true;

// 再用一个active变量来记录未完成的ajax请求数量

active: 0,

 //一旦有ajax方法被调用，马上通过fireGlobals标识

Var ajax=function()( fireGlobals = s.global;)

我们使用jQuery Ajax时都会分别对不同状态指定回调函数，那jQuery里面是如何来做的呢？

// 首先jQuery AJAX 定义了这六大事件

jQuery.each( [

"ajaxStart",//请求开始事件

"ajaxStop",//请求结束事件

"ajaxComplete",//请求完成事件

"ajaxError",//请求错误事件

"ajaxSuccess",//请求成功事件

"ajaxSend"//请求发生事件

], function( i, type ) {

jQuery.fn[ type ] = function( fn ) {

return this.on( type, fn );

};

} );

// 发送新请求时 acitve自增一次，表示有一个新请求，

   并开始请求

if ( fireGlobals && jQuery.active++ === 0 ) {

jQuery.event.trigger( "ajaxStart" );

}

// 发送请求，调用XHR来做事。

if ( fireGlobals ) {

globalEventContext.trigger( "ajaxSend", [ jqXHR, s ] );

}

//根据请求状态（成功、失败）回调指定函数

if ( fireGlobals ) {

globalEventContext.trigger( isSuccess ? "ajaxSuccess" : "ajaxError",

[ jqXHR, s, isSuccess ? success : error ] );

}

//请求完成

if ( fireGlobals ) {

globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );

}

// 整个请求结束后，active自减一次，标记已完成一个。

if ( !( --jQuery.active ) ) {

jQuery.event.trigger( "ajaxStop" );

}

}

如上就是对jQuery的Ajax有关事件方面的结束，希望对你学习Ajax有帮助。