关于jsonp跨域的 实现
1.实现原理
1.把接口写在 script标签的src 中 这个接口就可以访问(不会存在跨域问题 因为接口在浏览器地址栏是可以访问的 会返回json字符串);
2.直接写不可以 因为正常情况下 scr请求来的是可执行的js代码 此时返回的是json对象 所以程序报错;
3.src后拼接callback函数参数 返回的json对象就会跑到 这个函数的参数中 (原因不明觉厉);
4.然后就可以在这个函数中 操作请求来的 json对象了 完成;
2.代码实现
//如果函数名,全是一个,任何的业务,都是回调这一个了
var callbackName = 'callback_' + Date.now(); //声明唯一的函数名
var myUrl = url + '?callback=' + callbackName; //拼接src的路径 //创建标签
var script = document.createElement('script');
script.src = myUrl; //不会发请求 //挂载全局函数
window[callbackName] = function(data) { //假设callbackName='a',服务器回写: a('数据')
console.log(data);
delete window[callbackName]; //删除window上一堆时间戳的函数 保持性能
}
//插入到body中,触发请求
document.body.appendChild(script);
3.封装成函数
function jsonpFn(url,callback){
var callbackName = 'callback_' + Date.now();
var script = document.createElement('script');
script.src = url + '?callback=' + callbackName;
window[callbackName] = function(data) {
callback();
delete window[callbackName];
document.body.appendChild(script)
} //调用
jsonp("https://api.douban.com/v2/movie/in_theaters",function(res){
//res 为请求来的数据
//根据业务操作res
})
关于jsonp跨域的 实现的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- jsonp跨域+ashx(示例)
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
- 我的jsonp跨域问题
关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...
- jsonP跨域调用
-------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- jsonp跨域问题
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- canvas转img,blob相互转换
摘自:https://www.cnblogs.com/jyuf/p/7251591.html 函数都比较简单,直接看就ok了 /*----------------------------------- ...
- GBK 文件在 sublime 保存时被强制保存为 utf-8 导致中文乱码, 恢复。
原来在 CoverteToUTF8 的 README.zh_CN.md 文件里就有解决方法,如下: * 问:我的文件被保存为 UTF-8,而且变成了乱码,要如何恢复? 答:请打开这个文件,并确认它的编 ...
- 推荐一个网址:在线检查Yam文件语法格式的错误
最近在学习Docker和K8S内容时候,经常会遇到要自己写一些容器部署或者组件部署的yaml文件. 但是苦于没有彻底熟悉yaml,有时候要到kubectl creat -f path 部署命令执行后, ...
- echarts通过ajax动态获取数据的方法
echarts表格的数据一般都需要动态获取,所以总结了一下通过ajax动态获取数据的操作: 插入的方法应该不止一种,我也是接触不久,所以刚学会了一种插入方法: 灵感和经验来自:https://www. ...
- 二·、spring成长之路——委派设计模式和单例设计模式
3.委派设计模式 设计思想:就是多个类去完成一项的工作,其中一个类去分发任务,其他类做具体的任务,而具体表现是这个委派类的工作,具体过程是被委派类来操作的 [ITask.java]定义工作的统一标准 ...
- ElasticSearch优化系列四:ES的heap是如何被瓜分掉的
以下分别解读几个我知道的内存消耗大户: Segment Memory Segment不是file吗?segment memory又是什么?前面提到过,一个segment是一个完备的lucene倒排索引 ...
- centos6.9安装虚拟机kvm
说明 以下所有操作都基于centos6.9 查看系统是否支持虚拟化 结果有vmx|svm才支持虚拟化 egrep '(vmx|svm)' --color=always /proc/cpuinfo 系统 ...
- Python学习 :网络通信要素
网络通信 OSI 模型 - 定义了计算机互联的标准,是设计和描述计算机网络通信的基本框架 - 把网络通信的工作分为7层,分别是物理层.链路层(数据网络层).网络层.传输层.会话层.表示层和应用层 网络 ...
- Linux服务器间文件实时同步的实现
使用场景 现有服务器A和服务器B,如果服务器A的指定目录(例如 /home/paul/rsync/ )中的内容发生变更(增删改和属性变更),实时将这些变更同步到服务器B的目标目录中(例如 /home/ ...
- vue中组件间的传参
1.父传子 父组件准备一个数据,通过自定义属性给子组件赋值,进行传递 在子组件中通过 props 属性来接收参数 <body> <div id="app"> ...