ajax - Post to page and get content which has been returned in xml format

I'm trying to use an Ajax post to return a list of provinces from xml when a country is selected.

This is the error message I get:

The xml seems to be okay - the error message displays the correct states/provinces when a country is selected, but for some reason it errors and I can't use the success callback function. I believe I'm supposed to echo the xml response in my php, and the $(document).ready function should contain the ajaxError handler function, but I can't alert my list of provinces/states in the success callback. Does anyone know what I'm missing here?

HTML

<select name="aff_country" onChange="loadStates(this.value);">
  <option value="Select Me">Select Me</option>
</select>

Javascript

$(document).ready(function() {
    $(document).ajaxError(function(e,xhr,settings,exception) { 
        alert('Error Page: ' + settings.url + '\n\n'+'Error Message:\n' + xhr.responseText ); 
    });
});

function loadStates(country_value) {
    $.post("/states.php", {con_name: country_value}, function(data) {
       console.log(data);
    },"xml");
 }

XML (PHP)

<?
$request_obj = new Request();
$request_obj->flds = $_REQUEST;

$states = array();
$states = $country_bus_obj->states($request_obj,$_CONFIG);

$xml .= "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
$xml .= "<response>";
$xml .= "<status>" . $status . "</status>";
$xml .= "<message>" . $trans->msg . "</message>";
$xml .= "<states>";
foreach ($states as $item) {
  $xml .= "<state>";
  $xml .= "<name>" . $item['sta_name'] . "</name>";
  $xml .= "</state>";
}
$xml .= "</states>";
$xml .= "</response>";

header('Content-type: text/xml');
header('Cache-Control: no-cache');
echo $xml;
?>