ajax_jquerys_事件机制分析
2017/04/18 11:03 分类: 技术交流 浏览:126
在实际的项目开发中,作为前端人员,平日接触最多就是对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有帮助。
赞 0