I’m trying to learn JQuery – and I have a small problem with ajax. I’m trying to populate a javascript array with values returned from an XML response from a page.
Here’s my main page (ajax.html):
<html>
<head>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/fiber.js"></script>
</head>
<body>
<p>Ajax</p>
<script>
var ringType = new Array();
</script>
</body>
</html>
fiber.js is this:
//process things for fiber map
jQuery(document).ready(function() {
// do stuff when DOM is ready
//populate and display ringType
$.ajax({
type: "GET",
url: "ajaxHelper.pl",
data: {
getRingTypes: "1",
},
dataType: "xml",
success: function(xml) {
//if the query was successfull,
alert("Got an xml object:"+$(xml));
$(xml).find("ringType").each( function(){
alert("Received reply "+$(this).text());
var type = $(this).html(); //save the value
//append to ringType array
ringType.push(type);
});
},
error:function (xhr, ajaxOptions, thrownError){
alert(xhr.status);
alert(thrownError);
}
});
for(var i=0; i<ringType.length; i++){
document.write("<br>"+ringType[i]);
}
});
ajaxHelper.pl generates this XML (without the backslashes in \?) (as content-type text/xml):
<?xml version="1.0" encoding="ISO-8859-1"?>
<\?xml version="1.0" encoding="ISO-8859-1"\?>
<ringType>IA</ringType>
<ringType>IL</ringType>
<ringType>IN</ringType>
<ringType>IR</ringType>
<ringType>RT</ringType>
The problem is, every time I load ajax.html, the ajax query is successful, but the error function is executed! xhr.status = 200 (meaning the query was ok) and thrownException is undefined.
Does this happen in all browsers?
1) You can use complete instead of success and error to handle the status. Use an if to check the XHR return status and branch accordingly.
http://docs.jquery.com/Ajax/jQuery.ajax#options