转: ajax跨域之JSONP
事件背景:
某个站点分为静态产品介绍页面(或由于某原因需要静态化),和一个独立的在线应用程序。静态产品页面属于www.a.com下,而在线应用程序作为一个相对独立的系统存在于app.a.com上。
在www.a.com上需要显示在线应用程序(app.a.com)中用户的登录状态及简单的用户信息。由于需要实时的在静态页面中显示用户登录状态,在线应用程序提供了一个用户接口来输出当前用户的登录信息,静态页面采用ajax方式动态获取。
问题在于www.a.com和app.a.com分属于不同子域,无法通过ajax直接进行通信。~~通信协议 域名 端口号都相同才认为是同源
思路分析:
由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名、协议、端口)的资源。
如众周知,script标签经常被用来加载不同域下的资源,例如在www.a.com可以使用http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js这个js文件,可以绕过同源策略。~~~script标签可以不受同源策略限制,加载不同域下的资源
同样的,可以通过使用script标签来进行跨域请求,但是怎么获取异域源返回的数据呢?
有这样一种方式:如果请求的这个远程数据本身就是一段可执行的js,那么这些js会被执行(相当于eval)。即,若在www.a.com中存在一个showUserStatus()的js函数,它的作用是在www.a.com显示当前用户状态,只要给它传递当前用户的状态数据就可以了。那么利用script标签请求的app.a.com中,输出数据为:showUserStatus(data),那么将会执行www.a.com中的showUserStatus(),用户当前的状态就在静态页面上显示了。
使用JSON来传递javascript对象是一种最简单的方式了,这样的跨域通讯方式称为JSONP。
解决方案:
1. 静态页面上的js:
<script type="text/javascript">function showUserStatus(data) {alert(data.txt);}
</script>
<!--将函数名showUserStatus传递过去-->
<script type="text/javascript" src="http://app.a.com/userStatus.php?callback=showUserStatus"></script>
2. 远程php接口:
$get = $_GET;
$rtData = array('uID' => 10000,'name' => 'Zhangsf','txt' => 'Welcome ZhangSanFeng',
);// 获取传递来的函数名,并拼凑完整的函数执行体
echo $get['callback'] .'('. json_encode($rtData) .')';
这里输出的格式为:
showUserStatus({"uID":10000,"name":"Zhangsf","txt":"Welcome ZhangSanFeng"})
可以看出,输出的是一个可执行的js函数体。
总结:
需要注意的是:JSONP实际上是一种脚本注入(Script Injection)方式,存在一定的安全隐患。
jQuery的书写方法如下:
var url = 'http://app.a.com/userStatus.php?callback=?';$.getJSON(url, function(data){alert(data.txt)
});
抓包发现会产生类似于http://app.a.com/userStatus.php?type=json&callback=jsonp1261223089741&_=1261223089747的请求地址,问号被替换为一个带时间戳的回调函数名。
转: ajax跨域之JSONP相关推荐
- ajax跨域请求Jsonp实现,使用jsonp实现ajax跨域请求
Jsonp(JSON with Padding)是资料格式 json 的一种"使用模式",可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example ...
- Ajax跨域:Jsonp原理解析
推荐先看下这篇文章:JS跨域(ajax跨域.iframe跨域)解决方法及原理详解(jsonp) JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重 ...
- JQuery实现Ajax跨域访问--Jsonp原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- Ajax跨域和JSONP
跨域与JSONP 了解同源策略和跨域 同源策略 1.什么是同源 如果两个页面的协议,域名和端口都相同,则两个页面具有相同的源 判断下表给出的URL地址与http://www.test.com/inde ...
- AJAX 跨域请求 - JSONP获取JSON数据
Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示 ...
- AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录 同源策略和跨域 同源策略 跨域 JSONP JSONP的实现原理 自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
- Ajax——跨域与JSONP
目录 1. 了解同源策略和跨域 1.1 同源策略 1. 什么是同源 2. 什么是同源策略 1.2 跨域 1. 什么是跨域 2. 浏览器对跨域请求的拦截 3. 如何实现跨域数据请求 2. JSONP 2 ...
- ajax跨域jsonp并且post请求No 'Access-Control-Allow-Origin'以及执行error时readyState=4同时status=200的解决方法
ajax跨域jsonp并且post请求No 'Access-Control-Allow-Origin'以及执行error时readyState=4同时status=200的解决方法 [网上很多网友的回 ...
最新文章
- mac上mysql关闭不了了_python操作mysql数据库
- MOSS SDK学习笔记系列文章
- 自学python需要买书吗-学习python需要有编程基础吗
- java中JTextPane使输出字符到指定的宽度换行,并将垂直滚动条的位置移动到输出的最后位置...
- Caffe2:python -m caffe2.python.operator_test.relu_op_test
- 《推荐系统实践》样章:如何利用用户标签数据
- python白森_氧气恋人
- 3B大战引来的担忧:百度重仓云计算拟摆脱困局
- 大一C语言大作业ip合法性,c语言实现判断ip地址是否合法
- 转载:ADO.NET Entity Framework 试水系列索引(2008/9/9更新,本系列结束)
- Stopping filebeat
- 生物信息学_分子数据库(二)核酸
- Wincc常用C脚本
- 运动蓝牙耳机什么牌子好,骑行运动耳机
- java颜色识别_Java颜色检测
- 地铁三号线 - 搬家故事
- 常用的数据库统计SQL语句(2)
- bandit(13-34)
- 微博是这样炼成的:山寨QQ项目源码下载大全~
- 重整网站。。。。。。。。。
热门文章
- TensorFlow | TensorFlow实践(一)
- 串行任务如何提高效率Java_具有相同属性任务串行有序执行的线程池设计
- java xheditor 上传图片_xhEditor粘贴图片自动上传到服务器(Java版)
- 科学计算机要用的电池是几号,科学计算器的常识及注意事项
- python 一次性定时器_python 定时器每天就执行一次的实现代码
- Python实现kNN算法
- tensorflow随笔-tf.no_op
- 【Python】Pandas数据挖掘与分析时的常用方法
- 【深度学习】一位算法工程师从30+场秋招面试中总结出的超强面经——目标检测篇(含答案)...
- 【Python基础】Python中的高效迭代库itertools,排列组合随便求