業務需求:一台獨立的新聞伺服器(A),對外提供新聞。 客戶(B)網頁引入A的js,即可請求新聞。
B請求新聞所產生的頁面有A的js產生。
A提供<script type="text/javascript" src="http://newsdomain/js/news.js" > </script> 來讓B 引入。
一般的ajax無法跨域請求,jquery的 $.ajax 也是如此。均提示訪問被拒絕。這是由於瀏覽器對javascript的安全機製造成的。請求時 伺服器可以得到響應並產生資料,但無法跨域返回給B。查了很多資料,Jquery的jsonp可以實現跨域請求和響應。但是網上的寫法各不相同,甚至不全面,經過多番研究得以實現。我將用戶端的寫法和服務端的寫法寫出來,與各位同仁一起分享。
首先js的寫法。news.js中
function requestNews(page,key,from,to,sort,language){
$.getJSON("http://"+domain+"/requestNews/getNews?mehtod=splitPage&page="+page+"&key="+k+"&from="+from+"&to="+to+"&sort="+sort+"&language="+language+"&jsonpcallback=?",null,function call(json){
alert(json.info);
});
}
大家有發現這個url有些特別http://******?參數=值jsonpcallback=? 。這種寫法是jsonp的寫法。jquery就是通過jsonpcallback=? 這個參數找到回呼函數function call(json) 的。所以請求中必須加jsonpcallback=?。
在伺服器端會接收jsonpcallback這個值。jquery會把那個?做處理,jsonpcallback=jsonp1287199309053。
$.getJSON這個函數的的參數寫法你可以去查一下。$.getJSON(地址,資料,回呼函數)
由於我的資料已經與url合并,所以我的第二個參數為null,不寫也可。
下面說伺服器端對請求的資料如何處理和返回。重點只有兩個。
1,json資料格式。2,為了讓回呼函數可以接受傳回值,其寫法特被。
第一json資料格式{name:value}.詳細的自己去查。
第二。服務端一定要接收jsonpcallback=?
String callBack = req.getParameter("jsonpcallback");
String strJson = {"info":"aaaa"};
String result = callBack (strJson);// 這裡很重要。
列印出來的結果就是
jsonp1287199543662({"info":"aaaa"}) //這裡要看清楚。
重點講完了,最後一點就是返回
resp.setContentType("application/json;charset=UTF-8"); //這裡的格式是json
resp.setHeader("Cache-Control","no-cache");
PrintWriter out = resp.getWriter();
out.print(callBack); // 這是是print 不是write。
out.close();
這樣就實現了ajax跨域訪問。 很多事情做出來的時候再回想感覺特簡單,當你摸索的過程中卻雲裡霧裡 也很煩惱,尤其在網上查到的各種方法都無效的時候 ,煩。 其實就這麼簡單,如果你有什麼疑問歡迎你加入我的QQ 群,一起探討。