跨域請求- JSONP 使用jQuery實作

甚麼是JSONP

The script tag method for cross-domain data fetching: JSON with Padding, or simply JSONP. - Bob Ippolito

JSONP也就是JSON with Padding，意思就是讓JSON資料添加了一些添加物(也就是function name)，主要用來解決跨域資源存取的問題，用JSONP抓到的資料並不是JSON，而是一段javascript function並包含了JSON資料的程式碼，瀏覽器在取得後不是使用JSON解析器而使用JavaScript執譯器執行並得到結果。

其實就是這篇文章的上一篇文章跨域請求 (cross domain ajax)所提到的，如果你要了解JSONP的基礎知識建議你可以先閱讀上一篇文章，本文章將繼續探討與並使用jQuery實作出更直觀且容易使用的應用。

jQuery.getJSON

jQuery.getJSON方法主要是透果GET發送請求(request)到伺服器，並將伺服器JSON格式的結果轉換成javascript的物件，在jQuery1.2版中，getJSON方法提供一個新的功能，這個功能就是讓我們能夠對其他Domain發出請求，並不需要自己撰寫動態的script標籤。

實作

前端程式碼


// getJSON example 
$.getJSON("http://localhost:8080/MemberAction.do?op=999&callback=?", function(data){console.log(data);});

後端程式碼


private ActionForward crossLogin(ActionMapping mapping,
  MemberActionForm form, HttpServletRequest request,
  HttpServletResponse response, HttpSession session) {
 
 String callback = form.getCallback();
 String membername = form.getMembername();
 System.out.println("===========================");
 System.out.println("the callback name is " + callback);
 System.out.println("===========================");
 String result = callback + "({membername:'hi " + membername + ", welcome',logintime:"
   + System.currentTimeMillis() + "})";
 
 try {
  response.getOutputStream().write(BytesUtil.toBytes(result));
 } catch (IOException e) {
  e.printStackTrace();
 }

 return null;
}

結果

伺服器輸出Log

前端console.log

我們觀察上面範例，它與同域的getJSON用法並沒有太大的差別，主要的差別在於參數callback=?，這是甚麼意思呢，回顧上一篇文章，我們在伺服器回傳了將要執行的function名稱讓前端執行，在getJSON方法中callback扮演的就是這個角色，callback=?這個參數在送出請求前jQuery會自動的產生一個沒有衝突的函數名稱取代掉?，因此後端可以取得這個parameter作為回傳的函式名稱，當後端送出回應後，getJSON第二的參數(匿名function:也就是callback)會自動的執行。

結論

透過jQuery的幫助下我們可以輕鬆的撰寫跨域的請求，$.getJSON方法並不會讓我們覺得跨域與同域寫法是不同的，它真的非常的直觀。透過這兩篇文章的學習與實作相信大家對跨域請求的解法一定非常的了解了，我也會在下一篇文章介紹代理伺服器的跨域解決方法。

ITseer - 資訊知識分享 | 程式技術討論

2012年5月30日