jQuery1.9.1源码分析系列（十六）ajax之ajax框架
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是如何解决跨域问题的？ 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'},value:'selectM2'},{ name:'key2',value:0}…]） jQuery.param(serializeArray,traditional )（将key/value键值对的对象数组序列化为“key=value&key=value…”字符串）。 serialize直接调用jQuery.param( this.serializeArray() )即可。 serializeArray的源码如下：主要进行三个步骤：提取表单元素、过滤出满足提交条件的表单元素、组合成key/value键值对的对象数组 需要注意的是jQuery的过滤结果符合正常的表单提交结果：//过滤出为需要提交的表单元素（有name名称、非disabled元素、非提交按钮等元素、checkbox/radio的checked的元素） param函数源码如下：主要进行两个处理：将key/value成作为URI组件编码（保证key和value不会出现特殊符号，即保证了“=”分割的正确性）、使用“&”链接并将空白符被替换成了"+" 其中encodeURIComponent详细点击查看 b. ajax的事件监听给ajax绑定事件有三种方式 1.全局事件：$(document).on(‘ajaxStart',complete: func }); 3.deferred绑定方式：$.ajax(…).done(func); 接下来我们一一讲解他们的实现。 全局事件（ajaxStart/ajaxStop/ajaxComplete/ajaxError/ajaxSuccess/ajaxSend） 使用.on事件绑定这种通用方式我们毫无疑问是可以绑定ajax监听事件，除此之外还可以直接使用$(…).ajaxStart(func)来绑定事件。他们的实现也是用.on来绑定。 触发事件比较简单，在进行ajax处理过程中在合适的时机直接使用jQuery.event.trigger直接触发。以ajaxStart为例 ajax设置回调项(beforeSend/complete/success/error) 触发设置回调项分两种：beforeSend直接在适当的时机调用。源码 deferred方式绑定回调 Deferred方式绑定事件就不用特别说明了，因为ajax本身就是一个延时对象。直接使用$.ajax(…).done(fn).fail(fn). progress(fn).always(fn).then(fn)。源码 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |