jsonp跨域总结
同源限制: 浏览器不允许一个域的脚本请求另一个域的文档，通俗来说，不允许访问不同协议、不同域名或不同端口的文档
跨域处理方法:
1.jsonp
前提: 浏览器虽然对ajax请求做出了限制，但script的链接没有限制，例如: <script src= 'xxx'>,我们可以轻松地链接到另一个域的文件
原理:
首先在客户端创建一个回调函数，将回调函数的名称(例如callback)传给服务端;
服务端生成json数据data后，创建js文件，将callback(data)(data成了callback的参数)写入js文件；
客户端创建script文件，链接地址为此前生成的js文件地址；
解析script文件，返回的callback(data)即调用callback函数(前面已创建)，由此，我们获取了data，如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script> //创建callback函数
function callBack(data){
console.log(data)
}
</script>
<script> //客户端返回的文件
callBack({content: 'xx'})
</script>
</html>
实际应用的例子如下:
<script type="text/javascript">
var url = "http://localhost:8080/html5/jsonp_data11.js";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head，此时调用开始
document.getElementsByTagName('head')[0].appendChild(script);
function callbackFun(data)
{
console.log(data.age);
console.log(data.name);
}
</script>
也可以使用jquery
$.ajax({
type:"post",
url:"http://localhost:8080/html5/JsonServlet",
dataType:'jsonp',
jsonp:'mycallback',
jsonpCallback:'callbackFun',
success:function(data) {
console.log(2222);
console.log(data.age);
}
});
值得注意的是使用jsonp是一个前后端配合的过程，后台根据前端的请求也得做成相应调整，特别是使用jquery时， 有时回调函数名是jsonp属性的值，有时候追加到
url后面。
优点: 很好地解决了同源策略的限制
缺点:
1.只能GET；
2.不会返回状态码；
3.安全性不佳，毕竟返回一段js，对安全由一定威胁。
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 ...
随机推荐
- oracle数据库中VARCHAR2(50 CHAR) 和VARCHAR2(50) 有啥区别？
VARCHAR2(50 char)这种类型的字段最多放50个字符,不够50个用空格填充:而VARCHAR2(50)最大允许存放50个字符,但是不足50个也不用空格填充.varchar2是变长字符串,与 ...
- Struts2 是什么？
Struts2是流行和成熟的基于MVC设计模式的Web应用程序框架. Struts2不只是Struts1下一个版本,它是一个完全重写的Struts架构. WebWork框架开始以Struts框架为基础 ...
- VC++通过API连接MySQL
1. 首先安装MySQL数据库server,本文安装的是mysql-installer-community-5.6.10.1.msi这个版本号.至于各个版本号有什么不同,不在这里说明. 例如以下的默 ...
- 各种流程图的绘画网路工具 processon
https://www.processon.com 对应的网址,类似在线viso 很方便使用,工具齐全,推荐使用!
- mybatis if test 相等的情况怎样动态拼接sql
今天程序须要依据前台的传过来的状态推断在数据库里是取 where a>b 还是 a<b 还是 a=0 的情况 搞了一下午最后试了下 在if 里面拼接 #{status}=#{statu ...
- TP ajax
①Ajax使用: 注意传值的所有过程用的是小写,及时数据库列的名称中有大写字母 控制器部分: AjaxController.class.php <?php namespace Home\Co ...
- python学习【第十一篇】网络编程
一.socket的简介 socket(简称:套接字)进程间通信的一种方式,它与其他进程间通信的一个主要不同是:能实现不同主机间的进程间通信,我们网络上各种各样的服务大多都是基于 Socket 来完成通 ...
- 《从零开始学Swift》学习笔记（Day 35）——会使用下标吗？
原创文章,欢迎转载.转载请注明:关东升的博客 看下面的示例代码是不是使用过: var studentList: String[] = ["张三","李四",&q ...
- 【22,23节】Django的GET和POST属性笔记
COOKIES:一个标准的python字典对象,包含所有cookies,键和值都为字符串session:一个即能读又能写的类似字典对象,表示当前的会话,只有当django启用会话的支持时才可用 一键多 ...
- Android 屏幕适配扫盲、教程
转载请注明出处:http://blog.csdn.net/my_truelove/article/details/66584865 訪问 ruicb.com,一键抵达我的博客! 扫描左側或右下方二维码 ...