模拟jsonp的实现
function prescript(s) {
if (s.cache === undefined) {
s.cache = false;
}
if (s.crossDomain) {
s.type = "GET";
}
}
function prejsonp(s, originalSettings, jqXHR) {
// 给回调函数命名
var callbackName = s.jsonpCallback
s.url += (/(?:)/.test(s.url) ? "&" : "?") + s.jsonp + "=" + callbackName;
// 脚本执行后使用数据转换器来检索json
// 提供给代码获取服务器的是据
s.getData = function() {
if (!responseContainer) {
jQuery.error(callbackName + " was not called");
}
return responseContainer[0];
};
//修改处理机制
s.dataTypes[0] = "json";
// 创建一个全局函数
overwritten = window[callbackName];
//用来收集服务器给的数据
window[callbackName] = function() {
responseContainer = arguments;
};
return "script";
}
/**
* jsonp的预先处理
*/
function inspectPrefiltersOrTransportsA(options, originalOptions, jqXHR) {
//预处理jsonp
var dataTypeOrTransport = prejsonp(options, originalOptions, jqXHR)
//扩充dataTypes
options.dataTypes.unshift(dataTypeOrTransport);
//预处理script类型
prescript(options)
}
/**
* 分发器
* @return {[type]} [description]
*/
function inspectPrefiltersOrTransportsB(s, originalOptions, jqXHR) {
return {
send: function(_, complete) {
var script = jQuery("<script>").prop({
async: true,
charset: s.scriptCharset,
src: s.url
}).on(
"load error",
callback = function(evt) {
script.remove();
callback = null;
if (evt) {
complete()
}
}
);
//<script async="" src="http://192.168.1.113:8080/github/jQuery/jsonp.php
document.head.appendChild(script[0]);
}
}
}
/**
* 模拟ajax的 jsonp请求
* @param {[type]} options [description]
* @return {[type]} [description]
*/
function createAjax(options) {
if (typeof url === "object") {
options = url;
url = undefined;
}
options = options || {};
/**
* 参数
* jQuery.ajaxSetup 是默认参数
* @type {[type]}
*/
var s = jQuery.ajaxSetup({}, options);
// Deferreds
// 异步机制
var deferred = jQuery.Deferred();
var completeDeferred = jQuery.Callbacks("once memory");
/**
* 实际返回的ajax对象
* @type {Object}
*/
var jqXHR = {}
// 把jqXHR对象转化promise对象,幷加入complete、success、error方法
deferred.promise(jqXHR).complete = completeDeferred.add;
//别名
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
s.dataTypes = jQuery.trim(s.dataType || "*").toLowerCase().match(/(?:)/) || [""];
//预处理
inspectPrefiltersOrTransportsA(s, options, jqXHR);
for (i in {
success: 1,
error: 1,
complete: 1
}) {
jqXHR[i](s[i]);
}
/**
* 分发器
*/
transport = inspectPrefiltersOrTransportsB(s, options, jqXHR);
function done(status, nativeStatusText, responses, headers) {
console.log(s,s.getData())
}
//发送请求
transport.send(s, done);
return jqXHR;
}
function show(data){
$('body').append('<li>'+ data +'</li>');
}
/**
* 数据回调接收
* @return {[type]} [description]
*/
function flightHandler(){
}
$("#test").click(function(){
//执行一个异步的HTTP(Ajax)的请求。
var ajax = createAjax({
url: 'http://192.168.1.113:8080/github/jQuery/jsonp.php',
data: {
'action': 'aaron'
}, // 预传参的数组
dataType: 'jsonp', // 数据类型
jsonp: 'callback', // 指定回调函数名,与服务器端接收的一致,并回传回来
jsonpCallback:flightHandler,
success: function() {
show('局部事件success')
}
})
})
模拟jsonp的实现的更多相关文章
- jsonp和事件发布监听
模拟jsonp var id = 0; function JSONP(url,param,cb){ var callbackName = "json_" + id++; var a ...
- python&JSONP(初级篇)
JSONP产生背景 1.跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 2.浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 3.如果协议,端口和主机对 ...
- 前端跨域(二):JSONP
上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...
- 折腾nock给jsonp进行单元测试
概述 前几天学习用Jest和nock.js对异步api进行单元测试.在项目中,我用到了jsonp,自然想到对jsonp进行单元测试. 过程很折腾,结果很有趣. jsonp.js 首先axios或者fe ...
- 简单的jsonp实现跨域原理
什么原因使jsonp诞生? 传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...
- JSONP 跨域问题
JSONP跨域请求 什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with ...
- jsonp模拟获取百度搜索相关词汇
随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...
- JavaScript:原生模拟$.ajax以及jsonp
现实项目中,常常会用到请求,但是在考虑低版本的浏览器时,promise相关的axios,fetch这类第三方库的支持率就不那么好了,再考虑到最大的一个问题,跨域,更是让人头痛,虽然也有fetch-js ...
- jsonp 原理 并模拟实现一个简单的jsonp
jsonp产生的背景 1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行. 2.We ...
随机推荐
- make工作时的执行步骤
GNU的make工作时的执行步骤 (1)读入所有的Makefile (2)读入被include的其它Makefile (3)初始化文件中的变量 (4)推导隐晦规则,并分析所有的规则 (5)为所有的目标 ...
- oracle 和c3p0 数据库的Time_Wait 过多问题的一个解决方案。
项目是B/S模式,放在linux服务器上,tomcat和oracle11g在一台服务器上,tomcat读取数据库采用C3P0连接池,一直比较稳定,所以也没有去管.后来把tomcat放在一台win200 ...
- ASP.NET中获取Repeater模板列中LinkButton按钮事件中获取ID等
前台页面中: <asp:Repeater ID="repComment" runat="server"> <ItemTe ...
- bug: 在缓存行高时,总是记录错误.
一,现象: 1.在 cell 中添加了一个 label, 并对 label 设置了 attributeText, 结果滑动的过程中,cell 的高度总是不对,多次出现下一个 cell 覆盖上一个 ce ...
- VS2012中丢失ArcGIS模板的解决方法
VS2012中丢失ArcGIS模板的解决方法 由于ArcGIS10.0(for .NET)默认是用VS2010作为开发工具的,所以在先安装VS2012后装ArcGIS10.0 桌面版及ArcObjec ...
- iOS Block理解
以前看到Block觉得也没什么,不就是类似函数的东西,这东西在C#里就是委托,在Java里就是块,有什么稀奇的.但看到一点进阶的内容后,发现这个东西确实有用. 所以做下总结. 一.块的基本用法 块的语 ...
- 配置Spark on YARN集群内存
参考原文:http://blog.javachen.com/2015/06/09/memory-in-spark-on-yarn.html?utm_source=tuicool 运行文件有几个G大,默 ...
- TCP三次握手四次挥手
看到一篇总结很好的TCP三次握手,学习一下,原文链接. 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,S ...
- PHP uniqid 高并发生成不重复唯一ID
http://www.51-n.com/t-4264-1-1.html PHP uniqid()函数可用于生成不重复的唯一标识符,该函数基于微秒级当前时间戳.在高并发或者间隔时长极短(如循环代码)的情 ...
- tar 命令
tar -cf 打包的文件名 打包的文件 ------tar -cf db.all test.txt (-c 表示建立新的包,-f通常是必选项) tar -tf 打包 ...