jQuery 1.3.1 Ajax Cross Domain JSP Demo

日期：
一般Ajax 是無法跨網域呼叫的，不過有兩個方法可以逹到跨網域呼叫：
  1. 使用伺服器端讀取遠端檔案
  2. 使用<script src="remote file">的語法
第一種方法很簡單，用java.net.URL寫一個取得遠端content的proxy即可。
第二種方法，jQuery已將<script src="remote file">包裝在$.ajax之內，
並在 jQuery 的 API 內就有 demo 了，而使用的限制就是遠端回傳的content必需是jsonp的物件。
jQuery知道jsonp必需回傳一個function name，在本地端也必需有相對應的function name，
寫程式最麻煩的就是命名了，所以jQuery在$.getJSON(url,function(data){})的url參數內幫我們把call back所需的命名做了簡易的處理，
當jQuery在url參數內找到xxx=?這個參數，便會自動幫我們產生一個獨特的function name，
並將function name賦值給xxx傳出，此function name在本地端也會有實體化，
就是function(data){}的這個隱名函式，所以當我們使用$.getJSON這個方法時，
不用再為每個jsonp的call back想一個名字，實在方便很多，請看以下的簡易範例程式碼：

呼叫端（the_url 請改為您自己的server）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsonp</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <script type="text/javascript">
$(document).ready(function(){
 var the_url='http://www.yahoo.tw/json.jsp?callback=?';
 $.getJSON(the_url,function(data){
  $('#demo_content').html('<a href="'+data.link+'" mce_href="'+data.link+'" target="_blank">'+data.title+'</a>
\n');
  for(var i=0;i<data.items.length;i++){
   $('#demo_content').append('feed:<a href="'+data.items[i].link+'" mce_href="'+data.items[i].link+'" target="_blank">'+data.items[i].title+'</a>
\n');
  }
 });
});
</script> </li>
</ol>
<body>
  <div id="demo_content"></div>
</body>
 </html>

遠端被呼叫端：

<%@page contentType="application/x-javascript; charset=utf-8" errorPage=""%>
<%
out.clear();
String callback=(request.getParameter("callback")==null)?"":request.getParameter("callback");
//callback的開頭必須為英文字元，整個callback只允許長度25的英數字元
if(!callback.matches("^[a-zA-Z]{1}[a-zA-Z0-9]{0,24}$")){
 //所有不符合規則的callback都設為空字串，以免javascript發生錯誤
 callback="";
}
pageContext.setAttribute("callback",callback);
%>${callback}({
  "title": "walkOne - RSS 2.0",
  "link": "http://www.walkone.tw/",
  "description": "walkOne - RSS 2.0",
  "modified": "2009-02-23T09:55:26Z",
  "generator": "http://www.walkone.tw/",
  "items": [{
    "title": "開發者日誌",
    "link": "http://www.walkone.com.tw/blog/index.jsp?user_id=test"
  }]
})

留言

張貼留言