jsonp处理跨域

什么是跨域？

简单的来讲，出于安全方面的考虑，页面中的JavaScript没法访问其余服务器上的数据，即“同源策略”。而跨域就是经过某些手段来绕过同源策略限制，实现不一样服务器之间通讯的效果。

 

具体策略限制状况可看下表：

URL	说明	容许通讯
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	容许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不一样文件夹	容许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不一样端口	不容许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不一样协议	不容许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不容许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不一样	不容许
http://www.a.com/a.js http://a.com/b.js	同一域名，不一样二级域名（同上）	不容许
http://www.a.com/a.js http://www.b.com/b.js	不一样域名	不容许

 

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，经过这种模式能够实现数据的跨域获取。 

 

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是没法获取到该服务器之外的数据的，但img、iframe、script等标签是个例外，这些标签能够经过src属性请求到其余服务器上的数据。利用script标签的开放策略，咱们能够实现跨域请求数据，固然，也须要服务端的配合。当咱们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而咱们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

 

举个例子，假如须要从服务器（http://www.a.com/user?id=123）获取的数据以下：

1. {"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是以下： 

1. foo({"id": 123, "name" : 张三, "age": 17});

固然，若是服务端考虑得更加充分，返回的数据可能以下： 

1. try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候咱们只要定义一个foo()函数，并动态地建立一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo： 

即可以使用foo函数来调用返回的数据了。 

 

在jQuery中如何经过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'： 

1. $.ajax({
2.         dataType: 'jsonp',
3.         url: 'http://www.a.com/user?id=123',
4.         success: function(data){
5.                 //处理data数据
6.         }
7. });

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数便可： 

1. $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
2.         //处理data数据
3. });

也能够简单地使用getScript方法：

1. //此时也能够在函数外定义foo方法
2. function foo(data){
3.         //处理data数据
4. }
5. $.getJSON('http://www.a.com/user?id=123&callback=foo');

 

JSONP的应用

JSONP在开放API中能够起到很是重要的做用，开放API是运用在开发者本身的应用上，而许多应用每每是在开发者的服务器上而不是在新浪微博的服务器上，所以跨域请求数据成为开发者们所须要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便作的很是好（虽然某些API里没有说明，但其实是能够使用JSONP方式调用的）。

一、页面请求

function complete(){

var data = {
"enterprise_id":"8316",
"receiver_name":"王敏", 
"province_code":"110000",
"city_code":"110100",
"district_code":"110102",
"province_name":"北京市",
"city_name":"市辖区",
"district_name":"西城区",
"address":"这里是详细地址",
"contact_phone":"18721703659",
"default_address":"0"
};
$.ajax({
url:"http://usermanage.yaoex.com:8080/enterpriseInfo/saveReceiverAddress",
data:data,
dataType :'JSONP',
jsonp: "callbackSaveAddress",
jsonpCallback:"success_jsonp",
contentType: "application/json;charset=utf-8",
success: function (data) {
console.info(data);
}
});
}

二、服务器响应

/*** 新增收发货地址信息* @return* @throws Exception* {"enterprise_id":"8316","receiver_name":"小小蔡芽", "province_code":"110000","city_code":"110100","district_code":"110102","province_name":"北京市","city_name":"市辖区","district_name":"西城区","address":"这里是详细地址","contact_phone":"18721703659","default_address":"0"}*/@RequestMapping(value = "/saveReceiverAddress")@ResponseBodypublic String saveReceiverAddress(HttpServletRequest request,@RequestBody UsermanageReceiverAddress usermanageReceiverAddress) {String jsonpCallback = request.getParameter("callbackSaveAddress");Map<String, Object> resp = new HashMap<String, Object>();try {//获取用户信息User user = UsermanageUserUtil.getCurrentUser(request);if (null == user) {resp.put("result", "error");resp.put("msg", " 未能正常获取登陆用户信息!");logger.info(" 未能正常获取登陆用户信息!");return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")";}usermanageReceiverAddress.setEnterprise_id(String.valueOf(user.getEnterprise_id()));List<UsermanageReceiverAddress> usermanageReceiverAddressList= userManageEnterpriseService.queryReceiverAddress(String.valueOf(user.getEnterprise_id()));if(null != usermanageReceiverAddressList && usermanageReceiverAddressList.size()>=10){resp.put("result", "error");resp.put("msg","添加失败，您只能保存10条收发货地址信息!");logger.info("添加失败，您只能保存10条收发货地址信息!");return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")";}//新增地址插入正式表userManageEnterpriseService.saveAddress(usermanageReceiverAddress);resp.put("result", "success");resp.put("msg", "地址保存成功!");return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")";} catch (Exception e) {logger.error(e.getMessage());resp.put("result", "error");resp.put("msg", "地址保存失败!");return jsonpCallback + "(" + JSONObject.toJSONString(resp) + ")";}}