I'm rookie when it comes to Ajax and jQuery and needs some help...
The following url produces an xml-file that I want to use on my page: http://ws.spotify.com/search/1/track?q=foo
When I use firebug it seems like nothing comes back. What have I done wrong?
This is what my code looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'http://ws.spotify.com/search/1/track?q=foo',
type: 'GET',
contentType: "application/xml; charset=utf-8",
error: function(){
alert('Error loading XML document');
},
success: function(xml){
alert("success");
$(xml).appendTo("#result");
}
});
});
</script>
</head>
<body>
<div id="result">
</div>
</body>
</html>
Try to use JSON return format instead of XML, there is some information concerning your case here: XmlHTTPRequest: "XML Parsing Error: no element found"
Is your web page where the JS is running also from ws.spotify.com? Otherwise, you will run into the browser's restrictions to prevent cross-site scripting by using the same origin policy. You can use data of type jsonp to get around this issue. Ajaxian provided a post on a workaround that you can hopefully use. It doesn't use jQuery, but it may help.
Can I suggest you also use HTTPFox to look at what's happening between your script and the server
Seems your success function may be a little off:
success: function(data) {
alert("success");
$('#result').html(data);
}