jsonp解决跨域问题

解决的场景(如下图所示)：

当使用ajax的方式远程访问服务端的资源时候，会出现跨域问题。

跨域产生的原因：

跨域问题的产生是浏览器一段的，服务器是不存在跨域问题这一说的。跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。一个网站的网址组成包括协议名，子域名，主域名，端口号。比如http://www.52php.cn/tag/https://github.com/ ，其中https是协议名，www是子域名，github是主域名，端口号是80，当在在页面中从一个url请求数据时，如果这个url的协议名、子域名、主域名、端口号任意一个有一个不同，就会产生跨域问题。

跨域问题的解决方案：

（1）使用httpclent的方式获取远程资源服务，在提供相应的url，在使用ajax间接进行访问，有些项目就是这么访问，工作量繁琐，不建议这么一种方式。

（2）使用ajax，解决跨域的方式是使用jsonp的方式。重点介绍

jsonp的解决方式

json≠jsonp

原理

jsonp解决跨域问题的原理是，浏览器的script标签是不受同源策略限制(你可以在你的网页中设置script的src属性问cdn服务器中静态文件的路径)。那么就可以使用script标签从服务器获取数据，请求时添加一个参数为callbakc=?，?号时你要执行的回调方法。

ajax中的dataType类型：

?"xml": 返回 XML 文档，可用 jQuery 处理。

?"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。

?"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

?"json": 返回 JSON 数据 。

?"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

?"text": 返回纯文本字符串

demo:

$.ajax({  
			url:url,type:"get",jsonp:'jsonpcallback',dataType:"jsonp",//跨域必须用jsonp     
			cache:false,success: function(obj){   
    			console.log(obj)
    		}  
		});  

后台代码：

@Path("ajax/{username}/{password}")
	@GET
    @Produces(MediaType.APPLICATION_JSON)
	public String ajax(@QueryParam("jsonpcallback") String jsonpcallback,@PathParam(value = "username") String username,@PathParam(value = "password") String password) {
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("username",username);
		jsonObject.put("password",password);
		
		System.out.println(jsonpcallback);
		System.out.println(jsonpcallback + "("+jsonObject.toJSONString()+")");
		return jsonpcallback + "("+jsonObject.toJSONString()+")";
	}

ps：后台必须要以jsonp回调名称包裹。形式jsonp(data);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!