Debugging Jquery ajax function

Question

JS code:

$.ajax({


        type: 'POST',
         url: 'http://localhost/MyServiceDir/Service.asmx/Foo',
         contentType: 'application/json; charset=utf-8',
         data: jsonData,
         success: function (msg) {
             alert("good");
         },
         error: function (xhr, status) {
              switch (status) {
                 case 404:
                     alert('File not found');
                     break;
                 case 500:
                     alert('Server error');
                     break;
                 case 0:
                     alert('Request aborted');
                     break;
                 default:
                     alert('Unknown error ' + status);
             } 
         }
     });

I get "unknown error error". How do I get to the bottom of this? I would like to know what the error actually is. Thanks!

Answer 1

The "status" parameter only includes why it failed -- timeout, error, etc... To get the status code you need to check the response object: xhr.status

See http://www.w3.org/TR/XMLHttpRequest/#response for details.

If you are getting "500 Internal Server Error" that is all you are going to get from ajax. You will have to check your application or server logs. This could be a syntax error or or library error or something else along those lines.

Answer 2

Check xhr.status.

Answer 3

Try this out in the onerror event:

alert(xhr.statusText)

EDIT:

I think your best bet here would be to install the FireBug Plugin on Firefox. This will allow you to see the ajax calls(enable "console" tab for this), responses, and error messages. Hopefully you will be able to get the info you need in this manner. This has been always been my method of choice for debugging ajax calls