使用Jquery中getJSON和getScript方法实现跨域-CSDN博客

一、什么是跨域？

因为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;
            }
        }
    }