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

這兩天需要實現第三層網域名直接url rewrite到網站靜態頁面，如 http://123.456.789.com/ UrlRewrite到http://www.789.com/news/123.html

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

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

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

首先講講我這個頁面吧，這個頁面是通過程式將本來動態呈現的東西進行了靜態化，但是靜態化頁面裡邊又必須顯示一些變化的資訊，這裡很多人可能會想到使用IFRAME來解決，但是這樣的解決辦法不是我想使用的，1.IFRAME比起其它方法，效率低，2.IFRAME對爬行蜘蛛不友好。所以我這裡最開始是使用JQUERY的load函數還直接去請求動態網頁面然後將返回來的動態資訊顯示在靜態化頁面裡。好了，講到這裡可能有些朋友已經知道為什麼這篇日記的名字叫“jquery跨域訪問問題”了。

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

繼續Google，很多人推薦jquery getJson使用回呼函數解決，關於原理等解決了再慢慢研究，呵呵繼續搜http://blog.ossxp.com/2010/02/462/這篇文章很好給了我很大協助，直接在自己項目中還是依葫蘆畫瓢。問題解決！

　html頁面　jquery代碼
複製代碼 代碼如下:
$.getJSON("http://www.789.com/project/ajax.php?Action=head&callback=?",
function(data){ // 往後台傳遞的參數1;
var html = decodeURI(data.str)
$('#head').html(html); //調用用來顯示內容的div
});

伺服器端PHP代碼
複製代碼 代碼如下:
$str = "<ul>
this is test
</ul>";
$arr['str'] = $str;
$json = json_encode($arr); //用Json_encode函數處理php的數組
echo $_GET['callback']."(".$json.")";

到此通過第三層網域名URLREWRITE到靜態化頁面跨域訪問伺服器動態類容問題圓滿解決！