AJAX跨域访问解决方案
Case I. Web代理的方式 (on Server A)
?????? 即用戶訪問A網(wǎng)站時(shí)所產(chǎn)生的對(duì)B網(wǎng)站的跨域訪問請(qǐng)求均提交到A網(wǎng)站的指定頁面，由該頁面代替用戶頁面完成交互，從而返回合適的結(jié)果。此方案可以解決現(xiàn)階段所能夠想到的多數(shù)跨域訪問問題，但要求A網(wǎng)站提供Web代理的支持，因此A網(wǎng)站與B網(wǎng)站之間必須是緊密協(xié)作的，且每次交互過程，A網(wǎng)站的服務(wù)器負(fù)擔(dān)增加，且無法代用戶保存session狀態(tài)。
Case II. on-Demand方式 (on Server A)
???????? MYMSN的門戶就用的這種方式，不過 MYMSN中不涉及跨域訪問問題。在頁面內(nèi)動(dòng)態(tài)生成新的<script>，將其src屬性指向別的網(wǎng)站的網(wǎng)址，這個(gè)網(wǎng)址返回的內(nèi)容必須是合法的Javascript腳本，常用的是JSON消息。此方案存在的缺陷是， script的src屬性完成該調(diào)用時(shí)采取的方式時(shí)get方式，如果請(qǐng)求時(shí)傳遞的字符串過大時(shí)，可能會(huì)無法正常運(yùn)行。不過此方案非常適合聚合類門戶使用。
1: <html>
2: <head>
3: <script>
1:? 2: function loadContent()
3: { 4: var s=document.createElement('SCRIPT');
5: s.src='http://www.anotherdomain.com/TestCrossJS.aspx?f=setDivContent';
6: document.body.appendChild(s); 7: } 8: function setDivContent(v)
9: { 10: var dv = document.getElementById("dv");
11: dv.innerHTML = v; 12: } </script>
4: </head>
5: <body>
6: <div></div>
7:? 8: <input value="Click Me">
9: </body>
10: </html>
11: //其中的www.anotherdomain.com/TestCrossJS.aspx是這樣的， 12: <script runat="server">
1:? 2: void Page_Load(object sender, EventArgs e)
3: { 4: string f = Request.QueryString["f"];
5: Response.Clear(); 6: Response.ContentType = "application/x-javascript";
7: Response.Write(String.Format(@"
8: {0}('{1}');", 9: f, 10: DateTime.Now)); 11: Response.End(); 12: } </script>
點(diǎn)擊“Click Me”按鈕，生成一個(gè)新的script tag，下載對(duì)應(yīng)的 Javascript 腳本，結(jié)束時(shí)回調(diào)其中的setDivContent()，從而更新網(wǎng)頁上一個(gè)div的內(nèi)容。
Case III. iframe方式 (on Server A)
?????? 查看過醒來在javaeye上的一篇關(guān)于跨域訪問的帖子，他提到自己已經(jīng)用iframe的方式解決了跨域訪問問題。數(shù)據(jù)提交跟獲取，采用iframe這種方式的確可以了，但由于父窗口與子窗口之間不能交互（跨域訪問的情況下，這種交互被拒絕），因此無法完成對(duì)父窗口效果的影響。
在頁面內(nèi)嵌或動(dòng)態(tài)生成指向別的網(wǎng)站的IFRAME，然后這2個(gè)網(wǎng)頁間可以通過改變對(duì)方的anchor hash fragment來傳輸消息。改變一個(gè)網(wǎng)頁的anchor hash fragment并不會(huì)使瀏覽器重新裝載網(wǎng)頁，所以一個(gè)網(wǎng)頁的狀態(tài)得以保持，而網(wǎng)頁本身則可以通過一個(gè)計(jì)時(shí)器(timer)來察覺自己anchor hash的變化，從而相應(yīng)改變自己的狀態(tài)。
1. http://domain1/TestCross.html:
1: <html>
2: <head>
3: <script>
1:? 2: var url = "http://domain2/TestCross.html"
3: var oldHash = null;
4: var timer = null;
5:? 6: function getHash()
7: { 8: var hash = window.location.hash;
9: if ((hash.length >= 1) && (hash.charAt(0) == '#'))
10: { 11: hash = hash.substring(1); 12: } 13:? 14: return hash;
15: } 16: function sendRequest()
17: { 18: var d = document;
19: var t = d.getElementById('request');
20: var f = d.getElementById('alienFrame');
21: f.src = url + "#" + t.value + "<br/>" + new Date();
22: } 23:? 24: function setDivHtml(v)
25: { 26: var d = document;
27: var dv = d.getElementById('response');
28: dv.innerHTML = v; 29: } 30:? 31: function idle()
32: { 33: var newHash = getHash();
34:? 35: if (newHash != oldHash)
36: { 37: setDivHtml(newHash); 38: oldHash = newHash; 39: } 40:? 41: timer = window.setTimeout(idle, 100); 42: } 43: function window.onload()
44: { 45: timer = window.setTimeout(idle, 100); 46: } </script>
4: </head>
5: <body>
請(qǐng)求：<input> <input value="發(fā)送" /><br/>
回復(fù)：<div></div>
<iframe src="http://domain2/TestCross.html"></iframe>
</body>
</html>
2. http://domain2/TestCross.html:
1: <html>
2: <head>
3: <script>
1:? 2: var url = "http://domain1/TestCross.html"
3: var oldHash = null;
4: var timer = null;
5:? 6: function getHash()
7: { 8: var hash = window.location.hash;
9: if ((hash.length >= 1) && (hash.charAt(0) == '#'))
10: { 11: hash = hash.substring(1); 12: } 13:? 14: return hash;
15: } 16: function sendRequest()
17: { 18: var d = document;
19: var t = d.getElementById('request');
20: var f = parent;
21: //alert(f.document); //試著去掉這個(gè)注釋，你會(huì)得到“Access is denied”
22: f.location.href = url + "#" + t.value + "<br/>" + new Date();
23: } 24:? 25: function setDivHtml(v)
26: { 27: var d = document;
28: var dv = d.getElementById('response');
29: dv.innerHTML = v; 30: } 31:? 32: function idle()
33: { 34: var newHash = getHash();
35:? 36: if (newHash != oldHash)
37: { 38: setDivHtml(newHash); 39: oldHash = newHash; 40: } 41:? 42: timer = window.setTimeout(idle, 100); 43: } 44:? 45: function window.onload()
46: { 47: timer = window.setTimeout(idle, 100); 48: } </script>
4: </head>
5: <body>
請(qǐng)求：<input> <input value="發(fā)送" /><br/>
回復(fù)：<div></div>
</body>
</html>
?????? 兩個(gè)網(wǎng)頁基本相同，第一個(gè)網(wǎng)頁內(nèi)嵌一個(gè)IFRAME，在點(diǎn)擊“發(fā)送”按鈕后，會(huì)將文本框里的內(nèi)容通過hash fragment傳給IFRAME。點(diǎn)擊IFRAME里的“發(fā)送”按鈕后，它會(huì)將文本框里的內(nèi)容通過hash fragment傳給父窗口。因?yàn)槭侵桓膭?dòng)了hash fragment，瀏覽器不會(huì)重新load網(wǎng)頁內(nèi)容，這里使用了一個(gè)計(jì)時(shí)器來檢測URL變化，如果變化了，就更新其中一個(gè)div的內(nèi)容 。
Case IV. 用戶本地轉(zhuǎn)儲(chǔ)方式 (local)
IE本身依附于windows平臺(tái)的特性為我們提供了一種基于iframe，利用內(nèi)存來“繞行”的方案，即兩個(gè)window之間可以在客戶端通過windows剪貼板的方式進(jìn)行數(shù)據(jù)傳輸，只需要在接受數(shù)據(jù)的一方設(shè)置Interval進(jìn)行輪詢，獲得結(jié)果后清除Interval即可。FF的平臺(tái)獨(dú)立性決定了它不支持剪貼板這種方式，而以往版本的FF中存在的插件漏洞又被fixed了，所以FF無法通過內(nèi)存來完成暗渡陳倉。而由于文件操作FF 也沒有提供支持（無法通過Cookie跨域完成數(shù)據(jù)傳遞），致使這種技巧性的方式只能在IE中使用。
Case V: （其實(shí)還是在服務(wù)端A用iframe解決了與服務(wù)器B通信的問題）
要解決的問題：發(fā)生在用戶提交網(wǎng)頁 URL （還包括 Tag, Notes 等）給 Bookmark 服務(wù)器時(shí)。
關(guān)于 URL 的提交至少可以有三種方式：
1.?????? 登陸 Bookmark 服務(wù)器的提交頁面，將要收藏的 URL 通過該頁面提交給服務(wù)器。
2.?????? 安裝瀏覽器插件，通過插件將 URL 提交給服務(wù)器。
3.?????? 從 Bookmark 服務(wù)器動(dòng)態(tài)加載 javascript 小工具到當(dāng)前頁面，通過它來完成提交工作。
??? 第一種方式開發(fā)起來最簡單，但對(duì)用戶來講比較麻煩，每次都需要先登陸 Bookmark 服務(wù)器才能完成提交；第二種方式我并不熟悉插件開發(fā)，而且用戶也不喜歡太多的插件堆滿自己的瀏覽器；第三種方式開發(fā)難度小，又避免了每次登陸服務(wù)器的麻煩，所以最終采用它。第三種方式中動(dòng)態(tài)加載的 javascript 小工具除了需要生成 UI 供用戶填寫信息（ URL ， tag ， notes 等），當(dāng)用戶點(diǎn)擊提交的時(shí)候，還要完成與服務(wù)器通信的功能。
???? 跨域訪問，簡單來說就是 A 網(wǎng)站的 javascript 代碼試圖訪問 B 網(wǎng)站，包括提交內(nèi)容和獲取內(nèi)容。由于安全原因，跨域訪問是被各大瀏覽器所默認(rèn)禁止的。寫過跨域訪問 ajax 的朋友相信都遇到過被告知“沒有權(quán)限”的情況。通過 XMLHttp 來發(fā)送數(shù)據(jù)給 Bookmark 服務(wù)器的嘗試失敗了。于是，看到網(wǎng)上的一些資料，我又開始嘗試用 javascript 小工具在用戶網(wǎng)頁動(dòng)態(tài)創(chuàng)建一個(gè)隱藏的 iframe, iframe 的 src 指向服務(wù)器的一個(gè) servlet ，試圖通過調(diào)用 iframe 中提供的 javascript 來完成與服務(wù)器的通信。但不幸的是，用戶網(wǎng)頁中的 javascript 代碼訪問 iframe 也被瀏覽器歸為跨域訪問（特指 iframe 的 src 指向其它網(wǎng)站的情形），嘗試再次失敗。
最終，在一篇文章中看到，與 iframe 不同，如果 A 網(wǎng)站從 B 網(wǎng)站加載 javascript ， A 網(wǎng)站可以自由的訪問該 javascript 的內(nèi)容，并不會(huì)被瀏覽器認(rèn)為是跨域訪問。模仿剛才 iframe 的思路，當(dāng)用戶點(diǎn)擊提交時(shí)，可以動(dòng)態(tài)創(chuàng)建一個(gè) javascript 對(duì)象，該對(duì)象的 src 指向 Bookmark 服務(wù)器的一個(gè) servlet ，注意： URL 、 Tag 、 Notes 、 User 、Password 等信息被作為 src URL 參數(shù)傳給服務(wù)器。請(qǐng)看下面的代碼：
?
1: var url = "http://localhost:8080/Deeryard/BookmarkServlet?" +
2:? 3: "url=" + url_source + "&" + "title=" + title + "&" +
4:? 5: "tag=" + tag + "&" + "notes=" + notes + "&" + "user=" + user + "&" + "password=" + password;
6:? 7: url = encodeURI(url); 8:? 9: //Submit to server with a trick
10:? 11: var js_obj = document.createElement( "script" );
12:? 13: js_obj.type = "text/javascript" ;
14:? 15: js_obj.setAttribute( "src" , url);
16:? 17: //Get response from server by appending it to document
18:? 19: document.body.appendChild(js_obj); 20:? ??????? 上面例子中， js_obj.setArrribute() 將信息作為 src 的 URL 參數(shù)提交給了 Bookmark servlet 。那么用戶又如何取得服務(wù)器的響應(yīng)信息呢？答案就是最末一行代碼， servlet 的輸出必須是 javascript 代碼，它可以調(diào)用用戶網(wǎng)頁上的其他 javascript 函數(shù)，以及操作 dom 對(duì)象。下面的 servlet 代碼生成了一個(gè) javascript 函數(shù)調(diào)用：
out.write("onServerResponse(INADEQUATE_INFORMATION);");
document.body.appendChild(js_obj) 執(zhí)行后 onServerResponse( INADEQUATE_INFORMATION) 就會(huì)得到執(zhí)行，使客戶網(wǎng)頁響應(yīng)服務(wù)器結(jié)果。這樣一個(gè)完整的通信過程就完成了。
CaseVI:Tomcat + PHP + HTML(含JS)(on Server A)
服務(wù)器A上已經(jīng)裝好了Tomcat, 我們寫一個(gè)test.html(含JS)，再寫一個(gè)PHP文件（由其來完成跨域通信要求）。
轉(zhuǎn)載于:https://www.cnblogs.com/sunBolg/archive/2012/09/13/2683914.html
總結(jié)
以上是生活随笔為你收集整理的AJAX跨域访问解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sql server 2008学习10
- 下一篇： ThinkPHP基础概念