初步了解关于js跨域问题-jsonp
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?),或者是js获取在页面内的不同域的框架中的数据(iframe),ifame在不同域下的js通信。
跨域的表现主要有:协议不同,主机名不同,端口号不同
比如
http://www.abc.com和https://www.abc.com属于协议不同
http://www.abc.com和http://qqq.abc.com属于主机名不同
http://www.abc.com和http://www.abc.com:80属于端口号不同
而http://www.abc.com和http://www.abc.com/list.html是属于同域下的
第一种解决跨域问题的方法是:通过jsonp
在js中,我们直接通过XMLHttpRequest请求不同域的数据是不可以的,jsonp通过引入js脚本的方式解决了这个问题,比如假设需要在a.html中通过ajax获取不同域上的json数据,假设这个json数据就在http://www.abc.com/data.php,那么可以通过以js文件的形式引入
a.html
<script>
function dosomething(jsondata) {
//这里处理获得的json数据
}
</script>
<script src="http://www.abc.com/data.php?callback=dosomething"></script>
这里的获取数据的地址后还有callback参数是惯用参数名,因为是当做js文件引入的,那么返回的也应该是js文件,所以在这个页面的php中应该是这样的
<?php
$callback = $_GET('callback');//得到回调函数名
$data = array('a','b','c');//传递的数据
echo $callback.'('.json_encode($data).')';//输出
?>
输出:dosomething(['a','b','c'])
因此我们可以很清楚地知道,dosomething函数就是通过http://www.abc.com/data.php?callback=dosomething返回的js文件,dosomething函数的参数是返回的json数据,这样我们就得到了跨域的数据
所以通过jsonp的方法解决跨域问题的思路是,通过script标签引入一个js文件,这个js文件载入成功后会执行url参数中指定的函数,并且会把获取的json数据当做参数传入,所以jsonp是需要服务器端页面的配合的。
jQuery可以很方便地封装jsonp
<script>
$.getJSON("http://www.abc.com/data.php?callback=?",function(){
//处理JSON数据
});
</script>
jquery会自动生成一个全局函数来代替callback=?的?,与js实现的原理是一致的,之后获取到数据后,全局函数又会自动销毁,相当于一个临时代理函数的功能,
$getJSON方法可以自动判断是否跨域,如果不跨域,则按普通的ajax方法,如果跨域,就通过异步加载调用js文件来调用jsonp的回调函数。
初步了解关于js跨域问题-jsonp的更多相关文章
- JS跨域:jsonp、跨域资源共享、iframe+window.name
JS跨域:jsonp.跨域资源共享.iframe+window.name :https://www.cnblogs.com/doudoublog/p/8652213.html JS中的跨域 请求跨域有 ...
- 初步了解关于js跨域问题
js跨域问题是指在js在不同的域中进行数据传输或者数据通信,比如通过ajax向不同的域请求数据(说到ajax,不可避免的就会遇到两个问题:一是ajax是如何传递数据的?二是ajax是如何实现跨域的?) ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域请求 JSONP B/S全代码
Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- 【转】JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域请求之JSONP
在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的.但是JSONP到底是个什么东西呢,实现的原理又是什么呢.在项目的空闲时间可以好好的来研究一下了. JSONP的产生 1.众所周知,Ajax请 ...
- js跨域问题解释 使用jsonp或jQuery的解决方案
js跨域及解决方案 1.什么是跨域 我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题. 跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说, ...
- js跨域请求方式 ---- JSONP原理解析
这篇文章主要介绍了js跨域请求的5中解决方式的相关资料,需要的朋友可以参考下 跨域请求数据解决方案主要有如下解决方法: 1 2 3 4 5 JSONP方式 表单POST方式 服务器代理 H ...
随机推荐
- Mac下nvm管理node.js版本问题
本篇文章主要是针对已经安装了node.js和nvm管理工具小伙伴遇到的问题. 管理工具有两个,一个是nvm,还有一个是nnvm的好处就是可以管理多个node版本,而且可以切换想要的版本,可以安装一个稳 ...
- cat/tac/more/less 命令详解
cat:(http://www.cnblogs.com/peida/archive/2012/10/30/2746968.html) *cat主要有三大功能:1.一次显示整个文件:cat filena ...
- java 分解质因数
算法目的:对一个正整数分解质因数 一.算法分析: 1.建立整数列表,保存求到的因数. 2.声明整数i=2,用以递增取模:整数m,用于临时保存n 3.建立while循环,i小于等于整数m时,判断m%i, ...
- [编织消息框架][JAVA核心技术]动态代理应用1
前面几篇介绍,终于到了应用阶段啦,我们来做一个RPC来加强学过的知识 做基础核心时先确定解决什么问题,提供什么服务,同将来扩展等 rpc 分两部份,一个是调用者,另一方是服务提供者 调用者只关心那个服 ...
- python自动安装mysql5.7
python自动安装mysql5.7 python版本:python2.6 centos版本:centos6.9 mysql版本:mysql5.7.19 安装目录路径和数据目录路径都是固定,当然也可以 ...
- python sklearn PCA源码阅读:参数n_components的设置(设为‘mle’出错的原因)
在介绍n_components参数之前,首先贴一篇PCA参数详解的文章:http://www.cnblogs.com/akrusher/articles/6442549.html. 按照文章中对于n_ ...
- Python day 7(2) 类和实例(1)
一:面向对象编程 1 面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 2 ...
- Python函数返回不定数量的值
Python的函数是可以return多个值的,但其本质上还是返回单个值,只是利用了tuple的自动打包,将多个值打包成单个tuple返回. 使用代码验证: def func_a(): return 1 ...
- python词云的制作方法
第一次接触到词云主要是觉得很好看,就研究了一下,官方给出了代码的,但是新手看的话还是有点不容易,我们来尝试下吧. 环境:python2.7 python库:PIL(pillow),numpy,matp ...
- mysql如何执行关联查询与优化
mysql如何执行关联查询与优化 一.前言 在数据库中执行查询(select)在我们工作中是非常常见的,工作中离不开CRUD,在执行查询(select)时,多表关联也非常常见,我们用的也比较多,那么m ...