专栏首页后端开发随笔解决浏览器跨域限制方案之JSONP

解决浏览器跨域限制方案之JSONP

一.什么是JSONP

JSONP即:JSON with Padding,是一种解决因浏览器跨域限制不允许访问跨域资源的方法。 JSONP是一个非官方的协议,它允许在服务器端返回javascript标签到浏览器,在浏览器端通过调用javascript函数的形式实现访问跨域资源或数据。

二.JSONP和JSON的关系

JSONP是一种解决因浏览器跨域限制不允许访问跨域资源的方法;而JSON是一种数据格式,与xml类似。 虽然二者在字面上都含有关键字“JSON”,但实际上他们之间没有任何关系。 通过JSONP获取到的跨域数据是javascript对象,而非JSON对象,所以避免了数据解析这个过程。

三.JSONP的原理

本质上来讲,JSONP解决访问跨域资源的方法,与直接使用<script>标签引用资源是一样的。 原因在于:使用JSONP访问跨域数据时,就是需要在DOM中动态创建<script>标签,并设置src属性访问指定资源。 差别在于:通过JSONP获取到的返回数据是一个函数调用,数据以参数的形式传递给函数;而<script>标签返回的是引用的资源内容。

四.实战示例

1.前端代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
    <h2>验证使用JSONP方式发送跨域请求</h2>
    <div>
        <input type="button" value="发送请求" onclick="ajaxJsonp()">
    </div>
</body>
<script type="text/javascript">
    // 前端通过动态创建javascript标签的方式发送请求
    function ajaxJsonp() {
        var url = "http://localhost:8081/jsonp?callback=jsonpcall";
        var script = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = url;
        document.body.appendChild(script);
    }
    
    // jsonp返回数据时调用的函数,数据以参数形式传递
    function jsonpcall(data) {
        console.log("do response jsonp data");
        console.log(data);
    }
</script>
</html>

2.服务端代码

/**
 * 使用JSONP方式处理跨域GET请求
 * @param req
 * @param resp
 * @param callback 回调函数名称
 * @return
 */
@RequestMapping(value = "/jsonp", method = RequestMethod.GET)
@ResponseBody
public Object testAjaxJsonp(HttpServletRequest req, HttpServletResponse resp,
        @RequestParam("callback") String callback) {
    JSONObject json = new JSONObject();
    json.put("name", "jsonp");
    json.put("pwd", "");
    
    // 将数据作为函数的参数返回给浏览器,如: jsonpcall({"name":"jsonp","pwd":""})
    return new StringBuffer().append(callback).append("(").append(json).append(")");
}

【参考】 http://www.nowamagic.net/librarys/veda/detail/224 JSONP跨域的原理解析 http://www.xiaoxiaozi.com/2011/11/25/2239/ JSONP与POST方式请求 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 说说JSON和JSONP http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html 深入浅出JSONP--解决ajax跨域问题

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • tomcat源码研究之源码导入eclipse

    版本:8.5.x 官网:https://tomcat.apache.org/svn.html 1. 下载源码,git镜像:https://github.com...

    2Simple
  • tomcat下的Cookie特殊符号问题

    案例: 在项目中通过Cookie方式临时存放检索条件,不小心在Cookie值中使用了特殊符号"@",导致在服务器端无法正确解析Cookie值。 之所以说"不小心...

    2Simple
  • 浏览器跨域限制概述

    所谓浏览器跨域限制,其实是为了数据安全的考虑由Netscape提出来限制浏览器访问跨域数据的策略。 这是一种约定,正式叫法为“浏览器同源策略”,目前已经在大多...

    2Simple
  • 跨域解决方案整理笔记

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

    用户3056046
  • Spring Cloud Netflix项目进入维护模式之我见

    这两天看到一则新闻:https://spring.io/blog/2018/12/12/spring-cloud-greenwich-rc1-available...

    用户1516716
  • Spring Cloud Greenwich 正式发布,Hystrix 即将寿终正寝!

    Spring Cloud Greenwich 正式版在 01/23/2019 这天正式发布了,下面我们来看下有哪些更新内容。

    Java技术栈
  • Python爬虫入门教程 27-100 微医挂号网专家团队数据抓取pyspider

    今天尝试使用一个新的爬虫库进行数据的爬取,这个库叫做pyspider,国人开发的,当然支持一下。

    梦想橡皮擦
  • 利用canvas给图片加水印 (转)

    如果仅仅是普通的合成,例如一个底图和一个PNG水印图片合成,直接使用canvas的drawImage()方法即可,语法如下:

    javascript.shop
  • 制作60fps的高性能动画

    说到web的高性能动画,这部分内容其实已经是老生常谈的了,不过其中还是有不少比较新的而且非常实用的内容可以和大家分享一下。

    QQ音乐前端团队
  • 资源 | MURA:斯坦福ML团队开放的大型放射影像数据集与挑战赛

    机器之心

扫码关注云+社区

领取腾讯云代金券