unable to load xml from external file using jQuery

Question

I'm trying to load external xml using the following code but it is not working

$( document ).load( "data.xml", function(  response, status, xhr ) {        
    console.log( xhr.status + " " + xhr.statusText );
  });

I have both data.xml and js file in same folder.

In chrome it returns 404 error.

In FF it retuns 0 [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)".

I couldn't understand why this happens? Please shed some light on this issue.

Updates: I gave a shot using $.get() as mentioned below but still no success.

Meanwhile I also gave a try using pure js like below

function loadXMLDoc(dname) {
    if (window.XMLHttpRequest)    {
      xhttp=new XMLHttpRequest();
      }
    else {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xhttp.open("GET",dname,false);
    xhttp.send();
    return xhttp.responseXML;
}
    xmlDoc=loadXMLDoc("data.xml");
    console.log(xmlDoc);

Still facing errors.

Error in FF: NS_ERROR_DOM_BAD_URI: Access to restricted URI denied [Break On This Error]

xhttp.send();

and

Error in chrome: XMLHttpRequest cannot load file:///C:/Users/admin/Desktop/public_html%281%29/public_html/data.xml. Cross origin requests are only supported for HTTP. xml.js:13 Uncaught NetworkError: A network error occurred.

Updates: I found this question useful, but is there any way to solve this problem?

First, you almost certainly want to use .get() and not .load() here. — Pointy
– Pointy, Commented Nov 8, 2013 at 18:24
@KevinB Then do I need to use any element? for example $('#someid').load(.. please correct me if I meant wrong? — Praveen
– Praveen, Commented Nov 8, 2013 at 18:26
@Pointy I tried using .get() but it is not logging console messages. — Praveen
– Praveen, Commented Nov 8, 2013 at 18:30
I hope you're using a local webserver to test this. Looking at your console error outputs I see you're trying to get a file from the file:// protocol when it should be a relative path from the root folder which then uses http:// protocol. — Tim Vermaelen
– Tim Vermaelen, Commented Nov 8, 2013 at 19:18

Community · Accepted Answer · 2017-05-23 12:18:30Z

1

Maybe this is what you are looking for....

$(document).ready(function(){
    $.ajax({
        url: 'data.xml',
        dataType: 'xml',
        success: function(response, status, xhr){
           console.log( xhr.status + " " + xhr.statusText );
        }
     });
});

UPDATE

Read this post

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Nov 8, 2013 at 18:26

zgood

12.7k2 gold badges27 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Praveen Over a year ago

I tried it but it is not working. I'm not getting any consoles messages.

Praveen Over a year ago

Nope, this is not working. Same behavior but to see for error I tried

$.ajax({         url: 'data.xml',         dataType: 'xml',         success: function(response, status, xhr){            console.log( xhr.status + " " + xhr.statusText );         }, 		error: function (response, status, xhr){            console.log( xhr.status + " " + xhr.statusText );         }      });

Now it logs undefined undefined means still error.

Kevin B Over a year ago

@PraveenJeganathan Doing it the way you're currently doing it doesn't work either does? the way in this answer is far more correct than what you're currently doing. You should use this answer and add an error callback, then console.log the three arguments from the error callback. Most likely the xml is invalid.'

Kevin B Over a year ago

The third parameter of error: is not an xhr, it's a string. therefore of course you're getting undefined. Log it whole.

Praveen Over a year ago

@KevinB I tried whole like error: function (response, status, err){ console.log( err ); } but only empty log prints.

|

Community · Accepted Answer · 2017-05-23 10:25:00Z

1

After a long struggle and with the help of community I figured out the issue.

The same-origin policy restricts how a document or script loaded from one origin can interact with a resource from another origin.

Means this is not possible with the system file, so with the help of this answer, I used WAMPServer to run my script and it worked like a charm.

 $.get("http://localhost/public_html(1)/public_html/xml/data.xml",
                                     function(  response, status, xhr ) {        
        console.log( response );
    });

Thank you!

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Nov 8, 2013 at 19:20

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

Tim Vermaelen Over a year ago

Looked at it for 5 mins and saw it right away, setting up a localhost is the way to go with these kind of things ^^

Collectives™ on Stack Overflow

unable to load xml from external file using jQuery

2 Answers 2

17 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

17 Comments

1 Comment

Linked

Related