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方式調用的）。

1、頁面請求

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);
}
});
}

2、服務器響應

/**
* 新增收發貨地址信息
* @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")
@ResponseBody
public 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) + ")";
}
}