使用Jquery中getJSON和getScript方法实现跨域

 

一、什么是跨域？

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