快捷導(dǎo)航

jquery 跨域訪問問題解決方法(筆記)

更新時間：2011年06月08日 01:26:48 作者：

對于js跨域訪問，在先前也曾碰到過，但可能并沒有認真去對待，可能查看過相關(guān)資料，但當著兩天再次碰到這個問題時，走了不少彎路才找到問題原因。記下這次解決過程，為自己不再強大的記憶力默哀一下。

這兩天需要實現(xiàn)三級域名直接url rewrite到網(wǎng)站靜態(tài)頁面，如 http://123.456.789.com/ UrlRewrite到http://www.789.com/news/123.html

說到這里，也許和js跨域訪問沒有半點關(guān)系，在腦海里排列這的問題都是和UrlRewrite相關(guān)的。好吧現(xiàn)在URLRewrite一切就緒，直接在瀏覽器地址欄中輸入http://123.456.789.com/ 會發(fā)現(xiàn)，這個在地址欄直接通過http://www.789.com/news/123.html來訪問的頁面出現(xiàn)了異常，網(wǎng)頁上的圖片和樣式還有JS好像都失去了作用。

看看兩個地址欄中的URL，突然拍拍自己腦袋，有點思路了。原來這個頁面的源代碼中對圖片、CSS、JS 都是通過相對路徑來請求的。當然這在直接訪問http://www.789.com/news/123.html的路徑是不會有問題的，但是當使用http://123.456.789.com/訪問后看看地址欄兩個URL 明顯路徑已經(jīng)完全不一樣了，比如images/1.gif 在1中相當于請求http://www.789.com/news/1.gif 而再2中變成什么http://123.456.789.com/images/1.gif很顯然這個圖片你是永遠也請求不到。因為這個路徑下你永遠也找不到這個圖片。好了為了簡便，我們不用網(wǎng)上別人介紹的很多種方法，就用絕對路徑解決吧。好的，一切看起來這么的自然，這么的暢快。但是真正的麻煩還在后邊。

一直到這里，好像和我們的標題都不搭噶。別急，問題總是解決一個再冒出第二個。

首先講講我這個頁面吧，這個頁面是通過程序?qū)⒈緛韯討B(tài)呈現(xiàn)的東西進行了靜態(tài)化，但是靜態(tài)化頁面里邊又必須顯示一些變化的信息，這里很多人可能會想到使用IFRAME來解決，但是這樣的解決辦法不是我想使用的，1.IFRAME比起其它方法，效率低，2.IFRAME對爬行蜘蛛不友好。所以我這里最開始是使用JQUERY的load函數(shù)還直接去請求動態(tài)頁面然后將返回來的動態(tài)信息顯示在靜態(tài)化頁面里。好了，講到這里可能有些朋友已經(jīng)知道為什么這篇日記的名字叫“jquery跨域訪問問題”了。

首先看看 jquery load函數(shù)里我的參數(shù)$("#head").load("http://www.cnblogs.com/project/ajax.php"{"Action":"head"}); 當然通過上邊的教訓已經(jīng)將參數(shù)換成了$("#head").load("http://www.789.com/project/ajax.php"{"Action":"head"}); 但是還是出現(xiàn)了“jquery.js 138行無權(quán)訪問”直接跑去查看juqery138行哄哄原來是load函數(shù)這里出問題（沒看懂源碼，說實話太折磨人了，一堆壓縮后的JS代碼看得人想死）好吧去網(wǎng)上谷歌一下，有幾個人的答案引起了我的注意。他們都說這是JS跨域操作的問題。而本身JS是無法直接跨域操作的。再聯(lián)系自己三級域名URLRewrite 再想想跨域的問題，三級域名下所在的域是789 下的456 下的123 而本身請求的是789.com域名下所以這不是跨域是什么呢？豁然開朗。我確定我找到問題所在了。

繼續(xù)谷歌，很多人推薦jquery getJson使用回調(diào)函數(shù)解決，關(guān)于原理等解決了再慢慢研究，呵呵繼續(xù)搜http://blog.ossxp.com/2010/02/462/這篇文章很好給了我很大幫助，直接在自己項目中還是依葫蘆畫瓢。問題解決！

　html頁面　jquery代碼

復(fù)制代碼代碼如下:

 
$.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?", 
function(data){ // 往后臺傳遞的參數(shù)1; 
var html = decodeURI(data.str) 
$('#head').html(html); //調(diào)用用來顯示內(nèi)容的div 
}); 

服務(wù)器端PHP代碼

復(fù)制代碼代碼如下:

 
$str = "<ul> 
this is test 
</ul>"; 
$arr['str'] = $str; 
$json = json_encode($arr); //用Json_encode函數(shù)處理php的數(shù)組 
echo $_GET['callback']."(".$json.")"; 

到此通過三級域名URLREWRITE到靜態(tài)化頁面跨域訪問服務(wù)器動態(tài)類容問題圓滿解決！

您可能感興趣的文章: