Ajax+Spring MVC实现跨域请求（JSONP）

时间 2019-11-13

标签 ajax+spring ajax spring mvc 实现请求 jsonp 栏目 Ajax 繁體版

原文原文链接

JSONP解释

在解释JSONP以前,咱们须要了解下”同源策略“这个概念,这对理解跨域有帮助。基于安全的缘由,浏览器是存在同源策略机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另外一个源加载额文档的属性。有点绕,说的简单点就是浏览器限制脚本只能和同协议、同域名、同端口的脚本进行交互。javascript

JSONP就是为了解决这一问题的,JSONP是英文JSON with Padding的缩写,是一个非官方的协议。他容许服务端生成script tags返回值客户端,经过javascript callback的形式来实现站点访问。JSONP是一种script tag的注入,将server返回的response添加到页面是实现特定功能。html

简而言之,JSONP自己不是复杂的东西,就是经过scirpt标签对javascript文档的动态解析绕过了浏览器的同源策略。前端

JSONP原理及实现

接下来,来实际模拟一个跨域请求的解决方案。后端为Spring MVC架构的,前端则经过Ajax进行跨域访问。java

一、首先客户端须要注册一个callback(服务端经过该callback(jsonp)能够获得js函数名(jsonpCallback))，而后以JavaScript语jquery

法的方式,生成一个functionajax

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

三、最后客户端浏览器动态的解析script标签,并执行返回的JavaScript语法文档片断,此时数据做为参数传入到了预先定义好的后端

回调函数里(动态执行回调函数)。跨域

这种动态解析js文档和eval函数是相似的。浏览器

通过一番努力，解决以下：

修改host 文件

127.0.0.1 www.lbj.com

127.0.0.1 www.lbj1.com

@RequestMapping("/getJsonp") 
 @ResponseBody 
 public JSONPObject getJsonp(String callbackparam){ 
Company company=new Company(); 
company.setAddress("宝驾(北京)信息技术有限公司"); 
company.setEmail("123456@qq.com"); 
company.setName("宝驾(上海)信息技术邮箱公司"); 
company .setPhone("12345678912"); 
  return new JSONPObject(callbackparam, company);  
 }
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> 
<script> 
$(document).ready(function(){ 
       
       
$("#but1").click(function(){ 
     $.ajax({ 
        url:'http://www.lbj1.com:8082/oms/tradeIllegal/test.do', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一块儿传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
$("#but2").click(function(){ 
     $.ajax({ 
        url:'http://www.lbj.com:8082/DevInfoWeb/getJsonp', 
        type: "get", 
        async: false, 
        dataType: "jsonp", 
        jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
        jsonpCallback: "success_jsonpCallback", //callback的function名称,服务端会把名称和data一块儿传递回来  
        success: function(json) { 
         alert(json); 
        }, 
        error: function(){alert('Error');} 
}); 
}); 
   
   
}); 
</script> 
</head> 
<body> 
   
<div id="div1"><h2>使用 jQuery AJAX 来改变文本</h2></div> 
<button id="but1">按钮1</button> <br/> 
<button id="but2">按钮2</button> 
   
</body> 
</html>