Ajax跨域(jsonp)调用JAVA后台的方法

这次给大家带来Ajax跨域(jsonp)调用JAVA后台的方法,Ajax跨域(jsonp)调用JAVA后台的注意事项有哪些,下面就是实战案例,一起来看一下。

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标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过 标记的使用,就可从服务端直接返回可执行的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’)  

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

Django Ajax如何使用

如何用php接收ajax提交到后台的数据

以上就是Ajax跨域(jsonp)调用JAVA后台的方法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2776867.html

(0)
上一篇 2025年3月8日 14:57:14
下一篇 2025年3月1日 20:07:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • ajax提交到java后怎么处理数据

    这次给大家带来ajax提交到java后怎么处理数据,ajax提交到java后处理数据的注意事项有哪些,下面就是实战案例,一起来看一下。 环境:eclipse+struts 要实现的效果:点击按钮提交数据到后台之后回到前台显示出来数据 ind…

    编程技术 2025年3月8日
    200
  • p5.js 毕达哥拉斯树的实现代码_javascript技巧

    这篇文章主要介绍了p5.js 毕达哥拉斯树的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 本文介绍了p5.js 毕达哥拉斯树的实现代码,分享给大家,具体如下: 效果如下: 主要方法 立即学习“Java…

    2025年3月8日
    200
  • Vue数据监听方法watch的使用

    这篇文章主要介绍了vue数据监听方法watch的使用,挺不错的,现在分享给大家,也给大家做个参考。一起过来看看吧 watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来 当Vue视图中的数据变化时, 关联的函数会被执行 …

    2025年3月8日
    200
  • js结合json实现ajax的实战案例

    这次给大家带来js结合json实现ajax的实战案例,js结合json实现ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 前期准备 1、安装wampserver或者其他相似软件来搭建本地集成安装环境,我安装的是phpstudy …

    2025年3月8日
    200
  • 使用Angular CLI生成路由的方法_AngularJS

    这篇文章主要介绍了使用angular cli生成路由的方法,挺不错的,现在分享给大家,也给大家做个参考。一起过来看看吧 第一篇文章是: “使用angular cli生成angular5项目” :http://www.…

    2025年3月8日 编程技术
    200
  • vue 开发一个按钮组件的示例代码_vue.js

    本篇文章主要介绍了vue 开发一个按钮组件的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧 最近面试,被问到一个题目,vue做一个按钮组件; 当时只是说了一下思路,回来就附上代码。 解决思路: 通过父子组件通讯($refs 和 …

    编程技术 2025年3月8日
    200
  • Koa2 之文件上传下载的示例代码_node.js

    本篇文章主要介绍了koa2 之文件上传下载的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧 前言 上传下载在 web 应用中还是比较常见的,无论是图片还是其他文件等。在 Koa 中,有很多中间件可以帮助我们快速的实现功能。 文件…

    编程技术 2025年3月8日
    200
  • Node.js实现注册邮箱激活功能的方法示例_node.js

    现在很多网站都需要有注册邮箱激活的功能,本篇文章主要介绍了node.js实现注册邮箱激活功能的方法示例,现在分享给大家,也给大家做个参考。一起过来看看吧 在做自己的node项目极客教程时,需要开发一个注册邮箱激活的功能,这个功能非常常见,当…

    2025年3月8日
    200
  • vue 实现全选全不选的示例代码_vue.js

    本篇文章主要介绍了vue 实现全选全不选的示例代码,现在分享给大家,也给大家做个参考。一起过来看看吧 全选功能可以说是前端开发中非常常见的一个功能,以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuer…

    2025年3月8日
    200
  • js中prototype详解

    prototype 是在 IE 4 及其以后版本引入的一个针对于某一类的对象的方法,而且特殊的地方便在于:它是一个给类的对象添加方法的方法!这一点可能听起来会有点乱,别急,下面我便通过实例对这一特殊的方法作已下讲解: 首先,我们要先了解一下…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论