Output results from a jquery ajax call

Question

I'm calling a webservice using jquer's ajax method and it seems to work since the 'success' function is executed. I need to output the raw results returned, but when I use alerts, the messagebox shows the output as: event='' XMLHttpRequest=success ajaxOptions=undefined

What am I doing wrong and how can I output the raw results?

$.ajax({
url: "http://mysite/service/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
contentType: "text/xml; charset=utf-8",
success: function(event, XMLHttpRequest, ajaxOptions){
 alert("event= "+event);alert("XMLHttpRequest= "+XMLHttpRequest);
 alert("ajaxOptions= "+ajaxOptions);},
error: function(xhr) {
 alert('Error! Status = ' + xhr.status);}
});

Answer 1

The first issue here is that your arguments are wrong for the success callback.

The args are actually as follows:

function (data, textStatus) {
    this; // the options for this ajax request
}

So, in your code, event is actually the data (jQuery will have converted responseXML for you and stuck it in this variable), and your XMLHttpRequest is actually the textStatus.

So you'd want to do something like this

function(data, status) {
    alert('response: ' + data);
}

If you want the XMLHttpRequest object directly:

var xhr = $.ajax({ /* blah */ });

Then you can look at xhr.responseText when the call is complete to see the raw result. It's probably better to use jQuery's data param if possible though.

For more info the jQuery ajax docs.

Answer 2

If you are using firefox with firebug, you can look under the NET tab.

Click NET clear it out. Do your AJAX call and click on the + to expand the item. Look under the Response tab to see what came back.

Side note: you can also look at the request as well.