CODEWITHSUNDEEP
javascriptjqueryjsonxdomainrequest
user1242345
user1242345

Reputation: 67

How do i use XDomainRequest? Trying to access JSON cross domain Cors working for everything but IE

I made some code that accesses a JSON file, extracts the objects and using jquery to append the html This is done using CORS. This works perfect in everything but IE 8 and 9.

I read that XDomainRequest is the way to go to make this work but i have no idea how. Any Help is appreciated.

Please don't worry about the html1, click1 etc - everything works how it should in the complete file. I just need help with the 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>');
    });
}

EDITS:

I can't use JSONP.

I don't get an error. My problem is how do i extract the data using XDomainRequest, like i do with getJSON?

UPDATED CODE:

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>');
         });
         }

Upvotes: 2

Views: 3491

Answers (3)

Gordon Freeman
Gordon Freeman

Reputation: 911

You can use jQuery plugin jquery-transport-xdr to enable CORS requests in IE8/9.

Upvotes: 0

jcruz
jcruz

Reputation: 718

XDomainRequest is the way to make it work. If you are using jQuery 1.5 or better, I suggest you use the following script.

https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest

This script transparently adds support for CORS to $.ajax in IE 8 and 9. Just drop it in somewhere after your jQuery script and watch it work.

jQuery doesn't support XDomainRequest out of the box(http://bugs.jquery.com/ticket/8283) but as of jQuery 1.5 you can define a custom transport to handle CORS in IE 8 & 9.

Upvotes: 0

Ray Nicholus
Ray Nicholus

Reputation: 19890

It seems like you may be unsure how to get a handle on the server response when using XDomainRequest, since I see no errors in your code. As I mentioned in my comment, the API for XDomainRequest is a subset of that provided by XMLHttpRequest. So, to grab the response, your code should look something like this:

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();

Upvotes: 1

Related Questions