jsonp封装方法二
前言: 看到玉伯的聊聊jsonp的p,引发了另一种loader方式来跨域的方法,他把它叫做JSONM协议,原理和seajs相似,都是动态加载script,加载完成后执行callback,
同时还不用考虑回调函数名,都指定为define,服务端可以静态存储例如(define({name:"alice",age:21}))。如果数据是静态的,还可以放在cdn上。原文issue连接
以及一篇原理分析,写得很赞 连接。
所以我就斗胆按照自己的理解,自己写了一个简易的用loader的思想来完成jsonp。
原理概述:动态加载script,利用onload事件执行回调函数,在ie9/10中 用onreadystatechange。可是在ie6-8中不支持,在seajs里看到了绝招,利用readyState为interactive判断正在执行的脚本,脚本的src和传入时的callback建立唯一连接,进行查找,执行回调函数。
那么怎么获取json数据呢? 我用JSONPData这个里存储获取到的_jsondata(私有变量,提供接口访问)。在非ie中就简单了,直接callback.call(this,JSONPData.getJsonData()).
我实现的这个有什么限制呢?
在ie6-8中,因为用的是src和callback唯一对应,假若几个请求的src相同,callback只能得到第一次设置的函数,解决方法,如果回调函数不同,就用不同的src请求喽,加个无意义的参数就ok啦。
var currentAddingScript;
var JSONP = (function() {
var _head = document.getElementsByTagName("head")[0];
var _baseElement = document.getElementsByTagName("base")[0];
var _helper = {
encodeURL: function(url) {
var param = url.split("?")[1];
var url = url.split("?")[0];
var params = param.split("&");
var parLen = params.length; for (var i = 0; i < parLen; i++) {
var paItem = params[i].split("=");
url += url.indexOf("?") >= 0 ? "&" : "?";
url += encodeURIComponent(paItem[0]) + "=" + encodeURIComponent(paItem[1]);
}
return url;
},
addLoad: function(node, callback) {
node.onload = node.readystatechange = function() {
// Ensure only run once in IE9
node.onload = node.readystatechange = null;
if (!this.readyState || node.readyState == "complete" || node.readyState == "loaded") {
callback.call(this, JSONPData.getJsonData());
this.parentNode.removeChild(this);
}
}
}
};
return {
start: function(url, func) {
var encUrl = url;//存储的是未经过编码的,以便与对应的callback创建关联
//创建script结点
var script = document.createElement("script");
if (encUrl.indexOf("?") >= 0) {
url = encUrl + "&callback=JSONP.callback";
script.src = _helper.encodeURL(url);
} else {
url = encUrl + "?callback=JSONP.callback";
script.src = _helper.encodeURL(url);
}
script.charset = "UTF-8"; //绑定加载完成事件
_helper.addLoad(script, func); // For some cache cases in IE 6-8, the script executes IMMEDIATELY after
// the end of the insert execution, so use `currentlyAddingScript` to
// hold current node,
currentAddingScript = script;
_baseElement ? _head.insertBefore(script, _baseElement) : _head.appendChild(script); //for ie6-9 关联script 和callback
var data = {};
data[url] = func;
JSONPData.save(data);
},
getInteractiveScript: function() {
//ie6-9 获取正在执行的脚本 if (currentAddingScript) {
return currentAddingScript;
}
var scripts = document.getElementsByTagName('script');
for (var i = 0; i < scripts.length; i++) {
var script = scripts[i];
if (script.readyState === 'interactive') {
return script;
}
}
return null;
},
callback: function(data) { // if ie6-9
if (document.attachEvent) {
var script = JSONP.getInteractiveScript();
var callback = null;
if (script) {
callback = JSONPData.findCallback(script.src);
if (typeof callback == "function") {
callback(data);
}
} else {
console.log("fail");
}
}
// 设置返回的json数据,供调用
JSONPData.setJsonData(data);
}
}
})(); var JSONPData = (function() {
var _dataStorage = [];
var _jsonData; // 每个数据项是data {url: [callbackFunc]}
return {
save: function(data) {
//检查data的url若相同,则回调函数不变
for (var i in data) {
if (!_dataStorage.hasOwnProperty(i)) {
_dataStorage.push(data);
}
}
},
findCallback: function(url) {
var len = _dataStorage.length;
for (var i = 0; i < len; i++) {
if (_dataStorage[i][url]) {
return _dataStorage[i][url];
}
}
return null;
},
setJsonData: function(data) {
_jsonData = data ? data : null;
},
getJsonData: function() {
return _jsonData;
}
}
})();
update分割线
==========================================================================================
我用Ie的仿真模式,测试ie7和ie8时,发现第一次点击按钮触发请求不能返回数据,请先看重要的html部分
<button id="button">发送三个jsonp请求</button>
绑定button点击事件
var button = document.getElementById("button");
button.onclick = function() {
JSONP.start("http://localhost:8088/data.php", function(data) {
console.log(data);
console.log("yes1");
});
JSONP.start("http://localhost:8088/data.php?cc=ff", function(data) {
console.log(data);
console.log("yes2");
});
JSONP.start("http://localhost:8088/data.php?ur=f", function(data) {
console.log(data);
console.log("yes3");
});
}
在ie7,8下我点一下后不出现结果,
通过断点调试,代码问题出在了这段上,我先把创建的script结点添加到dom结点中,之后再存储url和callback,导致在立即执行函数时,数据还未存储,无法找到关联的callback,所以没有成功调用,解决方案是,存储数据放在插入节点之前,就完美啦!
再看运行结果:
新代码:就只贴了需要做小改动得JSONP返回的start函数代码:
start: function(url, func) {
var encUrl = url; //创建script结点
var script = document.createElement("script");
if (encUrl.indexOf("?") >= 0) {
url = encUrl + "&callback=JSONP.callback";
script.src = _helper.encodeURL(url);
} else {
url = encUrl + "?callback=JSONP.callback";
script.src = _helper.encodeURL(url);
}
script.charset = "UTF-8"; //for ie6-9 关联script 和callback
var data = {};
data[url] = func;
JSONPData.save(data); //绑定加载完成事件
_helper.addLoad(script, func); // For some cache cases in IE 6-8, the script executes IMMEDIATELY after
// the end of the insert execution, so use `currentlyAddingScript` to
// hold current node,
currentAddingScript = script;
_baseElement ? _head.insertBefore(script, _baseElement) : _head.appendChild(script);
},
jsonp封装方法二的更多相关文章
- getElementsByClassName 方法兼容性封装方法二
var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...
- Selenium应用代码(常见封装的方法二)
滚动窗口: //将滚动条滚到适合的位置 , 方法一 public static void setScroll(WebDriver driver,int height){ try { // String ...
- MP实战系列(十二)之封装方法详解(续二)
继续MP实战系列(十一)之封装方法详解(续一)这篇文章之后. 此次要讲的是关于查询. 查询是用的比较多的,查询很重要,好的查询,加上索引如鱼得水,不好的查询加再多索引也是无济于事. 1.selectB ...
- iOS开发——开发必备OC篇&UITableView设置界面完整封装(二)
UITableView设置界面完整封装(二) 简单MVC实现UITableView设置界面之Cell右边类型设置 首先来看看第一种方法证明使用,结合两种方法之后根据个人的爱好去选择就可以了, 一:使用 ...
- SSH框架的多表查询(方法二)增删查改
必须声明本文章==>http://www.cnblogs.com/zhu520/p/7773133.html 一:在前一个方法(http://www.cnblogs.com/zhu520/p ...
- MP实战系列(十一)之封装方法详解(续一)
之前写的封装方法详解,比较简要. 今天我主要讲增加和删除及其修改.查的话得单独再详讲. 增删改查,无论是Java或者C#等等,凡是对数据库操作的都离不开这四个. 一.增加方法讲解 MyBatis Pl ...
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类
.Net基础——程序集与CIL 1. 程序集和CIL: 程序集是由.NET语言的编译器接受源代码文件产生的输出文件,通常分为 exe和dll两类,其中exe包含Main入口方法可以双击执行,dll ...
- SSH框架的多表查询(方法二)
必须声明本文章==>http://www.cnblogs.com/zhu520/p/7773133.html 一:在前一个方法(http://www.cnblogs.com/zhu520/p ...
- 八、MD5加密并封装,并调用封装方法
一.MD5加密 封装Md5 public class Md5 { //十六进制下数字到字符的映射数组 private static final char hexDigits[] = { '0', '1 ...
随机推荐
- opencv之图像拼接
参考博客http://blog.csdn.net/u011630458/article/details/44175965 博主:羽凌寒 之后再进行系统学习
- Spring Boot—17MongoDB
在MongoDB中插入如下的数据 db.baike.insert( { _id: 'freemark', desc: '新一代模板语言', tag: [ 'IT', '模板语言' ], comment ...
- CentOS7系列--2.1CentOS7中安装配置NTP服务
CentOS7安装配置NTP服务 NTP服务是时间同步服务 1. 安装NTPd [root@centos7 ~]# yum install -y ntp [jack@centos7 ~]$ vi /e ...
- 模拟时钟(AnalogClock)
模拟时钟(AnalogClock) 显示一个带时钟和分针的表面 会随着时间的推移变化 常用属性: android:dial 可以为表面提供一个自定义的图片 下面我们直接看代码: 1.Activity ...
- zookeeper应用 - leader选举 锁
模拟leader选举: 1.zookeeper服务器上有一个/leader节点 2.在/leader节点下创建短暂顺序节点/leader/lock-xxxxxxx 3.获取/leader的所有子节点并 ...
- 在虚拟机中安装ubuntu16.04后不能全屏显示
一.在终端输入:xrandr 二.输入:xrandr -s 1920x1440 参考网站:https://blog.csdn.net/qq_33202928/article/details/75021 ...
- mongodb存储引擎
存储引擎(Storage Engine)是MongoDB的核心组件,负责管理数据如何存储在硬盘(Disk)和内存(Memory)上.从MongoDB 3.2 版本开始,MongoDB 支持多数据存储引 ...
- 关于jquery的serialize方法转换空格为+号的解决方法
jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能:但是实际使用中去发现了如下问题:例如:< textarea name="content&q ...
- 定制选择范围的按钮RangeButton
定制选择范围的按钮RangeButton 效果: 源码: RangeButton.h 与 RangeButton.m // // RangeButton.h // PulsingView // // ...
- Linux wc命令详解
wc常见命令参数 wc -l : 统计行 wc -c: 统计字节数 wc -m:统计字符数,不能与-c同时使用 wc -w:统计字数 wc -L:打印最长长度 注意: wc 可以直接后面跟文件使用,但 ...