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

背景: 自己的网站简称A要使用B网站提供的json数据。首先想到的是在A网站的javascript代码里通过Ajax异步请求B网站获取json数据,但是浏览器会禁止这种做法,因为A和B是不同域的。

解决办法:浏览器允许调用不同域的javascript代码文件.<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行

A网站

<script type="text/javascript">
    function addScriptTag(src){
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = src;
        document.body.appendChild(script);
    }
    window.onload = function(){
        //调用远程服务
        addScriptTag("http://localhost:20002/MyService.ashx?callback=person");
    }
    //回调函数person
    function person(data) {
        alert(data.name + " is a " + data.sex);
    }
</script>

B网站  http://localhost:20002/MyService.ashx?callback=person  可以返回json数据

jQuery框架也当然支持JSONP,可以使用$.getJSON(url,[data],[callback])方法(详细可以参考http://api.jquery.com/jQuery.getJSON/)。那我们就来修改下程序A的代码,改用jQuery的getJSON方法来实现(下面的例子没用用到向服务传参,所以只写了getJSON(url,[callback])):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.getJSON("http://localhost:20002/MyService.ashx?callback=?",function(data){
alert(data.name + " is a a" + data.sex);
});
</script>

jsonp 解决跨域传输的更多相关文章

  1. AJAX跨域问题解决方法(2)——JSONP解决跨域

    JSONP是什么?JSON全称为JSON with Padding,是JSON的一种补充的使用方式,不是官方协议. 使用JSONP服务器后台要改动吗?JSONP不同于一般的ajax请求返回json对象 ...

  2. JSONP解决跨域问题,什么是JSONP(转)

    原文链接:https://www.cnblogs.com/xinxingyu/p/6075881.html 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的 ...

  3. 详解Jquery和AngularJs,Servlet中jsonp解决跨域问题(转)

    众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...

  4. jsonp解决跨域问题

    日常开发网页中,时常遇到跨域问题,通常解决办法:后端提供的接口支持jsonp格式,前端采用dataType:jsonp. 一:Jquery封装的AJAX,dataType:jsonp格式的方法: $. ...

  5. CORS,jsonp解决跨域问题

    同源和跨域 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上 ...

  6. 非jsonp解决跨域问题

    1.服务器端解决跨域问题:配置filter在filter中设置请求头import java.io.IOException; import javax.servlet.Filter;import jav ...

  7. ajax使用jsonp解决跨域问题

    发现这几篇博客写的不错,转载过来看: js跨域及解决方案   http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html 如何解决aj ...

  8. 深入了解jsonp解决跨域访问

    在这个项目中,我们做的充分利用jsonp这是一个特点跨界,完成简单的单点登录认证和权限控制的统一.道,各有各的优点.各有各的优点,选择什么方式实现全然取决于我们自己或者项目经理的开发经验,对各种框架的 ...

  9. 什么是jsonp?——使用jsonp解决跨域请求问题

    我们在使用ajax请求的时候经常会产生跨域问题,这是由于浏览器的同源策略导致的.所谓同源,即域名.协议.端口均相同,否则不管是静态页面还是动态网页或者web服务都无法通过ajax正常请求.有时候,我们 ...

随机推荐

  1. webpack安装和简单配置

    1.webpack是一个基于node的项目,所以先装好node和npm       参考我的随笔:https://www.cnblogs.com/jtnote/p/6230384.html 2.先创建 ...

  2. Ubuntu 16.04安装各种软件

    Ubuntu 16.04发布了,带来了很多新特性,同样也依然带着很多不习惯的东西,所以装完系统后还要进行一系列的优化. 1.删除libreoffice libreoffice虽然是开源的,但是Java ...

  3. 实用的 集合工具类 和 String工具类

    集合工具类:CollectionUtil method: 1.isNotEmpty() 不为空 2.isEmpty() 为空 举例:map集合         Map<String,String ...

  4. 关于在python manage.py createsuperuser时报django.db.utils.OperationalError: no such table: auth_user的解决办法

    在stackflow上看到解决的办法是需要进行数据路的migrate:https://stackoverflow.com/questions/39071093/django-db-utils-oper ...

  5. MySQL中InnoDB全文检索

    InnoDB存储引擎从1.2.x开始支持全文索引技术,其采用full inverted index的方式.在InnoDB存储引擎中,将(DocumentID,Postition)视为一个ilist.因 ...

  6. 江卓尔与比特币增发,谣言or先知-千氪

    最近,很多圈内人都在讨论比特币是否应该增发,但等等,比特币真的会增发吗?到底是真有增发计划还是某些人别有用心地在散布谣言? 那么消息是从哪里出来的?北京时间 2 月 10 日晚,莱比特矿池创始人江卓尔 ...

  7. vuejs组件通信

    <body> <div id="example"> <father></father> </div> </body ...

  8. Hexo+yilia添加helper-live2d插件宠物动画,很好玩的哦~~

    个人主页:https://www.yuehan.online 现在博客:www.wangyurui.top 安装模块: 博客根目录选择cmd命令窗口或者git bash 输入以下代码,安装插件 操作: ...

  9. Java基础—String总结

    特点 String不属于8种基本数据类型,String是一个对象. 因为对象的默认值是null,所以String的默认值也是null:但它又是一种特殊的对象,有其它对象没有的一些特性. String实 ...

  10. spring RMI的使用

    Spring整合RMI的原理 客户端的核心是RmiProxyFactoryBean,包含serviceURL属性和serviceInterface属性. 通过JRMP访问服务.JRMP JRMP:ja ...