ajax实现JSONP跨域
摘要: 简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果
什么是跨域
简单的说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果
具体策略限制情况可看下表:
URL | 说明 | 允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://127.0.0.100/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名下不同二级域名 | 不允许 |
http://www.a.com/a.js http://www.b.com/b.js |
不同域名 | 不允许 |
什么是JSONP?
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取
JSONP的应用
JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)
JSONP跨域的原理
同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码
举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:
{"id": 123, "name" : 张三, "age": 17}
那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下:
foo({"id": 123, "name" : 张三, "age": 17});
当然,如果服务端考虑得更加充分,返回的数据可能如下:
try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}
这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo
function executeJsonp(url){var eleScript= document.createElement("script");eleScript.type = "text/javascript";eleScript.src = url;document.getElementsByTagName("head")[0].appendChild(eleScript);
}
function foo(data){for(var p in data){console.log(data[p]);}
}
var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)
在jQuery中如何通过JSONP来跨域获取数据
第一种方法是在ajax函数中设置dataType为'jsonp':
$.ajax({ type:"get", data:"random="+Math.random(), url:url, dataType:"jsonp", jsonp:"callback", success:function(data){ //处理data数据$.each(data, function(key, val){ $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); }); }
});
第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可:
jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ q: "Arsenal"
},function(tweets){ console.info("Twitter returned: ",tweets);
});
也可以简单地使用getScript方法:
//此时也可以在函数外定义foo方法
function foo(data){}//处理data数据
$.getScript('http://www.a.com/user?id=123&callback=foo');
jquery中的ajax方法怎样通过JSONP进行远程调用
$.ajax的参数
type:请求方式 GET/POST
原文链接
ajax实现JSONP跨域相关推荐
- 原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
- ajax之jsonp跨域请求
前端ajax请求代码 后台php处理代码
- jsonp+ajax实现浏览器跨域通信
2019独角兽企业重金招聘Python工程师标准>>> Ajax/XDomainRequest 网络跨域访问控制 jsonp是一种技术手段而不是一种协议,也不是json数据. < ...
- 原生JS封装Ajax插件(同域jsonp跨域)
2019独角兽企业重金招聘Python工程师标准>>> 抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax ...
- jsonp的原理·jsonp是不是ajax中实现跨域访问的技术
ajax请求受同源策略影响,不允许进行跨域请求,而script标签src属性中的链接却可以访问跨域的js脚本,利用这个特性,服务端不再返回JSON格式的数据, 而是返回一段调用某个函数的js代码,在s ...
- vue-resource ajax跨域,ajax 跨域请求 vue-resource jsonp跨域
aj体朋几一级发等点确层数框的很屏果行4带域ax 跨域请求 vue-resource j直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请sonp跨域 最近在学习vue.js 碰到个ajax ...
- [JS]笔记18_AJAX2_iframe元素AJAX跨域JSONP跨域
1.iframe元素 iframe元素会创建包含另外一个文档的内联框架 常用属性: frameborder属性规定是否显示框架周围的边框 值:0/1 src属性规定要显示的文档的URL 可是:html ...
- jsonp跨域的缺点ajax缺点,浅析JSONP解决Ajax跨域访问问题的思路详解
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问 ...
- jsonp跨域ajax跨域get方法
原理: 就是利用<script >标签没有跨域限制的,从而达到与第三方网站通讯的目的.当需要通讯时,本站脚本创建一个<script>标签,src地址指向第三方网站的的一个网址. ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
最新文章
- 2020-11-11 C++函数后面加“:”的含义
- 不吹牛,中国车主已经实现了「停车自由」
- MyBatis源码-解读Executor的三个实现类之SimpleExecutor(简单执行器)
- 在 Windows 上可以用 Docker 吗?| 洞见
- webresource_Jersey WebResource –标头不附加
- Oracle DMP 导入导出
- 145_Power BI Report Server自定义Form登录
- UE如何去除重复行,删除重复行
- 95-36-100-ChannelHandler-ChannelOutboundHandler
- 使用python开发windows应用程序
- [转] linux操作系统下c语言编程入门--基础知识
- Kafka AKHQ 安装部署
- 单片机---HLK-W801图形框架LVGL下开发(四)
- CSS背景图片自适应大小
- 好多粉-微信号复制统计工具,来粉统计,微信号复制统计系统更新落地页微信号自动控制功能,免费使用!
- mapper [pos] of different type, current_type [geo_point], merged_type [ObjectMapper]
- 基于JAVA口红专卖网站计算机毕业设计源码+数据库+lw文档+系统+部署
- 约瑟夫环问题【数组】标记法
- python怎么安装bokeh_Python如何使用bokeh包和geojson数据绘制地图
- 视频教程-FFmpeg+OpenGL ES+OpenSL ES打造Android视频播放器-Android
热门文章
- java nginx 502_Nginx 502 Bad Gateway错误的解决方案
- 8家供应商、2300个特效镜头,ftrack助力《侍神令》协同制作
- 二倍图css,二倍图/三倍图的分辨率问题
- Java版本微信授权登录(概览版)
- java水彩画效果滤镜,教你巧用PS滤镜实现水彩画效果
- c# 剔除sql语句‘尾巴‘的五种方法
- app用户注册、登录原理、注册页面
- IPv6 节点主动访问 IPv4 节点-地址池方式的NAT64配置
- 实用主义当道——GitHub 热点速览 Vol.48
- 技术人物:张亚勤-“智造中国”规划师(一)