今天做页面时,后台给了个接口:https://a.a.com/a/a.json,我页面的上线地址是:http://b.b.com
显而易见,因为浏览器同源策略的限制,通过ajax无法无法取得json的数据。

百度百科

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支JavaScript的浏览器都会使用这个策略。

    所谓同源是指,域名,协议,端口相同。当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行。

同源策略限制了我们无法通过原生的XMLHttpRequest()对象获取到json数据。为了突破这个限制,我们的前辈们想出了一个解决方案:jsonp。

jsonp并非新的数据格式,而是解决JSON跨域获取的解决方案。通过JSONP获取到得数据已经不是JSON了,而是JS类型的数据(大部分是对象)。

上网找过很多讲jsonp的文章,大部分都是讲的模模糊糊的。jsonp的原理其实不复杂:

   1、浏览器的同源策略把跨域请求都禁止了;
2、HTML的<script>标签是例外,可以突破同源策略从其他来源获取数据;
3、由上可得,我们可以通过<script>标签引入jsonp文件,然后通过一系列JS操作获取数据。

上面三点便是JSONP实现跨域的原理。

原理我们知道了,该怎么实现这些操作呢?
接下来轮到jQuery登场!JQ已经帮我们封装好了
demo:

        $.ajax({
dataType:'jsonp',
jsonp:'jsonp_callback',
url:'http://www.baidu.com/xxx.jsonp',
success:function(){
//dosomthing
}
});

原生JS demo:

    function( url ) jsonHandle{
var script = document.createElement("script");
script.setAttribute("src",url);
document.getElementsByTagName("body")[0].appendChild(script);
}
//JS插入之后就可以处理数据了

一,接口返回

liudehua(["zhangsan","lisi","wangwu"]);

二,jsonpCallback 指明回调方法名字

三,利用success,定义jsonpCallback方法.

示意代码:

var jsonpCallback-Name = success;

四,调用 jsonCallback-Name方法.

JSONP原理及实现跨域方式的更多相关文章

  1. jsonp的三种跨域方式

    1.通过jq的$.ajax()完成跨域,这是我比较喜欢的一种方式. 代码如下: $.ajax({ type:'get', async:true, url:'地址', dataType:'jsonp', ...

  2. Api之Cors跨域以及其他跨域方式

    Web Api之Cors跨域以及其他跨域方式(三)   我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还 ...

  3. Javascript几种跨域方式总结

    在客户端编程语言中如javascript,同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法.只有当两个域具有相同的协议,相同的主机,相同的端口时,我们就认定 ...

  4. Web Api之Cors跨域以及其他跨域方式(三)

    我们知道ajax不能跨域访问,但是有时我们确实需要跨域访问获取数据,所以JSONP就此诞生了,其本质使用的是Script标签,除JSONP以外还有另外实现跨域方式 一.手动实现JSONP跨域 1.首先 ...

  5. Web 前端必备的各种跨域方式汇总

    Web 前端必备的各种跨域方式汇总 跨域方式汇总 同源策略 协议相同 + 域名相同 + 端口相同 https://www.xgqfrms.xyz/index.html https://www.xgqf ...

  6. 通过jsonp解决浏览器的跨域共享

    因为浏览器的同源策略,普通ajax访问跨域请求返回的json数据是不会被浏览器接受的.看下面例子可以看出是访问不到的 首先 定义webapi 后台代码 public class JsopControl ...

  7. 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探

    更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...

  8. SpringBoot系列(八)分分钟学会Springboot多种解决跨域方式

    SpringBoot系列(八) 分分钟学会SpringBoot多种跨域解决方式 往期推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 s ...

  9. 跨域 - jsonp轻松搞定跨域请求

    1.jsonp轻松搞定跨域请求 vue中使用axios,遇到跨域我就蒙逼了.第一次真正意义上的尝试使用jsonp js中用 var myscript = document.createElement( ...

随机推荐

  1. iOS 关于自动更新的分阶段发布(灰度发布)的相关简介

    前言:  AppStore 发布应用方式除了自动和手动,如今添加了分阶段发布(灰度发布).目的很明确,降低新版本骤然上升的bug率,不能挽回,只能发布新版本的风险.也也是针对禁止使用热修复,推出的相对 ...

  2. matlab fread

    Matlab中fread函数用法    “fread”以二进制形式,从文件读出数据. 语法1:[a,count]=fread(fid,size,precision) 语法2:[a,count]=fre ...

  3. MongoDB命令语法小用

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using MongoDB; ...

  4. 20145240 《Java程序设计》第十周学习总结

    20145240 <Java程序设计>第十周学习总结 教材学习内容总结 网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. 程序员所作的事情就是把数据发送到指定的位置 ...

  5. Android系统--输入系统(三)必备Linux知识_双向通信(scoketpair)

    Android系统--输入系统(三)必备Linux知识_双向通信(scoketpair) 引入 1. 进程和APP通信 创建进程 读取.分发 - 进程发送输入事件给APP 进程读取APP回应的事件 输 ...

  6. Go Redis 开发

    redigo库来实现redis的操作:https://github.com/gomodule/redigo Redis常用操作 示例代码: package main import ( "gi ...

  7. mysql服务器3306端口不能远程连接的解决

    1.网络检测   1)ping主机可以:   2)telnet 主机3306端口不可以:     telnet 主机22端口可以:   说明与本机网络没有关系: 2.端口检测   1)netstat ...

  8. java深入探究09-Filter,Listener,国际化

    1.Filter过滤器 1)为是么有过滤器 开发项目中经常遇到直接登录主页面要判断用户是否合法,这类代码比较重复,可以通过过滤器来解决 2)过滤器原理生命周期 服务器创建过滤器对象->一个执行i ...

  9. centos下安装Anaconda

    第一步:将下载好的Anaconda2-4.1.1-Linux-x86_64.sh软件传到linux下 第二步:[hadoop@spark1 ~]$ cd Desktop #进入到该软件所在目录,我的放 ...

  10. cern-cloud-architecture

    规模: 总体: 有26个Cell 一个数据中心运行控制节点,另外一个仅仅运行nova cell 统一,灵活 nova-api运行在VM中,当然需要至少一个部署在物理机上来启动VM. 每个cell只有一 ...