一般Ajax 是無法跨網域呼叫的，不過有兩個方法可以逹到跨網域呼叫：


    
  1. 使用伺服器端讀取遠端檔案
    2. 
  2. 使用<script src="remote file">的語法
    3. 


第一種方法很簡單，用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><mce: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"></mce:script><mce: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><br />\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><br />\n');		}	});});</mce:script></head><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"  }]})


arrow
arrow
    全站熱搜

    gan068 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