使用Jquery中getJSON和getScript方法實現跨域
來源：程序員人生 發布時間：2014-01-19 15:56:27 閱讀次數：3007次
一、什么是跨域？
因為javascript同源策略的限制，a.com 域名下的js腳本無法操作b.com或是c.a.com域名下的對象。
1.什么引起了ajax不能跨域請求的問題？
ajax本身實際上是通過XMLHttpRequest對象來進行數據的交互，而瀏覽器出于安全考慮，不允許js代碼進行跨域操作，所以會警告。
網上有很多解決辦法，下面介紹使用JQuery的getJSON，getScript方法處理跨域問題。
1.getScript方法動態添加腳本
<script type="text/javascript">
//JSON跨域解決getScript動態添加腳本
$.getScript(http://api.taobao.com/apitools/ajax_props.do?act=props&cid=50000436&restBool=false, function () {
var myprops = props.itemprops_get_response.item_props.item_prop;
$.each(myprops, function (index, item) {$("ul").append("<li>"+item.name+","+item.pid+"</li>") });
}
);
</script>
代碼很簡單，我貼上淘寶生成的代碼，其實就是一個簡單的賦值，把JSON賦值給props變量。
var props={"itemprops_get_response":{"last_modified":"2011-11-28 09:56:49","item_props":{"item_prop":[{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"袖長","parent_pid":0,"parent_vid":0,"pid":1627743,"sort_order":0,"status":"normal"},{"is_color_prop":false,"is_enum_prop":false,"is_input_prop":false,"is_item_prop":false,"is_key_prop":true,"is_sale_prop":false,"multi":false,"must":false,"name":"貨號","parent_pid":0,"parent_vid":0,"pid":1632501,"sort_order":0,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"板型","parent_pid":0,"parent_vid":0,"pid":1627739,"sort_order":1,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"領型","parent_pid":0,"parent_vid":0,"pid":1627746,"sort_order":2,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":true,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"風格","parent_pid":0,"parent_vid":0,"pid":32731,"sort_order":3,"status":"normal"},is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"風格細分","parent_pid":32731,"parent_vid":3267970,"pid":6900399,"sort_order":0,"status":"normal"},{"is_color_prop":true,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":true,"multi":true,"must":false,"name":"顏色","parent_pid":0,"parent_vid":0,"pid":1627207,"sort_order":5,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":true,"multi":true,"must":false,"name":"尺碼","parent_pid":0,"parent_vid":0,"pid":20503,"sort_order":12,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"面料分類","parent_pid":0,"parent_vid":0,"pid":1627766,"sort_order":17,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"面料材質","parent_pid":0,"parent_vid":0,"pid":20505,"sort_order":18,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":true,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"款式細節","parent_pid":0,"parent_vid":0,"pid":1627773,"sort_order":23,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":true,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"工藝處理","parent_pid":0,"parent_vid":0,"pid":1627776,"sort_order":26,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"消費群體","parent_pid":0,"parent_vid":0,"pid":1627780,"sort_order":28,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":false,"is_item_prop":false,"is_key_prop":false,"is_sale_prop":false,"multi":false,"must":false,"name":"價格區間","parent_pid":0,"parent_vid":0,"pid":21541,"sort_order":30,"status":"normal"},{"is_color_prop":false,"is_enum_prop":true,"is_input_prop":true,"is_item_prop":false,"is_key_prop":true,"is_sale_prop":false,"multi":false,"must":true,"name":"品牌","parent_pid":0,"parent_vid":0,"pid":20000,"sort_order":31,"status":"normal"}]}}};
如果是自己項目的話，自己在后臺構建這樣一個字符串返回就OK了。
2.用getjson的回調，獲取JSON數據
<script type="text/javascript">
$.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?",
function (data) {
var myprops = data.itemcats_get_response.item_cats.item_cat;
$.each(myprops, function (index, item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") });
}
);
</script>
這是我在本地建立的一個測試項目，不同的端口，協議，都算不同的域。不多說貼代碼，代碼其實是調用淘寶的一個API取得淘寶的商品分類信息，CID這個參數是父類的ID，頂級為0.
實際上請求的地址是:http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=jsonp1322444422697,
發送到數據接收方的地址后面一定要加上jsoncallback=?這樣的參數，且這個?是會被Jquery自動替換成回調方法的名稱。
public class GetItemCates : IHttpHandler
{
private readonly static string url = "http://gw.api.taobao.com/router/rest";
private readonly static string appkey = "12409166";
private readonly static string appsecret = "*******";
ITopClient client = new DefaultTopClient(url, appkey, appsecret, "json");
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
context.Response.ContentEncoding =System.Text.Encoding.UTF8;
string cid = context.Request["gateid"];
string callback = context.Request["jsoncallback"];
if (!string.IsNullOrEmpty(cid))
{
context.Response.Write(callback+GetItemCats(Convert.ToInt64(cid)));
}
}
public string GetItemCats(Int64 cid)
{
ItemcatsGetRequest req = new ItemcatsGetRequest();
req.Fields = "cid,parent_cid,name,is_parent,status,sort_order";
req.ParentCid = cid;
ItemcatsGetResponse response = client.Execute(req);
return "("+response.Body+")";
}
public bool IsReusable
{
get
{
return false;
}
}
}
看下返回的數據。使用getjson方法的時候應注意，發送的data數據量不能太多，否則造成url太長接收失敗。。
jsonp1322444422697({"itemcats_get_response":{"item_cats":{"item_cat":[{"cid":50017905,"is_parent":false,"name":"游戲掌機/PSP/NDSL","parent_cid":20,"sort_order":2,"status":"normal"},{"cid":50017906,"is_parent":false,"name":"家用游戲機/PS3/Wii/XBOX","parent_cid":20,"sort_order":3,"status":"normal"},{"cid":50012068,"is_parent":false,"name":"游戲手柄","parent_cid":20,"sort_order":4,"status":"normal"},{"cid":50012834,"is_parent":true,"name":"游戲軟件","parent_cid":20,"sort_order":5,"status":"normal"},{"cid":50012079,"is_parent":false,"name":"方向盤","parent_cid":20,"sort_order":12,"status":"normal"},{"cid":50012080,"is_parent":false,"name":"搖桿","parent_cid":20,"sort_order":13,"status":"normal"},{"cid":50012160,"is_parent":true,"name":"PSP專用配件","parent_cid":20,"sort_order":14,"status":"normal"},{"cid":50012161,"is_parent":true,"name":"WII專用配件/周邊","parent_cid":20,"sort_order":15,"status":"normal"},{"cid":50012162,"is_parent":true,"name":"PS2/PS3專用配件（包含PS1)","parent_cid":20,"sort_order":16,"status":"normal"},{"cid":50012163,"is_parent":true,"name":"NDSI/NDSL專用配件","parent_cid":20,"sort_order":17,"status":"normal"},{"cid":50018082,"is_parent":true,"name":"XBOX專用配件","parent_cid":20,"sort_order":21,"status":"normal"},{"cid":50018224,"is_parent":true,"name":"世嘉 DC/MD/SS/SEGA 專用配件","parent_cid":20,"sort_order":22,"status":"normal"},{"cid":50018225,"is_parent":true,"name":"任天堂NGC/FC/N64/SFC 專用配件","parent_cid":20,"sort_order":24,"status":"normal"},{"cid":50018230,"is_parent":true,"name":"任天堂掌機配件","parent_cid":20,"sort_order":25,"status":"normal"}]}}})
來源：http://zesion.cnblogs.com/
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
