jquery中getJSON方法实现跨域

2019独角兽企业重金招聘Python工程师标准>>>

一、什么是跨域？

因为javascript同源策略的限制，a.com 域名下的js脚本无法操作b.com或是c.a.com域名下的对象。

1.什么引起了ajax不能跨域请求的问题？
ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互，而浏览器出于安全考虑，不允许js代码进行跨域操作，所以会警告。

网上有很多解决办法，下面介绍使用JQuery的getJSON方法

用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"}]}}})

转载于:https://my.oschina.net/u/858306/blog/134616