侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

详解Ajax跨域(jsonp) 调用JAVA后台

前端  /  管理员 发布于 2年前   81

1. JSONP定义

JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。

2.JSONP由来

要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

如何解决跨域访问呢?那就要借助浏览器的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊,它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

3. JSONP原理与实现

首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp. 

然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。

最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。

具体代码操作:

1,js代码

$.ajax({  url: 'http://192.168.3.49:8080/PORTAL/authCode',  type: 'post',  dataType:'jsonp',  jsonp: "callback",  data: {    "type":'0',    "mobilePhone": $("#tel").val()  },  success:function(data){    alert(data.ret)    settime(obj);  },  error:function(data){    $('#mstr_ck').html("获取验证码失败,请重试!");    $("#error_ck").show();  }}); 

2,java代码  

@RequestMapping(value = "authCode")@ResponseBodypublic String getMobileAuthCode( HttpServletRequest request, String callback)    throws Exception {  String result = "{'ret':'true'}";  //加上返回参数  result=callback+"("+result+")";  return result;} 

如上:前端调用结果弹出:alert('true')  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


  • 上一条:
    使用Ajax或Easyui等框架时的Json-lib的处理方案
    下一条:
    python批量导入数据进Elasticsearch的实例
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • uni-app在详情页中给电话信息添加点击拨打电话的功能按钮(0个评论)
    • uni-app开发小程序搜索功能及添加搜索历史记录、添加热门搜索关键词功能demo(0个评论)
    • uni-app开发小程序使用uni.getLocation()实现页面即时获取当前定位信息demo(1个评论)
    • uni-app开发小程序实现列表页条件筛选显示功能demo(0个评论)
    • vue+elementui实现百度地图api滑上列表显示位置信息(0个评论)
    • 近期文章
    • 在laravel框架中使用中间件 + 队列的方式记录请求日志(0个评论)
    • laravel框架常用速查表收集(0个评论)
    • go语言中查找最长不含有重复字符的字符串算法示例代码(0个评论)
    • laravel中where IN多列特殊查询类型代码示例(0个评论)
    • 使用Laravel Airdrop加速您的CI构建(0个评论)
    • go语言中日期时间戳比较功能示例代码(0个评论)
    • 来自一位国外前端程序员学习go语言的功能第三部分(0个评论)
    • Laravel9 Eloquent WHERE Like搜索查询示例代码(0个评论)
    • 在PHP中使用MQTT协议的流程步骤(0个评论)
    • PHP远程代码执行漏洞:mysqlnd拓展中存在堆缓冲区溢出漏洞修复方式建议(0个评论)
    • 近期评论
    • 博主 在

      centos7中Meili Search搜索引擎安装流程步骤中评论 @鹿   执行以下命令看看你的2.27版本是否存在strin..
    • 鹿 在

      centos7中Meili Search搜索引擎安装流程步骤中评论 这是我的错误提示,下载了对应的glibc-2.25.tar.gz后续按照教程操作..
    • 阿凡达123 在

      golang 怎么做热更新中评论 也可以看看这个:https://github.com/edwingeng/hot..
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客