GVKun编程网logo

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

10

此处将为大家介绍关于Ajax+SpringMVC实现跨域请求的详细内容，并且为您解答有关JSONP的相关问题，此外，我们还将为您介绍关于ajaxjsonp的跨域请求、Ajaxjsonp跨域请求实现方法

此处将为大家介绍关于Ajax+Spring MVC实现跨域请求的详细内容，并且为您解答有关JSONP的相关问题，此外，我们还将为您介绍关于ajax jsonp的跨域请求、Ajax jsonp跨域请求实现方法、ajax 跨域请求之jsonp、ajax 跨域请求（jquery）的有用信息。

本文目录一览：

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

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

背景：

AJAX向后台（springmvc）发送请求，报错：已阻止交叉源请求：同源策略不允许读取 http://127.0.0.1:8080/DevInfoWeb/getJsonp 上的远程资源。可

以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

百度一下，发现是遇到了跨域请求请求问题。搜集资料如下

JSONP解释

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

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

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

JSONP原理及实现

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

1、首先客户端需要注册一个callback(服务端通过该callback(jsonp)可以得到js函数名(jsonpCallback))，然后以JavaScript语

法的方式,生成一个function

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

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

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

这种动态解析js文档和eval函数是类似的。


经过一番努力，解决如下：

SpringMVC端：

@RequestMapping("/get")
	   public void get(HttpServletRequest req,HttpServletResponse res) {
	       res.setContentType("text/plain");
	       String callbackFunName =req.getParameter("callbackparam");//得到js函数名称
	       try {
	           res.getWriter().write(callbackFunName + "([ { name:\"John\"}])"); //返回jsonp数据
	       } catch (IOException e) {
	           e.printStackTrace();
	       }
	   }
	   
	   @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); 
	   }

AJAX端： 

<!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://127.0.0.1:8080/DevInfoWeb/get'',
		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://127.0.0.1:8080/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>


参考文章：

http://www.2cto.com/kf/201411/351856.html

http://blog.csdn.net/d8111/article/details/45249871


ajax jsonp的跨域请求

ajax jsonp的跨域请求

1.页面ajax的请求

$.ajax({
　　async: false,　　url: 'http://localhost:8080/downloadVideos',//跨域的dns/document!searchJSONResult.action,
　　type: "GET",　　dataType: 'jsonp',　　jsonp: 'jsoncallback',　　jsonpCallback: "cb",//自定义返回函数的名称,要与服务端保持一致
　　data: {
　　　　id:ID,　　　　user:user
　　},　　timeout: 5000,　　success: function (json) {
　　　　$(data).css("background","red");
　　　　alert(json);
　　}
});

2.服务端nodeJS的返回

app.get('/downloadVideos',function (req,res,next) {
　　var random = new Date().getTime();
　　var url = "https://savemedia.com/generate/";
　　var videosID = req.query.id;
　　superagent
　　　　.get(url + videosID + "?random=" + random)
　　　　.end(function (err,sres) { // callback
　　　　　　// 常规的错误处理
　　　　　　if (err) {
　　　　　　　　return next(err);
　　　　　　}
　　　　　　var obj = JSON.parse(sres.text);
　　　　　　var url = obj.download.watch[0].url;
　　　　　　var videoName = new Date().getTime();
 
　　　　　　downloadFile(url,"../public/videos/" + videoName + ".mp4",function (err) {
　　　　　　if (err) {
　　　　　　　　return next(err);
　　　　　　//　console.log(videoName + ".mp4" + '下载完毕');
　　　　　　});
　　　　　　var videoUrl = 'http://**.**.**.**:8080/videos/' + videoName + '.mp4';
　　　　　　res.send("cb(" + JSON.stringify(videoUrl) + ")");
　　　　});
　});

//文件下载 function downloadFile(uri,filename,callback) {
　　var stream = fs.createWriteStream(filename);
　　request(uri).pipe(stream).on('close',callback);
}

Ajax jsonp跨域请求实现方法

Ajax jsonp跨域请求实现方法

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

 

URL 说明 允许通信
http://www.a.com/a.js
http://www.a.com/b.js		 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js		 同一域名下不同文件夹 http://www.a.com:8000/a.js
http://www.a.com/b.js		 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js		 同一域名，不同协议 http://www.a.com/a.js
http://127.0.0.100/b.js		 域名和域名对应ip http://www.a.com/a.js
http://script.a.com/b.js		 主域相同，子域不同 http://www.a.com/a.js
http://a.com/b.js		 同一域名，不同二级域名（同上） http://www.a.com/a.js
http://www.b.com/b.js		 不同域名 不允许

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

跨域: js有一个同源限制,简单说来源不一样的话就无法相互间交互.那么怎么算来源不一样呢,举个例子:浏览器访问-->服务器A--->得到页面A---页面A中的js脚本只能访问服务器A的资源(相同域名和端口,此外域名与对应的ip也算不同源,要么都域名,要么都ip).

以上就是js的跨域问题,但是这里需要注意一点的是服务器A是没有跨域的问题的,这个只有js存在这个问题,也就是说: 页面A中js-->服务器A--->跨域资源,这个路径是可以.只有 页面A中的js--->跨域资源,这个路径是不行的.

然后说一下解决方案中的jsonp,这个不是一种格式,而是一种解决方案.

jsonp的原理:js虽然有同源限制,但是引入js文件的时候却没有这个限制,也就是说:

<script type="text/javascript" src="xxx/xxxx.js"></script>

