xml data not being returned using jquery ajax

Question

I am trying to get the page popularity of a site

<POPULARITY URL="google.com/" SOURCE="panel" TEXT="1"/>

using alexa api. If I post

http://data.alexa.com/data?cli=10&dat=snbamz&url=http://www.google.com 

into the browser i get a xml response but using ajax I get nothing returned

$.ajax({    type: "GET",
            url: "http://data.alexa.com/data?cli=10&dat=snbamz&url=http://www.google.com",
            dataType: "xml",
            cache: false,
            success:function(data){

            alert(data); 

            }

        });

What am i doing wrong?

Answer 1

I would structure it like this:

$.get(ajax_url, data, function(response) {
        alert(response);
  });

Also, I think you want be doing a get for the data (rather than $.post and then specifying get later on).

Answer 2

I imagine it's because you're trying to load an xml file which is not from your domain. Most browsers will block this by default because it breaks cross-domain javascript rules.

If you look in the console in your developer tools (F12 in most browsers) you'll see an error similar to this:

XMLHttpRequest cannot load http://data.alexa.com/data?cli=10&dat=snbamz&url=http://www.google.com&_=1337464540283. Origin null is not allowed by Access-Control-Allow-Origin.

The easiest way around this (presuming you are running PHP) is to create a small php file which wraps the xml file on your own server and load it from there.

see this question for an example:

Ajax: Load XML from different domain?