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

  1. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  2. 借助node实战JSONP跨域

    一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...

  3. jsonp跨域+ashx(示例)

    前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...

  4. Jsonp跨域访问

    很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...

  5. jsonp 跨域请求

    背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...

  6. 我的jsonp跨域问题

    关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...

  7. jsonP跨域调用

    -------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...

  8. JSONP跨域的原理解析( 一种脚本注入行为)

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...

  9. jsonp跨域问题

    JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...

  10. JSONP跨域的原理解析

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...

随机推荐

  1. iOS之在本地搭建IPv6环境测试你的app

    IPv6的简介 IPv4 和 IPv6的区别就是 IP 地址前者是 .(dot)分割,后者是以 :(冒号)分割的(更多详细信息自行搜索). PS:在使用 IPv6 的热点时候,记得手机开 飞行模式 哦 ...

  2. #leetcode刷题之路30-串联所有单词的子串

    给定一个字符串 s 和一些长度相同的单词 words.找出 s 中恰好可以由 words 中所有单词串联形成的子串的起始位置.注意子串要与 words 中的单词完全匹配,中间不能有其他字符,但不需要考 ...

  3. activemq的高级特性:消息存储持久化

    activemq的高级特性之消息存储持久化 有基于文件的,数据库的,内存的.默认的是基于文件的,在安装目录/data/kahadb.在conf/activemq.xml文件中. <persist ...

  4. es6 入坑笔记(五)

    Symbol 主要用做key或私有变量,Symbol是唯一的不可重复的,也是一个单独的数据类型 定义形式: let demo=Symbol("aaaa"); 1.Symbol不能使 ...

  5. ps基本认识

    近来中意ui方面学习,从视频中总结了些许notses,希望能够帮到共同喜欢(❤ ω ❤)的友友 ·基础了解 位图:由像素组成的图片,把位图无限放大以后看到很多小方格,一个方格代表一个像素 矢量图:放大 ...

  6. 用启动器py成功解决python2和python3同时共存且同时运行的问题

    缘起:之前一直用PHP来开发微信公众号后台,最近正在学习python,而且看到微信官方也把公众号后台的示例代码换成了python的,但是示例中用的web.py需要用到python2,而我自己的电脑上装 ...

  7. PHP中实现中文字串截取无乱码的方法

    [本文转自独占神林的日志:链接:http://yuninglovekefan.blog.sohu.com/176021361.html] 在PHP中,substr()函数截取带有中文字符串的话,可能会 ...

  8. 大数据时代数据库-云HBase架构&生态&实践

    业务的挑战 存储量量/并发计算增大 现如今大量的中小型公司并没有大规模的数据,如果一家公司的数据量超过100T,且能通过数据产生新的价值,基本可以说是大数据公司了 .起初,一个创业公司的基本思路就是首 ...

  9. TCP/IP协议的数据传输过程详解——IP与以太网的包收发操作

    MTU:一个网络包的最大长度,以太网中一般是1500字节:(含有头部长度,包括IP头部,TCP头部,不包括MAC头部) MSS:除去头部后,一个网络包所能容纳的TCP的数据的最大长度 下图为TCP/I ...

  10. PTA基础编程题目集6-3简单求和 (函数题)

    6-3 简单求和 (10 分) 本题要求实现一个函数,求给定的N个整数的和. 函数接口定义: int Sum(int List[],int N) 其中给定整数存放在数组List[]中,正整数N是数组元 ...