jquery jsonp跨域访问方法案例代码

jquery | 2019-09-13 10:02:39

1.jsonp下载

jsonp跨域就是借用了script标签,使用方法很简单,首先你得下载jsonp插件的js文件

你必须得下载,因为,jquery自带的有问题。

下载地址 https://www.bootcdn.cn/jQuery-JSONP/


2.客户端代码

引入jquery,然后引入上面下载的jsonp文件后,使用下面的代码


$.jsonp({ 
        url  : serverHost+"App.action?action=login&client=web&ts="+new Date().getTime(), 
        data : {userName:desEnc(userName),password:desEnc(password)},
        callback: "jsonpcall",
        callbackParameter:"jsonpcallback",//这个参数是指定传到服务器的参数,以及服务器返回的参数
        success : function(data){
                
        }, 
        error:function(request,error){
                
        }
});

既然使用的事script标签能跨域的原理。那么服务器返回的就必然是类似javascript脚本的了。

3.服务器返回代码

注意我这里判断了有没有传来jsonpcallback这个参数,服务器要处理跨域和不跨域的请求吗,所以我写了个公用的方法。



//返回请求,每个请求都必须这样玩,因为要判断是否是跨域请求
        public void sendResponse(HttpServletRequest request, HttpServletResponse response,JSONObject json){
                try {
                        String jsonpcallback=request.getParameter("jsonpcallback");//判断是否有跨域请求
                        String returnStr=jsonpcallback!=null&&!jsonpcallback.equals("")?(jsonpcallback+"("+json.toString()+")"):json.toString();
                        PrintWriter out = response.getWriter();
                        out.print(returnStr);
                        out.flush();
                        out.close();
                } catch (IOException e) {
                        // TODO Auto-generated catch block
                        e.printStackTrace();
                }
                
        }

  • jsonp

    类型: String

    在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5,,设置jsonp选项为false,阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下,你也应该明确设置jsonpCallback设置。例如, { jsonp: false, jsonpCallback: "callbackName" }


  • jsonpCallback

    类型: String, Function

    为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。从jQuery 1.5开始,你也可以使用一个函数作为该参数设置,在这种情况下,该函数的返回值就是jsonpCallback的结果。

4.JSONP原理

我们不能从不同的服务器ajax数据,但是<script>就可以做到,我们在本地写一个函数,然后在远端引入的这个js文件对这个函数进行了调用,在调用过程中可以传递参数,这样子的一个过程就是jsonp
本地服务器 localhost


<span style="background-color: white;"><script type="text/javascript">    var localFunction = function(data){
        alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'+ data.result);
};
</script> 
<script type="text/javascript" src="http://remoteserver.com/remote.js">
//remote.js 其实就一句话  localFunction({"result":"我是远程js带来的数据"});,在浏览器加载完成之后,远端loading过来的这个文件可以执行本地的JavaScript代码,里面可以携带数据,不过需要有一个函数名作为媒介
</script></span>






登录后即可回复 登录 | 注册
    
关注编程学问公众号