我制作了一些访问JSON文件的代码,提取对象并使用jquery附加html这是使用CORS完成的。除了IE 8和9之外,这在所有方面都很完美。
我读到XDomainRequest是实现这项工作的方法,但我不知道怎么做。 任何帮助表示赞赏。
请不要担心html1,click1等 - 一切都在整个文件中应该如何运作。我只需要帮助XDomainRequest。
if(window.XDomainRequest){
var xdr = new XDomainRequest();
xdr.open("get", "[link_to_JSON_on_different_server]");
xdr.send();
} else {
$.getJSON("[link_to_JSON_on_different_server]",function(data){
if (click2){
var href2 = click2 + encodeURIComponent(data.fuse[0].link);
}else{
var href2 = data.fuse[0].link;
}
if (click3){
var href3 = click3 + encodeURIComponent(data.fuse[1].link);
}else{
var href3 = data.fuse[1].link;
}
$('#title').append('<a href="'+href2+'">'+data.fuse[0].title+'</a>');
$('#favicon').append('<img style="padding-right:10px;max-width: 16px;" src="http://'+data.fuse[0].domain+'/favicon.ico"> '+data.fuse[0].domain+' ');
$('#content').append(data.fuse[0].content);
$('#read').append('<a href="'+href2+'">Read More ></a>');
$('#title1').append('<a href="'+href3+'">'+data.fuse[1].title+'</a>');
$('#favicon1').append('<img style="padding-right:10px;max-width: 16px;" src="http://'+data.fuse[1].domain+'/favicon.ico"> '+data.fuse[1].domain+' ');
$('#content1').append(data.fuse[1].content);
$('#read1').append('<a href="'+href3+'">Read More ></a>');
});
}
编辑:
我无法使用JSONP。
我没有收到错误。我的问题是如何使用XDomainRequest提取数据,就像我使用getJSON一样?
更新后的代码:
if(window.XDomainRequest){// 1. Create XDR object:
var xdr = new XDomainRequest();
xdr.onload = function() {
var responseText = xdr.responseText;
// TODO handle success response here.
obj = JSON.parse(xdr.responseText);
$('#title').append('<a href="'+href2+'">'+obj.fuse[0].title+'</a>');
alert('success');
};
xdr.onerror = function() {
// The request has failed. No specific information will be provided by XDR unfortunately.
alert('fail');
};
xdr.open("get", "[link_to_JSON_on_different_server]");
xdr.send();
} else {
$.getJSON("[link_to_JSON_on_different_server]",function(data){
if (click2){
var href2 = click2 + encodeURIComponent(data.fuse[0].link);
}else{
var href2 = data.fuse[0].link;
}
if (click3){
var href3 = click3 + encodeURIComponent(data.fuse[1].link);
}else{
var href3 = data.fuse[1].link;
}
$('#title').append('<a href="'+href2+'">'+data.fuse[0].title+'</a>');
$('#favicon').append('<img style="padding-right:10px;max-width: 16px;" src="http://'+data.fuse[0].domain+'/favicon.ico"> '+data.fuse[0].domain+' ');
$('#content').append(data.fuse[0].content);
$('#read').append('<a href="'+href2+'">Read More ></a>');
$('#title1').append('<a href="'+href3+'">'+data.fuse[1].title+'</a>');
$('#favicon1').append('<img style="padding-right:10px;max-width: 16px;" src="http://'+data.fuse[1].domain+'/favicon.ico"> '+data.fuse[1].domain+' ');
$('#content1').append(data.fuse[1].content);
$('#read1').append('<a href="'+href3+'">Read More ></a>');
});
}
答案 0 :(得分:1)
在使用XDomainRequest时,您可能不确定如何处理服务器响应,因为我发现代码中没有错误。正如我在评论中提到的,XDomainRequest的API是XMLHttpRequest提供的API的一个子集。因此,要获取响应,您的代码应如下所示:
var xdr = new XDomainRequest();
xdr.onload = function() {
var responseText = xdr.responseText;
// TODO handle success response here.
};
xdr.onerror = function() {
// The request has failed. No specific information will be provided by XDR unfortunately.
};
xdr.open("get", "[link_to_JSON_on_different_server]");
xdr.send();
答案 1 :(得分:0)
XDomainRequest是让它工作的方法。如果您使用的是jQuery 1.5或更高版本,我建议您使用以下脚本。
https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest
这个脚本在IE 8和9中透明地将对CORS的支持添加到$ .ajax。只需将它放在jQuery脚本之后的某个地方并观察它是否正常工作。
jQuery不支持开箱即用的XDomainRequest(http://bugs.jquery.com/ticket/8283)但是从jQuery 1.5开始,你可以定义一个自定义传输来处理IE 8中的CORS&amp; 9。
答案 2 :(得分:0)
您可以使用jQuery插件jquery-transport-xdr在IE8 / 9中启用 CORS 请求。