JSONP跨域jQuery处理整理(附天气数据实例)
写在前面
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。
什么是跨域?
简单的来说,出于安全方面的考虑,页面中的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是怎么产生的?
1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;
2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);
3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;
4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;
5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。
6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。
7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
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:
<script type="text/javascript" src="http://www.a.com/user?id=123?callback=foo"></script>
便可以使用foo函数来调用返回的数据了。
在jQuery中如何通过JSONP来跨域获取数据
获取天气数据实例:
<!DOCTYPE HTML5> <html> <head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metacontent="获取天气数据"author="liubei"><title></title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script></head><body><scripttype="text/javascript">//方法一 $.ajax({dataType:'jsonp',url:'http://api.openweathermap.org/data/2.5/weather?q=Beijing,China',success:function(data){//处理data数据 console.log(data);}});//方法二 $.getJSON('http://api.openweathermap.org/data/2.5/weather?q=Beijing,China&callback=?',function(data){//处理data数据 console.log(data);});//方法三functionfoo(data){//处理data数据 console.log(data);}$.getScript('http://api.openweathermap.org/data/2.5/weather?q=Beijing,China&callback=foo');</script></body> </html>
参考:http://www.clanfei.com/2012/08/1637.html
http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html
转载于:https://www.cnblogs.com/liubei/p/jsonpDetail.html
JSONP跨域jQuery处理整理(附天气数据实例)相关推荐
- 33、JSONP跨域
跨域请求数据也是可以的,只不过Ajax这技术不行,而JSONP这种数据格式可以进行跨域.很多年前,浏览器是没有跨域限制的,可以正常跨域,浏览器为了安全和隐私限制了Ajax跨域 JSONP原理就是:将函 ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
- jQuery jsonp跨域请求
当前端和后端不属于同源策略就会访问不到数据 同源策略就是相同的协议,域名,端口.如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据 跨域的安全限制都是对浏览器端来说的,服务器端是不 ...
- 【转载】一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例)
一个通过JSONP跨域调用WCF REST服务的例子(以jQuery为例) JSONP(JSON with Padding)可以看成是JSON的一种"使用模式",用以解决" ...
- JSONP跨域获取JSON数据(含jQuery方法)——李帅醒博客
首先我要强调JSONP和AJAX没有半毛钱关系,别把他们混淆!!!只不过他们都是从后台获取数据的方法! 前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- jsonp跨域实现单点登录,跨域传递用户信息以及保存cookie注意事项
网站A:代码:网站a的login.html页面刷新,使用jsonp方式将信息传递给b.com的login.php中去,只需要在b.com中设置一下跨域以及接收参数,然后存到cookei即可, 注意:网 ...
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
最新文章
- 使用Python,OpenCV从静态背景中提取移动前景
- 美国自动驾驶监管里程碑:新法规允许自动驾驶汽车取消方向盘
- 个人易遗忘的代码记录
- LInux 些许知识
- 计算机组网技术与配置 pdf,教案计算机组网技术.pdf
- 动态规划 - 装配线调度问题
- java反射学习(2):反射与代理模式
- python cgi打印html代码
- codesmith 模板
- mysql is blocked because of many connection errors
- 只需五步,快速构建Python聊天室
- linux切大文件为小文件,linux系统下分割大文件的方法
- 科幻小说《霜与火》 by 雷·布雷德伯里
- 希捷2t服务器硬盘是什么盘,希捷酷鱼2T 3.5寸硬盘晒单以及小白安装应该避免的坑...
- Chrome繁简体转换插件
- 如何解除电子书DRM限制
- 基于Java的项目物业管理系统(附:源码课件)
- Java经典面试:源码解读及如何保证线程安全
- 2022-2027年中国消防器材制造行业发展前景及投资战略咨询报告
- 如何用六年成为一个全能的机器人工程师
热门文章
- 极大似然估计_极大似然估计、极大后验估计和贝叶斯估计
- xcode怎么打flutter的release包啊_“打工人”梗刚刚爆红网络,“早安打工人”等已被注册商标...
- CSDN博文中完美地去掉图片水印、调整图片位置和大小
- IC基础知识(2)模拟和数字电子学导论
- HDLBits 系列(18) BCD码计数器的设计
- 响应式Spring Cloud初探
- Maven 的dependency 的 classifier的作用
- 科达正式发布PPP业务支持计划
- 100行php代码实现加密端口转发
- 创立一个网站的前前后后(起因,域名,云平台,备案,CDN等等)(1)