jQuery1.9.1源码分析系列(十六)ajax之ajax框架

2020-05-29 06:57:44易采站长站整理

//把key和value作为URI组件编码,保证key和value不会出现特殊符号,即保证了“=”分割的正确性
s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
};
...
//传入的是数组,假设他是一个form表单键值对数组
if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
//序列化表单元素
jQuery.each( a, function() {
add( this.name, this.value );
});
} else {
...
}
//返回序列化结果,注意:空白符被替换成了"+"
return s.join( "&" ).replace( r20, "+" );
};

  其中encodeURIComponent详细点击查看

b. ajax的事件监听

  给ajax绑定事件有三种方式

  1.全局事件:$(document).on(‘ajaxStart’,func);

  2.ajax设置回调项:$.ajax({url: “php.html”, complete: func }); 

  3.deferred绑定方式:$.ajax(…).done(func);

  接下来我们一一讲解他们的实现。

全局事件(ajaxStart/ajaxStop/ajaxComplete/ajaxError/ajaxSuccess/ajaxSend)

  使用.on事件绑定这种通用方式我们毫无疑问是可以绑定ajax监听事件,除此之外还可以直接使用$(…).ajaxStart(func)来绑定事件。他们的实现也是用.on来绑定。


jQuery.each( [ "ajaxStart", "ajaxStop", "ajaxComplete", "ajaxError", "ajaxSuccess", "ajaxSend" ], function( i, type ){
jQuery.fn[ type ] = function( fn ){
return this.on( type, fn );
};
});

  触发事件比较简单,在进行ajax处理过程中在合适的时机直接使用jQuery.event.trigger直接触发。以ajaxStart为例


//如果此时没有正在执行的请求,则触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
jQuery.event.trigger("ajaxStart");
}  

ajax设置回调项(beforeSend/complete/success/error)

  触发设置回调项分两种:beforeSend直接在适当的时机调用。源码


//调用beforeSend回调,如果回调返回失败或abort则返回中止
if ( s.beforeSend && ( s.beforeSend.call( callbackContext, jqXHR, s ) === false || state === 2 ) ) {
//中止如果没有准备好
return jqXHR.abort();
}
  complete/success/error则利用Deferred的特性将回调添加到延时队列,等待延时状态处理。源码
//创建最终选项对象
s = jQuery.ajaxSetup( {}, options )
...
deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
...
//添加延时事件
deferred.promise( jqXHR ).complete = completeDeferred.add;
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;