jsonp突破同源策略,实现跨域訪问请求

版权声明:本文为博主原创文章,未经博主同意不得转载。如需转载请声明:【转自 http://blog.csdn.net/xiaoxian8023 】 https://blog.csdn.net/xiaoxian8023/article/details/27817861

       跨域訪问问题。相信大家都有遇到过。

这是一个非常棘手的问题。

只是道高一尺,魔高一丈,对于这类问题,总有解决这个问题的方案。近期我又接触到了这个问题。解决的途径是ajax+jsonp。


       讲到这个问题,不得不说一下“同源策略(Same-Origin Policy)”,它是由Netscape提出的一个著名的安全策略。如今全部支持JavaScript 的浏览器都会使用这个策略。所谓同源。就是必须协议、域名、port都一致的,才叫做同源。比如:http://www.12306.cn和https://www.12306.cn,由于协议不一致。就不是同源。

http://127.0.0.1:8080/test1和http://localhost:8080/test1 也不属于同源,由于域名不一致。port不同当然也不叫同源了。


       假设非同源,那么在请求数据时。浏览器会在控制台中报一个异常,提示拒绝訪问。这是一个令web开发者非常手疼的问题。比方,我如今打开百度网页,然后在控制台中请求CSDN的网页。那么就会报如图所看到的的异常:



       在上图中,大家可能会看到这个词儿——“Access-Control-Allow-Origin”,它是W3C标准中为了解决同源策略引起的跨域问题而提出的一种技术——“跨域资源共享(CORS。Cross-Origin Resource Sharing)”。仅仅要你在服务端设定这个Access-Control-Allow-Origin的header就能够同意跨域訪问了。有兴趣的话,自己查一下,非常easy。只是它有安全隐患。主要是由于支持通配符*。每一个站点都能够任意请求。那就太不安全了。

如:

response.setHeader("Access-Control-Allow-Origin", "*");

       Query中$.ajax的get方法,是支持跨域訪问的,只是dataType要设定为“jsonp”。Jsonp(JSON with Padding)是 json 的一种“使用模式”。能够让网页从别的网域获取资料。jsonp是採用的js的回调机制来实现的。使用方式也非常easy,代码例如以下:

 
$.ajax({ 
  url: 'http://localhost:8080/test2/searchJSONResult.action',
  type: "GET", 
  dataType: 'jsonp', 
  data: {name:”ZhangHuihua”}, timeout: 5000, 
  success: function (json) {
    //clientjquery预先定义好的callback函数,成功获取跨域server上的json数据后,会动态运行这个callback函数 
    alert(json); 
  }, 
  error: function (){
    alert("请求失败。"); 
   }
});

//简单方式例如以下:
$.getJSON("http://localhost:8080/test2/searchJSONResult.action?

name1=ZhangHuihua&callback=?", function(json){ // 运行代码 });


       在server端,又一次拼接json数据:

/** 获取请求的各个參数(username等) **/
Map map = request.getParameterMap();
/** 获取jsonp的回调函数名 **/
String callback = request.getParameter("callback");
/** 调用业务逻辑。并将结果转化为json格式 **/
String msg = convert2Json(services.login(map))
/** 又一次拼接格式。并输出  **/
out.println(callback + "('" + msg + "')");

       这样就能够在浏览器获取到异源服务端返回的json数据了。这里返回的跟json格式不一样。它的格式是回调函数名+(json数组)。

当中小括号不能够省略。

否则请求是发送成功了,可是却获取不到数据,由于返回的数据格式出错了。效果图例如以下:



 

【推广】 免费学中医,健康全家人
原文地址:https://www.cnblogs.com/ldxsuanfa/p/10659778.html