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. Vue.js刷新当前页面

    Vue.js的路由跳转很强大,类似ajax的局部刷新,路由跳转时候页面是不刷新的,刷新当前页面的功能不建议用,但是有的时候确实需要刷新当前页面来实现某些需求,这个时候,我们有三 种方法可以实现. 第一 ...

  2. 024-Spring Boot 应用的打包和部署

    一.概述 二.手工打包[不推荐] 打包命令:maven clean package 打包并导出依赖:maven clean package dependency:copy-dependencies 1 ...

  3. corethink功能模块探索开发(一)根据已有模块推测目录结构

    corethink是opencmf的一个开源版本,如果自己要进行二次开发,开发模块等,需要在官方开一个中级会员(50大洋吧),官网的一个“一键生成demo”就能给你最基础的目录结构,从而可以在此基础上 ...

  4. 深度学习3--caffe的安装(only CPU)

    1. 本来按照视频走的,但是在cmake的时候报错,然后参考了这篇文章,稀里糊涂的就好了,总结就是把“视频/本文”说的依赖都安装上,就可以了,先安装opencv,再安装caffe第三方依赖 在安装ca ...

  5. python之路 模块,序列化,迭代器,生成器

    一.模块 1.模块简介 模块是一个包含所有你定义的函数和变量的文件,其后缀名是.py.模块可以被别的程序引入,以使用该模块中的函数等功能.这也是使用python标准库的方法. 类似于函数式编程和面向过 ...

  6. Vimium~让您的Chrome起飞

    工欲善其事,必先利其器!撸起Vimium,我的Chrome就这么起飞了. 学起(了解几个快捷键即可)And撸起Vimium,想黑客一般在Chrome上飞起.Vimium常用快捷键(注:区分大小写)j, ...

  7. AJAX实现弹窗显示详情,全选和批量删除

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  8. iOS 11 Xcode9开发 新特性学习 (警告篇)

    最新版本SDK优化了开发体验,编译过程会提供更多提示警告,建议你修改.这些功能也可以自主选择用或者不用,当然,苹果喜欢你用他推荐的东西... 1 . @avalibale 语法,同步判断当前iOS系统 ...

  9. 【leetcode刷题笔记】Median of Two Sorted Arrays

    There are two sorted arrays A and B of size m and n respectively. Find the median of the two sorted ...

  10. 快乐学习 Ionic Framework+PhoneGap 手册1-5 {IO开关}

    当然,即使努力了也没做成,至少你也有收获,因为你知道自己以后可以避开这个坑. 这是一个"IO"开关,请看效果图和代码,下一节,说明,数据交换 Index HTML Code < ...