zepto的ajax使用,Ajax的实现及使用-zepto
正文
之前归纳了ajax技术的基础知识,汗颜的是这两篇本应该在年初补上的,但因为种种原因,并没有补上.不过还好最近有空,所以开始整理之前的日记.共分为两篇:对于zepto ajax代码的实现解析;对于jQuery ajax代码的实现解析;
变量定义
关于基础部分的知识,有兴趣的可以查看Ajax的实现及使用-原生对象.
这里整理的是自己在阅读zepto的ajax实现源码时的一些感悟.
这是开头的局部变量,其中可以大概了解作用的,除了正则表达式之外,originAnchor这个对象,就蛮有意思的,其在内部缓存了当前浏览器访问地址.在下面的函数里,应当是用来验证信息的.
全局的参数大概就是这样,最关键的应当是其中定义的xhr对象,直接返回XMLHttpRequest对象,当然,这里没有做兼容.
在源码里还有个
$.active = 0;
大致上,所有的基础参数就是这么多了
入口
这里对于参数做了处理,保证每次的参数都会是一个局部变量,不会影响外部的原始参数.
deferred这个参数应当是用来执行promise的相关操作,而不是用回调来实现.
真正的开始是
ajaxStart(settings);
function ajaxStart(settings) {
if (settings.global && $.active++ === 0) triggerGlobal(settings, null, 'ajaxStart')
}
这里用active做判断,只有当active=0时,$.active++ === 0才成立.
然后如果没有修改默认配置的global,则开始执行
这两个函数.
用于触发全局事件,这就相当于是留了一个钩子,用于扩展ajax的功能.
使用类似:
$(document).on('ajaxBeforeSend', function(e, xhr, options){
// dosomething
})
继续执行
这里除了判断是否是跨域,
还通过serializeData()函数进行参数序列化,如果类型是get,则
options.url = appendQuery(options.url, options.data), options.data = undefined
url会加上拼接而成的字符串,参数设置为:
{
name:"test"
}
就会变成类似
转换方法主要是
可以看到最主要的还是params.add(),用于将对象转为字符串,这里的traditional我确实没有怎么用到过这种参数结构,暂且不表.
最后的返回,通过array的join,转为以&分割的字符串.
而在settings.cache为false或者该请求是一个jsonp的情况下,给其url加上时间戳.
这里就是设置各种头部信息的地方,当然,如果没有传任何参数,则会默认使用当前页面的头部信息,并在最后传递给
xhr.setRequestHeader = setHeader
接下来就是$.ajax方法的核心
可以看到,仍然使用了xhr对象的onreadystatechange()方法,监听请求发送的情况,当然,在发送请求之前,如果想结束该请求,那么可以在settings的beforeSend()回调中返回false.
在对于status状态码进行判断时,多加了一个
(xhr.status == 0 && protocol == 'file:')
这里主要对于本地文件进行了处理.
因为返回的是xhr对象,所以我们可以直接使用abort方法来取消ajax请求,但onreadystatechange()同样会一直执行下去,所以如果不想继续执行函数需要加入自己的判定条件,而对于timeout来说,更是要在回调中拿到事件类型,再决定执行事件.
当然这里也对返回的数据进行了解析,如果不符合相应的dataType,则会报错,触发parsererror全局事件.
常用回调
这里就是常用的回调方法,可以看到,不仅触发了相应的全局事件,而且将请求处理信息返回给了用户.
可以看到,常见的执行顺序,就如同官方文档中的差不多
jsonp
对于zepto中的jsonp方法,首先
可以看到,仍然是通过标签的方式,动态引入,但这种方法缺点也很明显
首先就是无法阻止,因为当载入标签的时候,请求就已经发送出去了,还有无法确定请求是否失败.
script.src = options.url.replace(/?(.+)=?/, '?$1=' + callbackName)
document.head.appendChild(script)
这里把设定的函数名替换到url中去,在新增的script标签里,就能开始请求,而通过对于load,error两个事件的监听,来判断jsonp是否执行成功,以文件是否加载完毕的方式来检测jsonp的执行情况.
至于其他,比如$.get,$.post等,都是使用$.ajax的一种快捷方式,就不加说明了
小结,
本文记录了我在阅读zepto关于ajax的源码时,所产生的思考,当然,不一定都对.仅做记录,不断改进!
zepto的ajax使用,Ajax的实现及使用-zepto相关推荐
- 读Zepto源码之Ajax模块 1
Ajax 模块也是经常会用到的模块,Ajax 模块中包含了 jsonp 的现实,和 XMLHttpRequest 的封装. 读 Zepto 源码系列文章已经放到了github上,欢迎star: rea ...
- 怎么中断一个ajax请求,ajax、fetch、axios如何中断请求?
先来说一说"中断请求"的实际场景,当页面有多个tab页签时,每次切换页签都会去请求数据,频繁的切换就会去请求很多次,比如A页签切换到B页签,A页签请求完全是不必要的,这时候可以在切 ...
- ajax入门实例代码,AJAX、AJAX实例及AJAX源代码
AJAX.AJAX实例及AJAX源代码 作者:佚名 来源:CNZZ 2008-1-4 AJAX介绍 AJAX 关键词: JavaScript脚本和可扩展标记语言(XML) WEB浏览器技术 开放式WE ...
- 六十八、完成Vue项目推荐和周末游组件,并使用Ajax发起ajax请求
@Author:Runsen 2020/10/27. 周二.今天又是奋斗的一天. 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
- $.ajax 发送请求,JavaScript之Ajax-2 Ajax(使用Ajax发送get请求、使用Ajax发送post请求)
一.使用Ajax发送get请求 发送异步请求的步骤 - 获取Ajax对象:获取 XMLHttpRequest对象实例 - 创建请求:调用XMLHTTPRequest对象的open方法 - 设置回调函数 ...
- 一、AJAX学习笔记——原生AJAX (ajax简介、XML简介、ajax优缺点、ajax的使用)
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
- ajax hacking,Ajax Hacking
Ajax Hacking 更新时间:2006年11月06日 00:00:00 作者: 由此Ajax攻击可见一斑,然而这还仅仅是个开始.7月份百度开通了百度空间,虽然没有指明是应用web2.0技术, ...
- ajax=1,ajax专栏1
一.什么是ajax?有什么作用? ajax中文翻译为:异步的js和xml.用于网页向服务器发送请求(可支持同步和异步2种方式),接收服务器响应后的处理数据. 注:同步,网页发送请求后,锁定当前网页(不 ...
- AJAX教程@ajax
文章目录 1.AJAX 1.什么是AJAX 2.AJAX核心对象 - 异步对象(XMLHttpRequest) 1.什么是XMLHttpRequest [简称为 xhr] 2.创建 异步对象 (xhr ...
- 了解ajax,ajax的优化有哪些
-20-01-20 ------------------------------学习打卡-------------------------------------------------------- ...
最新文章
- C和C++安全编码笔记:总结
- 注意!Linux glibc再曝漏洞,可导致Linux软件劫持
- 关于凭证和冲销凭证的RFC
- django和flask用MD5加密密码
- how to get context node reference CN0X from view controller reference
- Python笔记-flask执行后台程序(非web应用)
- android系统存储路径在哪里,Android 手机存储目录
- (SenchaTouch+PhoneGap)开发笔记(2)开发环境搭建二
- https抓包_浅谈HTTPS抓包原理,为什么Charles能够抓取HTTPS报文?
- 详解Spring中的CharacterEncodingFilter--forceEncoding为true在java代码中设置失效--html设置编码无效...
- 温伯格《技术领导之路》——如何弯腰更省力,怎样伸手更合理
- 成功恢复UNIX误删除数据库文件(NODE已被清除)
- navicat 12 for mac 中文破解版使用说明
- 【转发】ext4文件系统
- BitTorrent概述
- Spring之DI依赖注入
- iOS在服务器返回的JSON字符串带火星文乱码的处理
- nodejs中hapi/joi 被弃用
- Hibernate框架基础——cascade属性
- Java实现给图片局部打马赛克(前提是知道坐标的情况下)