在移動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);

    }

}