前言

  周一的学院点开题被批的很惨,换了个校长,各种被抓严,班上已经有两个同学打算休学了。哎,这周的聚会可能是大家集聚的最后一次吧。熬着吧,还是学习我的前端,不管老板学校咋逼了,找个好工作才是王道。今天把学习的几种跨域方法做个小结吧,不然就很容易忘了。

什么是跨域?

JavaScript处于安全方面的考虑,不允许跨域调用其他页面的对象。也就是说a.com域名下的JS无法操作b.com或者c.a.com域名下的对象。JS跨域就是要解决在不同的域之间的数据传输或通信。只要是协议、域名、端口有任何一个的不同,都被当做是不同的域。如下所示:

JSONP跨域

JsonP跨域是我们最常见的跨域方法,它所基于的原理:直接通过XMLHttpRequest是不能请求不同域的数据,但是我们可以在页面中引入不同域的JS文件。

假设a.html页面里面要获取http://b.com/data.php里面的json数据。那么我们可以在a.html页面中可以这样实现:

<script>
function cb(jsondata){
//处理获得的json数据
}
</script>
<script src="http://b.com/data.php?callback=cb"></script>

在创建的script标签里src的url后面有个?callback=cb,这里cb就是我们获取数据后要执行的函数。

在data.php里面,返回的必须是一段可执行的JS文件。如下:

<?php
$callback = $_GET['callback']; //得到回调函数名cb
$data = array('a','b','c'); //返回的数据
echo $callback.'('.json_encode($data).')';
?>

最终a.html页面得到的结果是cb(['a','b','c'])。这就得到我们想要的数据了。

  

JS的跨域理解的更多相关文章

  1. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

  2. js执行跨域请求

    //js执行跨域请求 var _script = document.createElement('script'); _script.type = "text/javascript" ...

  3. js调用跨域

    web aapi 初体验 解决js调用跨域问题   跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同 ...

  4. js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug

    URL  说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...

  5. react-native debug js remotely跨域问题

    react-native debug js remotely跨域问题 我们在安卓真机上调试react-native时,启用debug js remotely的时候,会出现跨域问题.这个时候我们只需要一 ...

  6. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  7. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  8. 静态页面调试JS出现跨域问题

    在chrome浏览器或者firefox浏览器里,由于安全限制的原因,本地调试JS,如果不配服务器环境而直接打开页面,那所有的AJAX操作会抛出下面错误: XMLHttpRequest cannot l ...

  9. js原生跨域--用script标签实现

    刚刚从培训班学习完,总想写一下东西,自从进入了这个院子,每次出现问题,总是能找到一些答案,给我一些帮助. 作为新手,就写一下简单的吧,院子里面有很多大牛, 说句实话,他们的很多代码我都看不懂. 我就写 ...

随机推荐

  1. PHP函数:method_exists和function_exists

    method_exists 检查类的方法是否存在 bool method_exists ( mixed $object , string $method_name ) 检查类的方法是否存在于指定的ob ...

  2. 开发Maven插件

    Mojo: Maven plain Old Java Object 1.插件命名规则:maven-<yourplugin>-plugin是Maven的保留字段,不允许使用,我们可以用< ...

  3. uvm_svcmd_dpi——DPI在UVM中的实现(二)

    UVM中有需要从cmmand line 输入参数的需求,所有uvm_svcmd_dpi.svh和uvm_svcmd_dpi.cc 文件就是实现功能. uvm_svcmd_dpi.svh的源代码如下,我 ...

  4. grafana快速入门

    入门 本指南将帮助您开始并熟悉Grafana.它假定您有一台正在运行的Grafana服务器,并至少添加了一个数据源. 初学者指南 观看10分钟的初学者指南,以建立仪表板,以快速介绍设置仪表板和面板. ...

  5. Visual Studio 更改护眼颜色

  6. Android商城开发系列(十)—— 首页活动广告布局实现

    在上一篇博客当中,我们讲了频道布局的实现,接下来我们讲解一下活动广告布局的实现,效果如下图: 这个是用viewpager去实现的,新建一个act_item.xml,代码如下所示: <?xml v ...

  7. Mysql数据库学习总结(一)

    数据库概念 数据库(Database)是按照数据结构来组织.存储和管理数据,建立在计算机存储设备上的仓库. 简单说,数据库就是存放数据的仓库.和图书馆存放书籍.粮仓存放粮食类似. 数据库分类 分为 关 ...

  8. java模式

    模式(Pattern) 模式(Pattern)的概念最早由建筑大师Christopher Alexander于二十世纪七十年代提出,应用于建筑领域,八十年代中期由Ward Cunningham和Ken ...

  9. vuejs组件

    <div id='root'> <ul> <todo-item></todo-item> </ul> </div> <sc ...

  10. 2018.2.3 Centos 的vim好看的主题配置及JDK的安装配置

    这里用的是Centos7云服务器的系统 第一步登录 centos7 系统: 通过查看命令 rpm -qa | grep vi 第二步:检测是否已经安装过Vim: 输入命令:rpm -qa|grep v ...