playframework运用Extjs中jsonp请求实现跨域

我会带着你远行 2022-07-13 01:59 155阅读 0赞

1.首先我们看下jsonp的请求格式

Ext.data.JsonP.request({  
                  url: 'http://10.196.83.53:9000/WebService/ClassDirWS/getObjectNode?nodeId=5',  
                 timeout: 300000,
                 callbackKey: "jsonPCallback",  
                 success: function(result) {  
                     //alert(result);
    				 console.log(result);
    				 var str = JSON.stringify(result);
    				 alert(str);
          
                 },  
                 failure: function(result) {  
                     alert(result);  
                 }  
             });

这里我请求的是服务器上的一个地址 http://10.196.83.53:9000/WebService/ClassDirWS/getObjectNode?nodeId=5

这里需要注意的是回调函数的回调键callbackKey：“jsonPCallback”，我们需要通过这个键来获取回调函数名，下面是我们真正请求时浏览器发送的链接：http://10.196.83.53:9000/WebService/ClassDirWS/getObjectNode?nodeId=5&jsonPCallback=Ext.data.JsonP.callback1&\_dc=1482201455975  这里的Ext.data.JsonP.callback1就是我们要获取的函数名，后面的\_dc=1482201455975 这个是随机参数值，JS会被浏览器缓存,后面加个随机数, 保证每次请求都是新文件

2.其次我们看一下我们的play路由设置

GET    /WebService/ClassDirWS/getObjectNode     webService.classDirWS.controllers.MainService.getObjectNode(nodeId:String,jsonPCallback:String)

注意这里的接收参数需要和callbackKey：“jsonPCallback”一模一样

3.我们的MainServie.java文件中可以看到接收参数的形式

public static Result getObjectNode(String nodeId,String jsonPCallback){
            response().setContentType("text/javascript; charset=UTF-8");
            response().setHeader(ACCESS_CONTROL_ALLOW_ORIGIN,"*");
            //处理过程省略。。。。。。
            return ok(jsonPCallback+"("+str+")");
    
        }

最后形成的返回jsonp格式形如这种格式Ext.data.JsonP.callback1（str），Ext.data.JsonP.callback1这个函数名就是动态获取的，括号里面是你需要传递的数据，这就满足了对Ext.data.JsonP.callback1（参数）函数的调用

总结：其实jsonp就是通过javascript标签不受跨域限制这一特性，通过服务器端拼接好客户端js函数调用形式，然后对客户端js函数的进行调用，实现数据的传输。