JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,老式浏览器全部支持,服务器不用做任何改造【使用jsonp的时候jsonp: "callback",callbackde的名字要和 服务器设置保持一致】。

它的基本思想是,网页通过添加一个<script>元素,向服务器请求JSON数据,这种做法不受同源政策限制;服务器收到请求后,将数据放在一个指定名字的回调函数里传回来。

首先,网页动态插入<script>元素,由它向跨源网址发出请求。

1.js原生写法(来自阮大师的博客浏览器同源政策及其规避 http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

 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://example.com/ip?callback=foo');
} function foo(data) {
console.log('Your public IP address is: ' + data.ip);
};

2.jquery写法 (来源http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

 $("#getJsonpByHand").click(function () {
CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})
function jsonpcallback(data) {
console.log(data)
}

3.ajax (来源http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

 $("#getJsonpByJquery").click(function () {
$.ajax({
url: 'http://localhost:2701/home/somejsonp',
dataType: "jsonp",
jsonp: "callback",
success: function (data) {
console.log(data)
}
})
})

关于 josnp ,解决跨域问题的更多相关文章

  1. AngularJs最简单解决跨域问题案例

    AngularJs最简单解决跨域问题案例 2016-05-20 09:18 82人阅读 评论(0) 收藏 举报  分类: javascript(1)  作者:白狼 出处:http://www.mank ...

  2. 后台访问 JS解决跨域问题

    今天看了看以前做的一个小项目(其实就是一个页面),分享一下当时解决跨域问题的: 背景:公司把项目部署在多台服务器上,防止一台服务器崩溃后,其他的可以继续访问,对应本公司来说,某台服务器出问题后,技术人 ...

  3. PhoneGap开发跨平台移动APP - 解决跨域资源共享

    解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...

  4. 使用nginx解决跨域问题(flask为例)

    背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...

  5. 使用Access-Control-Allow-Origin解决跨域

    什么是跨域 当两个域具有相同的协议(如http), 相同的端口(如80),相同的host(如www.google.com),那么我们就可以认为它们是相同的域(协议,域名,端口都必须相同). 跨域就指着 ...

  6. Ajax 是什么?Ajax 的交互模型?同步和异步的区别?如何解决跨域问题?以及 HTTP状态码

    一.Ajax 是什么: 1. 通过异步模式,提升了用户体验 2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用 3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作 ...

  7. web api 解决跨域的问题

    web api 总是会遇到跨域的问题,今天我找到了如下方法解决跨域: 1: a:在配置文件中的 加上如下代码 <system.webServer> <httpProtocol> ...

  8. ajax 、ajax的交互模型、如何解决跨域问题

    1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...

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

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

  10. [ionic开源项目教程] - 第14讲 ionic解决跨域问题

    [ionic开源项目教程] 第14讲 使用jsonp解决跨域问题 相信很多朋友在开发中都会遇到以下这个问题. No 'Access-Control-Allow-Origin' header is pr ...

随机推荐

  1. 使用和不使用navigationbar分别处理显示和返回页面

    不使用navigationbar的情况下 AnnounceViewController *pushView = [[AnnounceViewController alloc]init];pushVie ...

  2. mac安装.net core

    https://www.microsoft.com/net/core#macos Install for macOS 10.11 or higher (64 bit) 1 Install pre-re ...

  3. [反汇编练习] 160个CrackMe之036

    [反汇编练习] 160个CrackMe之036. 本系列文章的目的是从一个没有任何经验的新手的角度(其实就是我自己),一步步尝试将160个CrackMe全部破解,如果可以,通过任何方式写出一个类似于注 ...

  4. 2.nginx整合PHP

    /usr/local/src/下都有什么:.tar.gz文件和解压之后的源码 /usr/local/下都有什么:源码编译之后的东西 安装mysql客户端 安装mysql服务端 启动mysql服务端 s ...

  5. .net 4.0 网站发布(转)

    http://www.cnblogs.com/daomul/archive/2013/05/23/3095232.html 1. 进入解决方案的web项目下,右击项目选择 "发布(B)&qu ...

  6. linux的su和sudo(转载)

    来源:http://www.jb51.net/LINUXjishu/12713.html 一. 使用 su 命令临时切换用户身份 1.su 的适用条件和威力 su命令就是切换用户的工具,怎么理解呢?比 ...

  7. “懒”也要有境地---大部分程序猿都在的地方,再不来就out了。

    别人在玩.你也在玩,为什么别人天天进步,职业晋升. 而你则原地踏步. 事实上你和他的距离仅仅有一个微信公众号的距离. 假设你说.我根本没有时间学习,不想看书,我仅仅想睡觉.我想你要接着往下看,由于.谁 ...

  8. 九度OJ 1098:字母统计 (计数)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:3720 解决:1809 题目描述: 输入一行字符串,计算其中A-Z大写字母出现的次数 输入: 案例可能有多组,每个案例输入为一行字符串. 输 ...

  9. esri和ArcGIS

    1 esri esri是environment system research institute,环境系统研究所.总部在美国加州.它是世界上最大的GIS技术提供商. 主要产品有ArcGIS.ArcV ...

  10. 无感知的用同步的代码编写方式达到异步IO的效果和性能,避免了传统异步回调所带来的离散的代码逻辑和陷入多层回调中导致代码无法维护

    golang/goroutine 和 swoole/coroutine 协程性能测试对比 - Go语言中文网 - Golang中文社区 https://studygolang.com/articles ...