正文 之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于jQuery ajax代码的实现解析; 变量定义 关于基础部分的知识,有兴趣的可以查看Ajax的实现及使用-原生对象. 这里整理的是自己在阅读zepto的ajax实现源码时的一些感悟. 这是开头的局部变量,其中可以大概了解作用的,除了正则表达式之外,originAnchor这个对象,就蛮有意思的,其…

Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1.2.0 ajax的事件触发顺序 zepto 针对 ajax 的发送过程,定义了以下几个事件,正常情况下的触发顺序如下: ajaxstart : XMLHttpRequest 实例化前触发 ajaxBeforeSend: 发送 ajax…

前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQuery,小钗暂时没有那个本事分析jQuery,这里就恬不知耻说说自己对zepto的源码理解,希望对各位有用 首先zepto的出现其实还是很讨巧的,他看见了巨人jQuery在移动浪潮来临时的转身慢.牵挂多的问题 马上搞出了一套轻量级类jQuery框架代码,核心代码1000行不到,快速占领了移动端的市场,…

Backbone是前端mvc开发模式的框架.它能够让view和model相分离,让代码结构更清晰简答,开发进度加快,维护代码方便.但是,现在出了一种mvvm框架,它是下一代前端mvc开发模式的框架,代表作是Angular.js,改天有时间去研究下.现在先来研究下Backbone框架. Backbone提供了Model, Collection, View,Events,Controller(Router).Model 用来创建数据,校验数据,绑定事件,存储数据到服务器端:View 用来展示数据.如…

“榕树下·那年”移动app ( hybrid ) 开发总结   榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边.       盛大文学无线业务中心负责这次具体开发任务.       一如既往的,开发的情况是:时间紧,任务重,人手少     技术选型 为了同时上线Android和IOS平台,所以选择了hybrid这种Native与HTML5混合的方式.   Native的优点是效率相对较高,但缺点是开发速度相对较慢,不利于自更新: HTML5的优点是开发速度快,可以实…

    榕树下网站本身的技术人员并不多,所以app开发的任务就到了母公司盛大文学这边.       盛大文学无线业务中心负责这次具体开发任务.       一如既往的,开发的情况是:时间紧,任务重,人手少     技术选型 为了同时上线Android和IOS平台,所以选择了hybrid这种Native与HTML5混合的方式.   Native的优点是效率相对较高,但缺点是开发速度相对较慢,不利于自更新: HTML5的优点是开发速度快,可以实现自更新,跨平台,缺点也是显而易见,效率不高,加载速度慢…

学习zeptoajax之前需要先脑补下,强烈推荐此文http://www.cnblogs.com/heyuquan/archive/2013/05/13/js-jquery-ajax.html 还有Aaron 的jquery源码分析系列,讲jquery的ajax的部分,当然其他也可以看,很值得学习. zepto ajax部分的设计相对简单,毕竟zepto就是轻量级的库,没有jqeury那样复杂,jquery ajax是依赖于Deferred模块的,整个代码一千多行.而zepto只有几百行,整体设…

简要:$.ajax是zepto发送请求的核心方法,$.get,$.post,$.jsonp都是封装了$.ajax方法.$.ajax将jsonp与异步请求的代码格式统一起来,内部主要是先处理url,数据和请求头部然后新建XMLHttpRequest对象发送请求. 代码如下: /** * ajax 请求 */ $.ajax = function(options){ var settings = $.extend({}, options || {}), //创建新的options对象,不影响optio…

简要:jsonp是一种服务器和客户端信息传递方式,一般是利用script元素赋值src来发起请求.一般凡是带有src属性的元素发起的请求都是可以跨域的. 那么jsonp是如何获取服务器的数据的呢? jsonp先将指定的一个函数名作为url后面的参数传递到服务器,服务器取得函数名并将要传递的数据形成json格式与函数名包装起来形成脚本传递给客户端执行. /** * jsonp请求 * @param options * @param deferred * @returns {*} */ $.ajax…

jQuery / zepto 的 $.ajax 方法需要配置很多选项, 有些是很常用的每个 ajax 请求都要用到的, 可以全局设置, 避免每次都写. 注意: 此处用的 jQuery 版本是 1.8.3, zepto 版本是 1.1.6 和 1.2.0. 使用别的版本的要自己测试下. jQuery 的方法是 jQuery.ajaxSetup() $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }…

