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 ...
随机推荐
- java之装饰器模式
Decorator Pattern(装饰器模式),定义:Attach additional responsibilities to an object dynamically. Decorators ...
- java数据库编程之初始Mysql
2.3:命令行连接mySql 2.3.1:检查是否启动服务 步骤:计算机-----管理------服务和应用程序-------服务---搜索mysql右键启动服务 2.3.2:命令行方式连接数据库 步 ...
- keydown - > keypress - > keyup
英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chr ...
- Jquery仿京东分类导航层简单实现
<script src="/js/jquery-1.11.1.min.js" type="text/javascript"></script& ...
- 一个scrapy框架的爬虫(爬取京东图书)
我们的这个爬虫设计来爬取京东图书(jd.com). scrapy框架相信大家比较了解了.里面有很多复杂的机制,超出本文的范围. 1.爬虫spider tips: 1.xpath的语法比较坑,但是你可以 ...
- 配合JdbcUtils最终版重写QueryRunner
在使用QueryRunner类的时候,直接new本类,无需传递连接池或连接,如果是普通连接,最终释放连接 /** * * 在使用QueryRunner类的时候,直接new本类,无需传递连接池或连接 * ...
- Java简单工厂模式以及来自lambda的优化
前言 设计模式是软件工程中一些问题的统一解决方案的模型,它的出现是为了解决一些普遍存在的,却不能被语言特性直接解决的问题,随着软件工程的发展,设计模式也会不断的进行更新,本文介绍的是经典设计模式 ...
- uva12716 GCD XOR
个人博客:http://acbingo.cn/2015/06/04/uva12716/ 被紫薯上*和素数筛法类似*这句话给误解了= =,一直以为存在某种关系,在枚举c或者a时,可以根据当前的答案,筛掉 ...
- session和cookie作用原理,区别
Cookie概念 在浏览某些 网站 时,这些网站会把 一些数据存在 客户端 , 用于使用网站 等跟踪用户,实现用户自定义 功能. 是否设置过期时间: 如果不设置 过期时间,则表示这个 Cookie生命 ...
- Java Scanner类
package io; import java.util.*; public class useScanner { public static void main(String[] args) { S ...