用jquery的ajax跨域請求

來源:互聯網
上載者:User

 業務需求:一台獨立的新聞伺服器(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 群,一起探討。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.