前言
相信大家在寫前端腳本的時(shí)候經(jīng)常會(huì)遇到發(fā)送數(shù)據(jù)到后臺(tái)的情況，但是由于瀏覽器的限制，不同域名之間的數(shù)據(jù)是不能互相訪問的，那前端怎么和后端如何進(jìn)行數(shù)據(jù)之間的交換呢？
JavaScript由于安全性方面的考慮，不允許頁面跨域調(diào)用其他頁面的對(duì)象，那么問題來了，什么是跨域問題？
答：這是由于瀏覽器同源策略的限制，現(xiàn)在所有支持JavaScript的瀏覽器都使用了這個(gè)策略。那么什么是同源呢？所謂的同源是指三個(gè)方面“相同”：
- 域名相同
- 協(xié)議相同
- 端口相同
下面就舉幾個(gè)例子來幫助更好的理解同源策略。
| URL | 說明 | 是否允許通信 |
|---|---|---|
|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名 | 允許 |
|
http://www.a.com/a.js http://www.b.com/a.js |
不同域名 | 不允許 |
|
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名不同端口 | 不允許 |
|
https://www.a.com/a.js http://www.a.com/b.js |
同一域名不同協(xié)議 | 不允許 |
在JAVA中處理跨域問題，通常有以下兩種常用的解決方法。
第一種解決方法
后臺(tái)代碼在被請(qǐng)求的Servlet中添加Header設(shè)置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
response.setHeader("Access-Control-Allow-Origin", "*");PrintWriter out =null;try{ out = response.getWriter();} catch (IOException e){ // TODO Auto-generated catch block e.printStackTrace();}out.print("{'status':'ok'}");out.flush();out.close(); |
Access-Control-Allow-Origin這個(gè)Header在W3C標(biāo)準(zhǔn)里用來檢查該跨域請(qǐng)求是否可以被通過，如果值為*則表明當(dāng)前頁面可以跨域訪問。默認(rèn)的情況下是不允許的。
在前端JS中需要向Servlet發(fā)出請(qǐng)求，請(qǐng)求代碼如下所示：
|
1
2
3
4
5
6
7
8
9
10
|
$.ajax({ url: "your url", type:"get or post", dataType:"json", data:{ .... }, success:function(data){ ... } |
第二種解決方法
通過jsonp跨域請(qǐng)求的方式。JSONP和JSON雖然只有一個(gè)字母的區(qū)別，但是他們完全就是兩回事，很多人很容易把他們搞混。JSON是一種數(shù)據(jù)交換的格式，而JSONP則是一種非官方跨域數(shù)據(jù)交互協(xié)議。
首先來說一下前端JS是怎么發(fā)送請(qǐng)求。代碼如下所示：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$.ajax({ url:"your url", type:"get or post", async:false, dataType : "jsonp", //服務(wù)端用于接收callback調(diào)用的function名的參數(shù) jsonp:"callbackparam", //callback的function名稱 jsonpCallback:"success_jsonpCallback", success:function(data){ console.log(data); }, error:function(data){ console.log(data); }}); |
這里的callbackparam和success_jsonpCallback可以理解為發(fā)送的data數(shù)據(jù)的鍵值對(duì)，可以自定義，但是callbackparam需要和后臺(tái)約定好參數(shù)名稱，因?yàn)楹笈_(tái)需要獲取到這個(gè)參數(shù)里面的值（即success_jsonpCallback）。
下面，最重要的來了，后臺(tái)怎么樣獲取和返回?cái)?shù)據(jù)呢。代碼如下所示:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
PrintWriter out =null;String callback=req.getParameter("callbackparam");String json=callback+"({'status':'ok'})";try{ out = resp.getWriter();} catch (IOException e){ // TODO Auto-generated catch block e.printStackTrace();}out.print(json);out.flush();out.close(); |
首先需要獲取參數(shù)名為callbackparam的值，這里獲取到的值就是“success_jsonpCallback”。然后將這個(gè)值加上一對(duì)小括號(hào)。小括號(hào)里放入你需要返回的數(shù)據(jù)內(nèi)容，比如這里我返回一個(gè)JSON對(duì)象。當(dāng)然你也可以返回其他對(duì)象，比如只返回一個(gè)字符串類型數(shù)據(jù)也可以。最后前端JS返回的數(shù)據(jù)就是這樣的：
|
1
|
success_jsonpCallback({'status':'ok'}) |
瀏覽器會(huì)自動(dòng)解析為json對(duì)象，這時(shí)候你只需要在success回調(diào)函數(shù)中直接用data.status就可以了。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)服務(wù)器之家的支持。
原文鏈接：http://xieyufei.com/2016/05/28/Java-Ajax.html