源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var jsonpID = 0, document = window.document, key, name, rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/sc…

一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form . ie ,其中 ajax 模块是比较重要的模块之一,我们可以借助它提供的方法去做一些网络请求,还可以监听它的生命周期事件. Zepto 基本模块之 ajax 模块 我们都已经知道 Zepto 插件的一般形式是把 Zepto 对象传入给 $ 形参,那么可以…

准备知识 在看ajax实现的时候,如果对ajax技术知识不是很懂的话,可以参看下ajax基础,以便读分析时不会那么迷糊 全局ajax事件 默认$.ajaxSettings设置中的global为true,因此在Ajax请求的生命周期内,这些事件将被触发: ajaxStart:如果没有其他Ajax请求当前活跃将会被触发 ajaxBeforeSend:再发送请求前,可以被取消 ajaxSend:像 ajaxBeforeSend,但不能取消 ajaxSuccess:当返回成功时 ajaxError:当有…

1.ajax的baseHeaders ajax插件中的baseHeaders对象的是http请求头部的信息 var mime = settings.accepts[dataType], baseHeaders = { }, protocol = /^([\w-]+:)\/\//.test(settings.url) ? RegExp.$1 : window.location.protocol, xhr = $.ajaxSettings.xhr(), abortTimeout if (!setti…

