文档章节

javascript跨域 jsonp详解

梅超疯
 梅超疯
发布于 2015/01/08 14:47
字数 1132
阅读 26
收藏 0

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。

1.随便建两个网页

一个端口是2698,一个2701,按照定义它们是不同源的。

image_thumb4

2.用jQuery发起不同源的请求

在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {
    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {
        console.log(data)
    })

    $.get("http://localhost:2701/home/index", function (data) {
        console.log(data)
    })
})

根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by Access-Control-Allow-Origin)

OK,原来jsonp是要解决这个问题的。

script标签的跨域能力

不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然,200,OK了

image_thumb15

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

利用script获取不同源的json

既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

添加一个按钮事件来测试一下:

$("#getOtherDomainJson").click(function () {
    $.get('http://localhost:2701/home/somejson', function (data) {
        console.log(data)
    })
})

image_thumb21

首先,第一个浏览器,http://localhost:2701/home/somejson这个Url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:

image_thumb[3]

如果存在jsonpcallback这个方法,那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。

添加回调函数:

function jsonpcallback(json) {
    console.log(json)
}

把前面的方法稍微改改参数:

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

image_thumb[8]

200OK,服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。

利用jQuery获取jsonp

上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的结果跟上面类似。

总结

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

 

来源:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

 

 

ADD 原生js:

<button id="btn">click</button>
<script type="text/javascript">
    function $(str){
        return document.getElementById(str)
    }
    function CreateScript(src) {
        var Scrip=document.createElement('script');
        Scrip.src=src;
        document.body.appendChild(Scrip);
    }
    function jsonpcallback(json) {
            console.log(json);//Object { email="中国", email2="中国222"}
    }
    $('btn').onclick=function(){
      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    
    }
</script>


本文转载自:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

梅超疯
粉丝 12
博文 20
码字总数 8198
作品 0
广州
程序员
私信 提问
jsonp跨域获取数据实现百度搜索

本菜鸡最近在写某个页面请求数据时,报了如下的错误。 Failed to load https://...: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0......

行无忌
2018/06/25
0
0
JSONP原理优缺点(只能GET不支持POST)

JSONP的优点是:它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都 可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕...

BearCatYN
2015/06/04
870
0
AJAX 跨域请求 - JSONP获取JSON数据

原文地址:http://justcoding.iteye.com/blog/1366102 AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web Asynchronous JavaScript and XML (Ajax ) 是驱......

water014300
2014/12/22
208
0
用jQuery与JSONP轻松解决跨域访问的问题

跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问...

烽穹寒渊
2015/07/26
0
0
Web前端学习笔记之前端跨域知识总结

0x00 前言 相信每一个前端er对于跨域这两个字都不会陌生,在实际项目中应用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩,碰到这种情况,就只能自己总结一篇博客,作为记录。...

时光飞逝,逝者如斯
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

android抓取app启动类

adb shell,然后logcat | grep "ActivityManager: START"

安卓工程师王恒
22分钟前
12
0
并发编程之Java锁

一、重入锁 锁作为并发共享数据,保证一致性的工具,在JAVA平台有多种实现(如 synchronized(重量级) 和 ReentrantLock(轻量级)等等 ) 。这些已经写好提供的锁为我们开发提供了便利。 重入锁...

codeobj
26分钟前
10
0
云栖深度干货 | 打造“云边一体化”,时序时空数据库TSDB技术原理深度解密

本文选自云栖大会下一代云数据库分析专场讲师自修的演讲——《TSDB云边一体化时序时空数据库技术揭秘》 自修 —— 阿里云智能数据库产品事业部高级专家 认识TSDB 第一代时序时空数据处理工具...

开源中国小二
27分钟前
9
0
mobile-nfv运行步骤

1. 编译过程 在 [workspaces] 的 <workdir> 目录运行以下命令: $ nfv-build make clean all... $ nfv-build make mobile-package...*** PACKAGE BUILT AT: /vob/BUG_117504/casa/nfv/b......

Robotcl_Blog
36分钟前
10
0
如何对邮箱做域名验证

做客户开发的时候,邮件群发仍然是个有效的手段。如果发海外邮件的话,选个服务器在国外的邮箱比较好,因为邮件抵达率会比较高一些。比如gmail, zoho mail等等,都可以。本文以zoho mail为例...

Zoho云服务
37分钟前
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部