• 技术文章 >web前端 >js教程

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

    php中世界最好的语言php中世界最好的语言2018-03-31 15:42:43原创1045
    这次给大家带来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标签),这就可以实现通过调用站外程序对本地资源进行更改了。另外,通过<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")
    @ResponseBody
    public String getMobileAuthCode( HttpServletRequest request, String callback)
        throws Exception {
      String result = "{'ret':'true'}";
      //加上返回参数
      result=callback+"("+result+")";
      return result;
    }

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

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    Django Ajax如何使用

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript jsonp JAVA
    上一篇:fileUpload上传文件带进度条效果的实现步奏 下一篇:怎样用ajax来实现AngularJS的tab栏的操作
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• JavaScript迭代器知识点总结• 简单了解JavaScript数据结构与算法之栈• 11个可以提升效率的chrome调试技巧• 一文搞定JavaScript的节点操作• JavaScript类数组和可迭代对象的实现原理详解
    1/1

    PHP中文网