在移動App、移動網站或者PC Web網站中,經常會遇到Ajax跨域到后台獲取數據。今天給大家介紹在Angular.js中如何通過$http.jsonp跨域到Java后台Servlet中獲取數據。
一、同源策略
在web頁面的開發中我們經常會說起腳本的跨域訪問的問題,這個問題的始作俑者就是javascript語言安全限制中的同源策略(same-origin policy )所造成的。這一策略對於JavaScript代碼能夠訪問的頁面內容做了很重要的限制,即JavaScript只能訪問與包含它的文檔在同一域下的內容。
所謂同源是指,域名,協議,端口相同,同源策略簡單的說就是一段腳本只能讀取來自於同一來源的窗口和文檔的屬性,這里的同一來源指的是主機名、協議和端口號的組合。
二、比較JSON和JSONP
JSON和JSONP是完全不一樣的,首先JSON是眾多數據存儲格式中的一種。JSONP是一種特殊的通訊方式,使用它能夠輕松繞過瀏覽器的同源安全限制,達到加載來自不同源的資源(腳本, 圖片, 其他)的效果,實現跨域。
需要注意的是,使用JSOPN有潛在的安全隱患,因為JSONP允許后端服務調用應用的JavaScript,使站點變得脆弱的同時,還可能暴露用戶隱私。
三、具體實現
1、客戶端:
$http.jsonp(url+"?callback=JSON_CALLBACK").success(function(data){});其中url是服務端的地址,data是服務端發給客戶端的數據。
例如:
$http.jsonp("http://192.168.1.101:8080/HungryServer/GetAllServlet?callback=JSON_CALLBACK").success(function(data){
$scope.foods=data;
}).error(function(data){
alert("error"+data);
}).finally(function(){
alert("finally");
});
2、服務端
public class GetAllServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
public void doGet(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException {
String callback=request.getParameter("callback");
/**
*編寫從后台獲取數據的代碼,一般是數組或者鍵值對集合。
*其中的jsonData是從后台獲取數據。
**/
response.setContentType("text/html; charset=utf-8");
PrintWriterout=response.getWriter();
out.print(callback+"("+jsonData+");");
out.flush();
out.close();
}
@Override
public void doPost(HttpServletRequest request, HttpServletResponseresponse)
throws ServletException, IOException {
doGet(request, response);
}
}