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


Posted in Javascript onDecember 04, 2015

AJAX 简介

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

您应当具备的基础知识

在继续学习之前,您需要对下面的知识有基本的了解:

HTML / XHTML
CSS
JavaScript / DOM

如果您希望首先学习这些项目,请在我们的首页访问这些教程。

什么是 AJAX ?

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。

Google Suggest

在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript 会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

今天就开始使用 AJAX

AJAX 基于已有的标准。这些标准已被大多数开发者使用多年。

既然是ajax框架,那么闲谈一谈jQuery的ajax处理思路。

现在的浏览器都支持ajax,只不过不同的浏览器使用方法可能有不同(IE使用new window.ActiveXObject("Microsoft.XMLHTTP"),标准浏览器使用new window.XMLHttpRequest())。如果按照这种思路,貌似jQajax只需要做好兼容处理就行了?

不是的,原生的ajax有一个说大不大说小不小的缺点——不支持跨域(同源策略由来已久,自行百度)。所以jQajax添加了这方面的处理,jQajax是如何解决跨域问题的?

<img src="http://img2.imgtn.bdimg.com/it/u=2406301718,2822592556&fm=21&gp=0.jpg"/>

是能取到图片的,很明显图片的路径和你的服务端不是一个域的。你可以试试看所有的带有src属性的标签都不受同源策略的影响。所以,jQuery就使用了这个属性,对于跨域请求使用script标签的src来请求路径。

然后jQuery在加上对ajax事件的三种监听方式:

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

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

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

基本上这就是jQajax所做的事情。

在正真进入ajax框架核心之前,先来分析一jQuery准备的几个序列化提交表单的函数。

a. 表单序列化

所谓的表单序列化即将表单需要提交的内容组成类似:“key=value&key=value…”形式的字符串。

序列化用到三个函数:

jQuery.fn. serialize()(序列化函数,筛选出表单中需要提交的数据并以序列化字符串方式返回,形如:“key=value&key=value…”)

jQuery.fn. serializeArray()(筛选出表单中需要提交的数据并以key/value键值对的对象数组格式返回,返回[{name:'key',value:'select1'},{name:'selectM',value:'selectM1'}, {name:'selectM',value:'selectM2'}, { name:'key2',value:0}…])

jQuery.param(serializeArray, traditional )(将key/value键值对的对象数组序列化为“key=value&key=value…”字符串)。

serialize直接调用jQuery.param( this.serializeArray() )即可。

serializeArray的源码如下:主要进行三个步骤:提取表单元素、过滤出满足提交条件的表单元素、组合成key/value键值对的对象数组

serializeArray: function() {
  //将form中的表单相关的元素取出来组成数组
  return this.map(function(){
    //表单节点有elements这个特征
    var elements = jQuery.prop( this, "elements" );
    return elements ? jQuery.makeArray( elements ) : this;
  })
  //过滤出为需要提交的表单元素(有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素)
  .filter(function(){
    var type = this.type;
    //使用.is(":disabled")过滤掉不可用的表单元素
    return this.name && !jQuery( this ).is( ":disabled" ) &&
    rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
    ( this.checked || !manipulation_rcheckableType.test( type ) );
  })
  //将表单提交元素组成name和value的对象数组
  .map(function( i, elem ){
    var val = jQuery( this ).val();
    return val == null ?
    null :
    jQuery.isArray( val ) ?
    jQuery.map( val, function( val ){
      return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
    }) :
    { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
  }).get();
}

需要注意的是jQuery的过滤结果符合正常的表单提交结果://过滤出为需要提交的表单元素(有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素)

param函数源码如下:主要进行两个处理:将key/value成作为URI组件编码(保证key和value不会出现特殊符号,即保证了“=”分割的正确性)、使用“&”链接并将空白符被替换成了"+"

jQuery.param = function( a, traditional ) {
  var prefix,
  s = [],
  add = function( key, value ) {
      //如果value是函数,执行他得到真正的value
      value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
      //把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;
//安装回调到deferreds上
for ( i in { success: 1, error: 1, complete: 1 } ) {
jqXHR[ i ]( s[ i ] );
}
//在ajax请求完成的处理函数中执行completeDeferred的延时列表
function done(){
...
//执行Complete处理
completeDeferred.fireWith( callbackContext, [ jqXHR, statusText ] );
...
}

deferred方式绑定回调

Deferred方式绑定事件就不用特别说明了,因为ajax本身就是一个延时对象。直接使用$.ajax(…).done(fn).fail(fn). progress(fn).always(fn).then(fn)。源码

deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks("once memory"),
...
deferred.promise( jqXHR ).complete = completeDeferred.add;
...
return jqXHR;
Javascript 相关文章推荐
angularJS中$apply()方法详解
Jan 07 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
vue 如何使用递归组件
Oct 23 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
jquery插件实现代码雨特效
Apr 24 jQuery
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 #Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 #Javascript
写给小白的JavaScript引擎指南
Dec 04 #Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 #Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 #Javascript
jQuery中cookie插件用法实例分析
Dec 04 #Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 #Javascript
You might like
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JSON 数据格式介绍
2012/01/13 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python元组常见操作示例
2019/02/19 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
如何理解python面向对象编程
2020/06/01 Python
新手学python应该下哪个版本
2020/06/11 Python
学校综治宣传月活动总结
2014/07/02 职场文书
2014年教研室工作总结
2014/12/06 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python
python 提取html文本的方法
2021/05/20 Python
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
在pycharm中无法import所安装的库解决方案
2021/05/31 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL