jsonp解决跨域问题

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



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

跨域产生的原因：
       跨域问题的产生是浏览器一段的，服务器是不存在跨域问题这一说的。跨域问题是浏览器同源策略限制，当前域名的js只能读取同域下的窗口属性。一个网站的网址组成包括协议名，子域名，主域名，端口号。比如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);