jquery中getJSON方法實現跨域

1、什麼是跨域?

由於javascript同源策略的限制,a.com 域名下的js腳本沒法操做b.com或是c.a.com域名下的對象。 javascript

1.什麼引發了ajax不能跨域請求的問題?
ajax自己其實是經過XMLHttpRequest對象來進行數據的交互,而瀏覽器出於安全考慮,不容許js代碼進行跨域操做,因此會警告。
java

網上有不少解決辦法,下面介紹使用JQuery的getJSON方法 ajax

用getjson的回調,獲取JSON數據 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. api

 實際上請求的地址是: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"}]}}})
相關文章
相關標籤/搜索