跨域JSONP

一、什么是同源策略

同源策略:同源是指域名、协议、端口均相同

跨域:是指从一个域名的网页去请求另一个域名的资源,只要域名、协议、端口有一个不同,就被当作是跨域

JSONP是我们解决跨域最常用的方式

二、JSONP的原理

JSONP是JSON with Padding的简写,是一种跨域的解决方案

JSONP由两部分解组成:回调函数和数据。回调函数是当相应到来的时候,应该在页面中调用的函数,数据就是传回回调函数中的JSON数据

JSONP的原理:我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的,但是在用link标签和script标签引入其他域上的脚本文件是可以的,JSONP就是利用script标签上的src属性来加载不同域上的资源

JSONP重要的一点就是允许用户传递一个函数名作为参数传给服务端,然后服务端返回数据时,会将这个函数参数作为函数名来来包裹住数据,函数名(数据),这样客户端就可以随意定制自己的函数来自动处理返回数据了;例如我们传给服务端的函数名是abc,那么服务器端就会将我们所需要的数据作为abc函数的参数返回来abc(数据),服务端返回的数据是JSON格式的,这也是JSONP封装的思路

三、封装JSONP函数

        function getJSONP(url,callback){
            if (!url) {
                return;
            } else {
            // 声明数组用来随机生成函数名,索引
            var a=[‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,‘f‘,‘g‘,‘h‘,‘i‘,‘j‘],
            r1=Math.floor(Math.random()*10), //Math.floor()取整函数,这样r1,r2,r3就是随机的0-9
            r2=Math.floor(Math.random()*10),
            r3=Math.floor(Math.random()*10),
            name=‘JSONP‘+a[r1]+a[r2]+a[r3];
            cbname=‘getJSONP.‘+name; //随机生成的函数名要作为getJSONP的一个属性,方便后面删除delete getJSONP[name];
            // console.log(cbname);

            if(url.indexOf(‘?‘)===-1){
                url+=‘?jsonp=‘+cbname;
            }else{
                url+=‘&jsonp=‘+cbname;
            }
            // console.log(url);
            // 动态创建script标签,第1步,通过src引入js文件,
            var script=document.createElement("script");
            script.src=url;
            document.getElementsByTagName("head")[0].appendChild(script);
    //第2步,载入js文件后
            // 定义被脚本执行的回调函数,getJSON[name]这里要作为一个变量,所以要用[],而不能用.
            getJSONP[name]=function(data){    //第3步:执行url中指定的函数
                try{  //try里面是可能发生错误的;比如跨域获取没有成功或成功
                    callback&&callback(data);
                }catch(e){  //发生错误了可以捕获到
                    //
                }finally{  //不管有没有发生错误,都要执行的操作
                    //最后删除该函数及script标签,不删除的话产生数据会造成污染
                    delete getJSONP[name];
                    script.parentNode.removeChild(script);
                }
            }
            }
        }
        getJSONP(url,function(data){
            console.log(data); //这里的回调函数传到getSONP函数里面,在getJSONP[name]函数执行,getJSONP[name]函数传回来了跨域的数据data,所以最后将data传出来并打印
});

原文地址:https://www.cnblogs.com/lita07/p/12418718.html

时间: 2024-10-04 19:37:20

跨域JSONP的相关文章

跨域JSONP原理及调用具体示例

上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据. 而JSONP就是通过script节点src调用跨域的请求. 当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客

跨域JSONP 获取内容

跨域JSONP原理及调用具体示例 分类: 小笔记 跨域 浏览器 JSONP CORS 2014-10-12 11:29 3221人阅读 评论(0) 收藏 举报 上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式.  JSONP原理 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img.iframe.script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据. 而JSONP就是通过sc

jquery中的跨域-jsonp格式

js要跨域jsonp格式,原理就是在html中插入一端js引用去调用远程地址: <script type="text/javascript" src="http://xxx.aspx?callback=test"></script> jquery客户端代码如下: $.ajax({ type:'get', url:'http://xxxx.ashx', dataType:'jsonp', jsonpCallback参数表示服务器返回数据的标志

14、跨域 - jsonp

## 同源策略 协议 域名 端口    3个都一致叫同域,有1个不一致叫跨域 ## 为什么浏览器不支持跨域 cookie LocalStorage DOM元素也有同源策略    iframe ajax 也不支持跨域 ## 实现跨域 -  jsonp -  cors -  postMessage -  document.domain    子域和父域 -  window.name -  location.hash -  http-proxy    反向代理 -  nginx -  websocke

js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限,可以理解为本域脚本只能读写本域内的资源,而无法访问其它域的资源.这种安全限制称为同源策略. ( 现代浏览器在安全性和可用性之间选择了一个平衡点.在遵循同源策略的基础上,选择性地为同源策略"开放了后门". 例如img script style等标签,都允许垮域引用资源.) 下表给出了相对 

跨域(jsonp cors)

同源策略它是由NetScape提出的一个著名的安全策略. 浏览器执行js,会检查它属于哪个页面,如果不是同源页面,不会被执行. 由于浏览器的同源策略,只要发送请求url与页面地址有不同的即为跨域.只要协议.域名.端口任何一个不同,就是不同的域. 常见的解决方案有: jsonp 跨域资源共享(CORS) 使用html5的window.postMessage 通过修改document.domain 使用window.name 1.jsonp jsonp 全称是JSON with Padding,是为

跨域问题解决方案(HttpClient安全跨域 &amp; jsonp跨域)

1 错误场景 今天要把项目部署到外网的时候,出现了这样的问题, 我把两个项目放到自己本机的tomcat下, 进行代码调试, 运行 都没有问题的, 一旦把我需要调用接口的项目B放到其他的服务器上, 就会报错, 无法通过Ajax调用springMVC的接口, 这是什么原因呢? 当我使用json ajax post请求传递数据的时候在web端出错:XMLHttpRequest cannot loadhttp://ip:8082/security/auth/outside.do. Origin http

跨域JSONP原理及调用详细演示样例

上篇博客介绍了同源策略和跨域訪问概念,当中提到跨域经常使用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个server下的页面是无法获取到该server以外的数据的,但img.iframe.script等标签是个例外.这些标签能够通过src属性请求到其它server上的数据. 而JSONP就是通过script节点src调用跨域的请求. 当我们通过JSONP模式请求跨域资源时,server返回给client一段javascript代码,这段

jQuery $.ajax跨域-JSONP获取JSON数据(转载)

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该