jsonp跨域实现
原理:借助script可以跨域的思想,将跨域请求放在script中,当页面解析到改script标签时,就会向该src指向的地址发出一个请求,达到跨域请求的目的。
两点:(1)主要是利用了 <script/>标签的跨域性 (2)script标签对javascript文档的动态解析来实现
服务器端配合处理: 在前端传入事件处理函数如url?callback=fun,后台获取这个callback参数,通过字符串拼接,组合成函数调用的形式,将数据也拼接进去,构造js代码,返回给前端的script标签,在前端script标签会自动执行返回的代码。(因为后台没法直接执行函数调用),所以是在后台返回一个拼接的调用形式,返回给前端,script标签会自动执行,从而实现跨域。
demo:
<script>
function handlerData(data){ alert('获取到数据');
console.log(data);
}
</script>
<script src='http://webgis.ecnu.edu.cn/beta/cross.php?callback=handlerData'></script>
服务器端:
<?php
$callback = $_GET['callback'];
$data ='["hello","world"]';
echo $callback."(".$data.")"; //拼接字符串 或者 "try" $callback."($data)". "catch(e){}"
?>
结果如下

这种方法实现的话,每个请求都要重新生成数据,可以采用动态生成脚本的方式,将数据放到脚本中,脚本中存放数据,向客户端返回一个js
缺点:返回的函数执行出错时,没有错误提示,只能看控制台下的报错信息。
优缺点:
使用JSON的优点在于:
- 比XML轻了很多,没有那么多冗余的东西。
- JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
- 在JavaScript中处理JSON很简单。
- 其他语言例如PHP对于JSON的支持也不错。
JSON也有一些劣势:
- JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
- 如果你使用eval()来解析的话,会容易出现安全问题。
尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。
第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。
JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。
jsonp跨域实现的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 借助node实战JSONP跨域
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限 ...
- jsonp跨域+ashx(示例)
前言 做B/S项目的时候,我们一般使用jquery+ashx来实现异步的一些操作,比如后台获取一些数据到前台,但是如果ashx文件不在本项目下,引用的是别的域下的文件,这时候就访问不了.关于jsonp ...
- Jsonp跨域访问
很早之前看过好几篇跨域访问的文章,然后做项目的时候基本没有遇到跨域访问的问题.不过该来的还是会来,前些天终于让我遇到了.于是重温了一下原理这些,再进行实战.于是现在也敢通过实战后的一些理解来和大家分享 ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
- 我的jsonp跨域问题
关于jsonp跨域问题,在这个方面也是了解一点点,先记录下来,主要作为以后查看,之前下载并安装过wampserver,了解到了jsonp和json的区别,现在谈谈跨域这个问题: 首先什么是跨域,简单地 ...
- jsonP跨域调用
-------------------------------------jsonP跨域调用------------------------------------- <div class=&q ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- jsonp跨域问题
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式). 同源策略限制 ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- AngularJS--控制器(Controller)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 理解控制器 在AngularJS的控制器中,构造函数会有Scope参数. 当一个控制器通 ...
- 600集Python从入门到精通教程(懂中文就能学会)
目录大纲: 本套教程15天 1-3 天内容为Linux基础命令 4-13 天内容为Python基础教程 14-15 天内容为 飞机大战项目演练 视频概括: 第一阶段(1-3天): 该阶段首先通过 ...
- 关于CSDN, cnblog, iteye和51cto四个博客网站的比较与分析
http://blog.csdn.net/pkucl1/article/details/6629819 CSDN: http://blog.csdn.net/ cnblog: http://www ...
- apollo实现c#与android消息推送(二)
安装完成apache apollo后,org.eclipse.paho是很方便的测试软件,下来介绍paho的安装和使用 2. 搭建paho: a 下载 org.eclipse.paho.ui.app- ...
- URL不能过长,否则summit方法提交失败
MVC5.0+EF6.0,和浏览器的版本有关系.IE最多1024KB. URL不能过长,否则summit方法提交失败.
- Python之scrapy安装
1.按照网上教程一步步实验,运行时报错: 'HtmlResponse' object has no attribute 'xpath' in scrapy 个人使用的是scrapy0.14.4,搜索得 ...
- Telerik 控件 RadGridview实现绑定
0.使用MiroModes框架请先阅读http://blogs.telerik.com/blogs/posts/10-01-20/micromodels_for_silverlight.aspx 1. ...
- vs重装找不到 $(WindowsSdkDir) 配置问题
vs重装的一个bug,找了一个下午,删了再装vs也没用. 在配置表 HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Microsoft SDKs ...
- Yarn一点小认识
正文 打开官网http://hadoop.apache.org/docs/r2.6.5/hadoop-yarn/hadoop-yarn-site/YARN.html,将图片拿过来. 我用的是2.6.5 ...
- Hibernate逆向代码问题
问题描述 使用hibernate tools 插件生成pojo代码非常方便快捷,但是我今天使用的时候发现,在eclips安装jboss插件后,找不到Hibernate Code Generation ...