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的实现的更多相关文章

  1. jsonp和事件发布监听

    模拟jsonp var id = 0; function JSONP(url,param,cb){ var callbackName = "json_" + id++; var a ...

  2. python&JSONP(初级篇)

    JSONP产生背景 1.跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 2.浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 3.如果协议,端口和主机对 ...

  3. 前端跨域(二):JSONP

    上一篇文章 前端跨域(一):CORS 实现了跨域的一种解决方案,IE8 和其他浏览器分别通过 XDomainRequest 和 XHR 对象原生支持 CORS.这次我将补一补 Web 服务中也非常流行 ...

  4. 折腾nock给jsonp进行单元测试

    概述 前几天学习用Jest和nock.js对异步api进行单元测试.在项目中,我用到了jsonp,自然想到对jsonp进行单元测试. 过程很折腾,结果很有趣. jsonp.js 首先axios或者fe ...

  5. 简单的jsonp实现跨域原理

    什么原因使jsonp诞生?  传说,浏览器有一个很重要的安全限制,叫做"同源策略".同源是指,域名,协议,端口相同.举个例子,用一个浏览器分别打开了百度和谷歌页面,百度页面在执行脚 ...

  6. JSONP 跨域问题

    JSONP跨域请求   什么是跨域: 1.域名不同 2.域名相同端口不同 js出于对安全考虑不支持跨域请求.我们可以使用JSONP解决跨域问题. 一.JSONP是什么 JSONP(JSON with ...

  7. jsonp模拟获取百度搜索相关词汇

    随便写了个jsonp模拟百度搜索相关词汇的小demo,帮助新手理解jsonp的用法. <!DOCTYPE html><html lang="en">< ...

  8. JavaScript:原生模拟$.ajax以及jsonp

    现实项目中,常常会用到请求,但是在考虑低版本的浏览器时,promise相关的axios,fetch这类第三方库的支持率就不那么好了,再考虑到最大的一个问题,跨域,更是让人头痛,虽然也有fetch-js ...

  9. jsonp 原理 并模拟实现一个简单的jsonp

    jsonp产生的背景 1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行. 2.We ...

随机推荐

  1. appzapper注册码

    Appzapper for mac是MAC OS上的一款软件,可以非常方便的卸载自己不喜欢的软件,非常的快速便捷,卸载的时候不会有残留. 下载地址:http://www.pc6.com/mac/114 ...

  2. bzoj3631树链剖分

    虽然是水题1A的感觉太爽了O(∩_∩)O~ 题意相当于n-1次树上路径上每个点权值+1,最后问每个点的权值 本来想写线段树,写好了change打算框架打完了再来补,结果打完发现只是区间加和单点查 前缀 ...

  3. <input>和<textarea>

    作为一个刚刚涉足PHP开发的菜鸟,第一次使用博客.在这里分享一些经验给和需要的朋友,互相探讨.共同学习,希望对你有所帮助. 废话不多说,下面进入正题. 应该有朋友和我一样,需要用到文本框,要求它会自动 ...

  4. axis2开发webservice程序

    一.环境 eclipse + jdk 6.0 + win7 64位 +tomcat7.0 二.创建服务端程序 1.新建web项目,webserviceTest 2.下载axis2,将lib目录下的ja ...

  5. QComboBox的activated与currentIndexChanged的区别

    void activated ( int index ) void activated ( const QString & text ) 信号activated是只要单击选择框即使所选内容选择 ...

  6. 干掉命令行窗口下MySql乱码

    晚上重温dos窗口操作mysql的时候,遇到了一个巨蛋疼的问题------>中文验证码  -->_-->,所以找了找资料弄懂了怎么解决乱码问题,,小记一下. 新建一个表 create ...

  7. 【LabVIEW技巧】路径依赖解除方法

    前言 LabVIEW程序开发,让我们的程序设计变的简单容易,但是设计过程中也不乏大量的重复性工作,其中最让人头痛的莫过于依赖冲突问题. 事实上,只要你对文件进行了修改或者移动,必不可少的依赖冲突就会产 ...

  8. toroiseSVN 无法连接服务器,提示unable connect to ……url 参数错误

    之前使用的好好的,有天突然提示无法连接repository url,能ping通服务器,就是一直报错,找了很多方法,如: 1.删除缓存及缓存文件 2.删除软件并重新安装 3.关闭windows防火墙 ...

  9. TP5与TP3.X对比

    首先声明本章节并非是指导升级旧的项目到5.0,而是为了使用3.X版本的开发者更快的熟悉并上手这个全新的版本.同时也强烈建议开发者抛弃之前旧的思维模式,因为5.0是一个全新的颠覆重构版本. 需要摒弃的3 ...

  10. C/C++_date&time

    在标准C/C++中与日期和时间相关的数据结构 注意:年份是实际年份与  1900  的差值 我们可通过tm结构来获得日期和时间,tm结构在time.h中的定义如下: #ifndef _TM_DEFIN ...