简要:ajax请求具有能够触发各类事件的功能,包括:触发全局事件,请求发送前事件,请求开始事件,请求结束事件等等,贯穿整个ajax请求过程,这是非常有用的,我们可以利用这些事件来做一些非常有意思的事情比如:拦截器,权限管理等等,另外$.ajax()貌似会返回一个异步请求对象xhr,这个xhr也是继承了defer的promise对象.这些事件中全局事件是绑定在document上的,局部事件由settings.content指定.(不管怎么说事件都是绑定在dom元素上的,至于事件为什么要与dom关联…

前两天项目遇到一个用ajax修改全局变量的案例,一开始无法给这个全局变量修改赋值,在网上查了一下,解决如下: 修改前: var word=1; $.ajax({ url:"myJSON.json", type:"get", dataType:"json", success:function(data){ word=2; } }); alert(word); 结果:弹出1: 原因:js是单线程的语言,而ajax是异步加载的,可以这么理解,上面的代码…

平时项目中使用的全部是jQuery框架,但是对于做webapp来说jQuery太过于庞大,当然你可以选择jQuery 2.*针对移动端的版本. 这里我采用移动端使用率比较多的zepto框架,他跟jquery语法类似,相当于精简的jQuery把! 做webapp不得不考虑用户的网络情况跟用户体验度,所以传统的分页,在webapp上肯定是不行的,这里一般情况都是做成滚动自动更新,对于图片方面,当然是lazyload了,但是网上的lazyload Plugin是jQuery的,当然你可以改写成Zept…

概述 上一篇我们介绍了如何使用vue resource处理HTTP请求,结合服务端的REST API,就能够很容易地构建一个增删查改应用.这个应用始终遗留了一个问题,Web App在访问REST API时,没有经过任何认证,这使得服务端的REST API是不安全的,只要有人知道api地址,就可以调用API对服务端的资源进行修改和删除.今天我们就来探讨一下如何结合Web API来限制资源的访问. 本文的主要内容如下: 介绍传统的Web应用和基于REST服务的Web应用 介绍OAuth认证流程和密码…

写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需.本文将对比zepto/jQuery到Nuclear的设计和演化的过程. 无框架时代 互联网的春风刚刮来的时候,人们当时利用三剑客制作网页. <div onclick="showMsg()"></div> <script> funct…

Ajax 异步请求的时候,一般都会利用一个动态的 gif小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外部的CSS样式,就可以创建一个Ajax Loading 指示器 Spin.js 的在线设计.演示及下载地址为:http://fgnass.github.io/spin.js/ 我们可以在链接页面中,动态设置样式同时会自动生成样式的配置脚本: Spin.js 用法极其的简单: 显示 spinner v…

很久没有更新博客了,毕业2个月了,这段时间一直在忙于工作,一直没有时间更新,最近做的活动突然发现之前的经验居然忘记了...索性想想还是重新开始用博客记录平日里的工作经验吧,吐槽就到这里了,这篇记录的是我在平日里经常用到的请求后端的方式. 大多数情况下,无论是框架还是自己实现都是通过Ajax的方式来向后端请求数据的,而Ajax之间是通过传输json格式的文件来进行数据的传输的,大家对Ajax也很熟悉了,那么为什么我又要使用jsonp呢?这就要从什么是jsonp,什么是json来说一说了. json…

再回顾Ajax相关的内容,再次梳理学习还是很有必要的,尤其是实际的开发中,ajax更是必不可少,仔细学习以便避免不必要的错误. 文章导读: --1.使用XMLHttpRequest---------- 1.1 必备知识点 1.2 send()方法 1.3  再看CORS --2.HTTP请求和响应---------------- 2.1 Request Header中的参数 2.2 Response Header中的参数 2.3 GET请求和POST请求的区别 --3.jQuery中的Ajax-…

起因 做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 尝试 先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSubmit…

[转载请注明出处] 1 /** * @fileoverview ajax请求公用组件 * @author Limo * @date 2015/08/07 * Native package ajax method, make it like the ajax of zepto Lib. */ var querystring = require('querystring'); function ajax( opts ) { // 创建ajax对象 var xhr = null, abortTimeo…

说到诡异事件发生的原因,自然是想到两者之间的差异性. 首先是效果: jquery中有fadeIn和fadeOut两个效果,用来实现渐隐渐显的效果,这个在PC端自然是常用的效果.然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽,于是加上了登录框的渐隐效果.给用户缓冲的效果不错. 但是,zepto中并没有fadeIn和fadeOut,怎么办?难道真的就无法满足Mr Huang的愿望了吗?No. I will do it.在zepto中有个动画效果(animate),用这个效果来实…

API:http://www.css88.com/doc/zeptojs_api/ 一.建议:不要从官网下载,而是从 Github 下载了源代码之后自己 Build 一个版本,这样你可以自行挑选适合的模块.比如我挑选的模块是这么几个: polyfill,zepto,detect,event,ajax,form,fx 这7个就是标准版包含的模块 fx_methods 有了这个模块之后,.show() .hide() 等几个方法才能支持动画了,比如 .show('fast') data 提供对 .d…

1.  after, before, append, prepend 的区别 A.after(B) ==== B.insertAfter(A) // B 放在 A 的后面 A.before(B) ==== B.insertBefore(A) // B 放在 A 的前面 A.append(B) ==== B.appendTo(A) // B 放在 A 最后一个子元素的后面 A.prepend(B) ==== B.prependTo(A) // B 放在 A 第一个子元素的后面 2.  childr…

最近项目里用到foundation,而foundation4默认集成了Zepto,很多轮子要重造,所以有了下面的代码. <script> /** * Muti-Checking-Toggle Function * Depend on Zepto * By simon @ 2013-07-31 */ $('#checkAll').live('change',function (e) { e.preventDefault(); if ($('#checkAll').is(":checke…

原文地址:http://zeptojs.com/ 译文地址:http://www.html-5.cn/Manual/Zepto/ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 设计的目的是提供jquery的类似的APIs,但并不是100%覆盖jquery为目的.zepto设计的目的是有一个5-10k的通用库.下载并执行快.有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上. Z…

前言 在此,我不得不说移动端的兼容问题很多,并且很令人头疼,这不,这个星期又有两个让我逮着了,一个是使用zepto过程中出现的问题,一个是ios虚拟键盘的问题 我这里做一次记录,以免以后忘了,同时希望对后面做移动开发的朋友有一定帮助,首先,我们调一个简单的来说 zepto与querySelectorAll 首先,W3C提供了新的查询接口,querySelector与querySelectorAll 其中querySelector返回的是一个对象选择第一个对象,querySelectorAll返回…