其中src属性引入js文件的时候是没有同源限制的,此时是可以引入域外资源的.jsonp的原理就在这里,通过动态的创建一个以上那行js引入语句,通过其src属性访问域外资源.而域外资源服务器只要返回一个能被解析为js语句的字符串即可达到返回结果的目的,形如:

callback({"key":"value",...})

其中callback是需要事先约定的名字,绿字部分为要返回到json字符串,然后拼接成以上那种形式直接返回即可.这样页面中的js从服务端接收到这个拼接的字符串后,就会直接执行本地的名为callback的js方法,这也就是为何callback这个需要事先约定的原因,需要保证页面侧要存在这个js方法,这个方法传入的参数就为服务器侧的返回值.

ajax是支持jsonp的,所以以上那些麻烦事情都会替我们做,写法如下:

$.ajax({
     type: 'GET',url: "http://127.0.0.1:8080/xxx/xxx",async: false,dataType: "jsonp",jsonp: "callback",success: function(result){
       .....
     },timeout:3000 
  });

红字部分标识我们使用jsonp的方式调用,实际上此时这个已经不是传统意义上的ajax的get请求了,它的真实实现方式就是我们上文中说的那样.其中红字部分的callback为我们要和服务器端进行沟通的部分,这个请求发送到服务器端,实际上这样的:

http://127.0.0.1:8080/xxx/xxx?callback=jqueryxxxx

服务器端需要通过callback来取值(类似用request.getParameter("callback")),也就是取后面的jqueryxxxx等自动生成的值,这个值实际上就是对应的我们发送请求的ajax方法中的success回调方法,服务器端如果返回

jqueryxxxx({"ret":"ok"})

页面中会自动执行success方法,且将{"ret":"ok"}传给success方法的参数result.

以上就是ajax通过jsonp的方式实现跨域访问的过程.可以看出基本不用我们做什么额外操作,全都封装好了.

ps：在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'： 

$.ajax({
    dataType: 'jsonp',url: 'http://www.a.com/user?id=123',success: function(data){
        //处理data数据
    }
});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可： 

$.getJSON('http://www.a.com/user?id=123&callback=?',function(data){
    //处理data数据
});

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法
function foo(data){
    //处理data数据
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API是运用在开发者自己的应用上，而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上，因此跨域请求数据成为开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

ajax 跨域请求之jsonp

ajax 跨域请求之jsonp

  • 需求
  • 遇到的问题
  • 解决办法

需求

今天项目需要访问一个外部链接获取数据，是跨域的。使用ajax 请求一直提示：

遇到的问题

１.　如何使用ajax 跨域请求数据
2. 能不能post请求

解决办法

  1. 经过网上查找资料，能使用jsonp请求跨域数据。
  2. jsonp请求数据只能get，不支持post跨域请求
    使用方法，见代码：
$.ajax({
    type: "post",//这里写post也没用，也是get请求
    url: "url",dataType: "jsonp",data:"q=xx&categoryId=0&brandId=0",//参数
    jsonp: "callback",jsonpCallback:"jsonpCallback",success: function(json){
        alert('json:' + json);
    },error: function(){
        alert('fail');
    }
  });

PHP端代码(即请求url端)：

$callback = Input::get("callback"); 
$v1="1";
$v2="2";
$response = "{\"value1\":\"" + $v1 + "\",\"value2\":\"" + $v2 + "\"}";
$call = $callback . "(" + $response + ")";
return $call;

ajax 跨域请求（jquery）

ajax 跨域请求（jquery）

首先，jsonp 只支持 ajax 的 get 请求跨域，

$(".login").on("click",function(){
   $.ajax({
      type:"get",
      url:"http://localhost:9090/dologin",
      data:{
         ''username'':$("#username").val(),
         ''password'':$("#password").val()
      },
      dataType:"jsonp",
      jsonp:"successCallback",
      jsonpCallback:"success_jsonpCallback",
      success:function(data){
         console.log("我请求成功了")
      },
      error:function(){
         console.log("失败了")
      }
   });
})

如上代码，应该在正常的 ajax 中修改一部分以及添加一部分参数，具体如下

dataType:"jsonp",
jsonp:"successCallback",
jsonpCallback:"success_jsonpCallback",

dataType 必须为 “jsonp”

jsonp 为请求 url 中 jquery 自动加的一个参数，

http://localhost:9090/dologin?successCallback=success_jsonpCallback&username=yang&password=123&_=1494919496254

其中如果没有

jsonp:"successCallback",

那么 jquery 会默认为 “callback”, 此例子中配置为 successCallback

如果没有

jsonpCallback:"success_jsonpCallback",

那么函数名称便不会是 success_jsonpCallback，而是 jquery 自动生成的形如 “jquery_xxxxxx” 的函数

在后台，一定要这样返回

jj := "success_jsonpCallback" + "({\"flag\":\"successfuly\"})"

也就是说，不可以直接返回 json 串，而是要把 json 串当做参数，放在 success_jsonpCallback 函数中，把他们当成一个整体返回，在浏览器看来，返回的是

一定要这么写，否则会出错

关于Ajax+Spring MVC实现跨域请求和JSONP的介绍已经告一段落，感谢您的耐心阅读，如果想了解更多关于ajax jsonp的跨域请求、Ajax jsonp跨域请求实现方法、ajax 跨域请求之jsonp、ajax 跨域请求（jquery）的相关信息，请在本站寻找。

本文标签：

上一篇MyEclipse jsp 无端报错（myeclipse中jsp报错）

下一篇Windows Server 2003服务器IIS6.0解析JSP/IIS6.0与JSP共用80端口（jsp服务器配置）

相关文章