使用Jquery中getJSON方法實現跨域
一、什么是跨域？
因為javascript同源策略的限制，a.com 域名下的js腳本無法操作b.com或是c.a.com域名下的對象。
Ajax的應用中，由于安全的問題，瀏覽器默認是不支持javascript跨域調用的。
1.主域相同，子域不同，如xxx.aaa.com和yyy.aaa.com
2.域名相同，端口不同，如xxx.aaa.com:8000和xxx.aaa.com
3.域名相同，協議不同，如http://www.aaa.com/和https://www.aaa.com/
4.主機相同，用ip和域名的，http://127.0.0.1/和http://localhost/
都是會造成跨域的。網上有很多解決辦法，下面介紹使用JQuery的getJSON方法處理跨域問題。
二、使用Jquery的$.getJSON方法處理跨域的例子
客戶端http://www1.aaa.com/aaa.aspx（遞交數據到www2.aaa.com的bbb.aspx頁）
<html>
<head><title>演示</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script type="text/javascript">
var url="http://www2.aaa.com/bbb.aspx?action=add&callback=?";
var data={username:"sanjer",userid:"110"};
//或者這樣
//var _username="sanjer";var _userid="110";var data={username:_username,userid:_userid};
$.getJSON(url,data,function(backdata){
alert(backdata);
});
</script>
</body>
</html>
服務器端http://www2.aaa.com/bbb.apsx后臺程序接收收來自www1.aaa.com/aaa.apsx頁發送的數據
C#
string action=Request.QueryString.Get("action");
string callback=Request.QueryString.Get("callback");
//Jquery經過自己的處理后
//1.將callback=?的問號替換為回調方法的名稱2.將data里的數據附加到url后面
//發送出去的請求會其實會變成
//http:www2.aaa.com/bbb.aspx?action=add&callback=JQUET0988002&username=sanjer&userid=110
//所以客戶端發送的data數據還是通過QueryString接收
string username=Request.QueryString.Get("username");
string userid=Request.QueryString.Get("userid");
至此把從aaa.aspx頁面通過js發送的數據跨域遞交到bbb.aspx了，如果還需要bbb.aspx處理后再把另外一些結果數據返回給aaa.aspx怎么做呢?
服務器端http://www1.aaa.com/bbb.apsx
C#
//...處理一些邏輯內容后接下來要返回數據給js
string backjsondata="({'usersex':'男','useraddress':'北京市海淀區'})";
//要將返回的數據封成json格式的字符串，具體的上百度上查下json的數據格式
//簡單的寫法就是({'變量名':'變量值'})
//多個的話寫成({'變量名1':'變量值1','變量名2':'變量值2',.....})
string mybackdata=callback+backjsondata;
//這里callback變量一定要返回回去，并把已包裝成JSON的格式({'usersex':'男'})的json字符串和callback一并返回
Response.Write(mybackdata);
Response.End();
客戶端aaa.aspx頁面的回調函數里讀取usersex和useraddess數據
$.getJSON(url,data,function(backdata){
alert(backdata.usersex);
alert(backdata.useraddress);
});
//客戶端可以這樣直接讀取服務器端返回來的json數據內容
這里有幾點需要總結注意一下：
1.發送到數據接收方的地址后面一定要加上callback=?這樣的參數，且這個?是會被Jquery自動替換成回調方法的名稱。（在Jquery1.4中可以自己指定回調方法的名稱了）
2.注意js腳本發送數據的data不能寫成var data="{'username':'sanjer','userid':'110'}";而是要寫成var data={username:'sanjer',userid:'110'}，這點要注意。要想接收服務器端返回的數據必須服務器端封裝數據為JSON格式字符串并和callback值一道返回。(請仔細看上面的示例代碼）。
3.由于調用Jquery的$.getJSON方法時，Jquery有自己的處理，實際上通過script的scr請求的（具體不說了,Jquery做了就不管了），但要知道，數據最終還是通過url后面通過get方式發送數據出去的，這就決定了，發送的data數據量不能太多，否則造成url太長接收失敗（getJSON方式是不可能有post方式遞交的）。
4.如果真需要跨域發送大數據量就不要用jquery提供的getJSON方法了，得尋求其他法子，具體的做法我打算在下篇文章中寫一下。
5.以上的例子是站在兩方面的開發都由你掌控的前提下的。且要注意服務器程序端的安全系數不高（建議數據接收端這邊不要放重要、敏感的邏輯處理單元）。
第一次寫博客，以上文字難免有錯誤或遺漏，望各位看官包涵。聊以為一給自己備忘，二給不大清楚跨域處理的朋友推薦下getJSON的使用。
浙公網安備 33010602011771號