js跨域请求之jsonp原理和运用

1、js请求后端服务时，域名不同或域名相同端口不同都是跨域；

2、无论哪个浏览器js都不能跨域请求后端服务，解决办法为jsonp；jsonp不是新技术，只是一个解决方案；即js不请求后端服务而是跨域请求js，即跨域加载js文件，而这个js文件由服务器端返回。

3、js中可以在cookie中取出token

4、js跨域取数据时，即使数据返回来，但浏览器判断是跨域取的数据也不会让js拿到，自动屏蔽掉

5、jsonp原理图：

上图解释：

情况1--直接请求：当localhost:8082 服务器js文件Ajax跨域请求时，localhost:8088处理数据正常返回json数据，返回到浏览器时被屏蔽掉，即localhost:8082上不能显示请求的信息

情况2--直接请求带参数callback==mycall：当localhost:8082 服务器js文件Ajax跨域请求时，在js中Ajax请求代码中配置上daType:jsonp【jQuery已对jsonp进行了封装，请求时在自己编写的ajax请求链接后面自动携带参数callback=mycall 。此请求相当于src请求，请求一个远程的js文件，这个远程的文件中包含了服务器端返回的数据，格式为mycall(data)。jQuery在本地js文件中创建函数mycall(data)，mycall函数名的值也为jQuery自动生成】，服务器得到请求后，将json数据当参数封装进mycall方法中以字符串方式返回（相当于一个js文件），浏览器识别为js文件即不会去屏蔽，进而加载进js中，js调用mycall方法传入参数，经过解析即可显示数据。

js如图配置即可：

代码：

var TT = TAOTAO = {
	checkLogin : function(){
		var _ticket = $.cookie("TT_TOKEN");
		if(!_ticket){
			return ;
		}
		$.ajax({
			url : "http://localhost:8088/user/token/" + _ticket,
			dataType : "jsonp",
			type : "GET",
			success : function(data){
				if(data.status == 200){
					var username = data.data.username;
					var html = username + "，欢迎来到淘淘！<a href=\"http://www.taotao.com/user/logout.html\" class=\"link-logout\">[退出]</a>";
					$("#loginbar").html(html);
				}
			}
		});
	}
}

$(function(){
	// 查看是否已经登录，如果已经登录查询登录信息
	TT.checkLogin();
});

服务器端处理：

代码：

    @RequestMapping(value = "/token/{token}",method = RequestMethod.GET,
// 浏览器对返回的字符串进行编码成json，如果不设置可能会编译失败
                    produces =MediaType.APPLICATION_JSON_UTF8_VALUE)
    @ResponseBody
    public String getUser(@PathVariable("token")String token, String callback){
        TaotaoResult result = userService.token(token);
        if(StringUtils.isNotBlank(callback)){
            return callback+"("+JsonUtils.objectToJson(result) +")";
        }
        return JsonUtils.objectToJson(result);
    }

注意：在注解@RequestMapping中加上produces =MediaType.APPLICATION_JSON_UTF8_VALUE这句话，意思是浏览器对返回的字符串进行编码成json，如果不设置可能会编译失败，导致页面上显示不出数据

或者：

    //jsonp方法2，仅限spring4.1版本以上
    @RequestMapping(value = "/token/{token}",method = RequestMethod.GET)
    @ResponseBody
    public Object getUser(@PathVariable("token")String token, String callback){
        TaotaoResult result = userService.token(token);
        if(StringUtils.isNotBlank(callback)){
            MappingJacksonValue mappingJacksonValue = new MappingJacksonValue(result);
            //设置回调方法
            mappingJacksonValue.setJsonpFunction(callback);
            return mappingJacksonValue;
        }
        return result;
    }

后台js代码实现：

参考博客https://www.cnblogs.com/chiangchou/p/jsonp.html

js跨域请求之jsonp原理和运用

猜你喜欢