使用Jquery中getJSON和getScript方法实现跨域
来源：程序员人生 发布时间：2014-01-19 15:56:27 阅读次数：2806次
一、什么是跨域？
因为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/
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
