What/when does a call to the jQuery AJAX method return?

Question

A little background:

I am trying to implement and AJAX powered SlickGrid. There isn't much documentation so I used this example as a base .

In this example there is the following code that hits the desired web service to get the data:

req = $.jsonp({
                    url: url,
                    callbackParameter: "callback",
                    cache: true, // Digg doesn't accept the autogenerated cachebuster param
                    success: onSuccess,
                    error: function(){
                        onError(fromPage, toPage)
                    }
                    });
                req.fromPage = fromPage;
                req.toPage = toPage;

I'm not exactly sure what jsonp does but from what i've read it appears to be very similar to the ajax method in jQuery except it returns json and allows cross domain requests. The webservice that I happen to be calling only returns XML so I changed this chunk of code to:

req = $.ajax({
                url: "/_vti_bin/lists.asmx",
                type: "POST",
                dataType: "xml",
                data: xmlData,
                complete: onSuccess,
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("error: " + xhr.statusText);
                    alert(thrownError);
                },
                contentType: "text/xml; charset=\"utf-8\""
            });
            req.fromPage = fromPage;
        req.toPage = toPage;

My issue is that my page errors out at req.fromPage = fromPage; because req is null.

Am I wrong to think that I can just replace my jsonp call with a call to the ajax method? Is req just not set because my ajax call hasn't finished by the time that code is executed? How can I get around either of these issues?

If I comment out the last two lines and hard-code those values elsewhere everything runs fine.

Answer 1

Am I wrong to think that I can just replace my jsonp call with a call to the ajax method?

No, that should work just fine.

Is req just not set because my ajax call hasn't finished by the time that code is executed?

Yes, that is correct.

The ajax methods starts the request and returns immediately. If you want to do something after the response has arrived you should do that in the success event handler.

You might actually want to use the success event instead of the complete event, as the complete event happens even if there is an error.

You could specify async: false, in your settings to make the ajax call wait for the response, but that means that the browser freezes while it's waiting.

Answer 2

As Guffa stated , $.ajax() works asynchronically. Thus, you have to specify a callback that will be called when the request has returned a response, rather than to just use whatever $.ajax() returns.

There are a couple of different callback methods you can specify:

• complete - runs when you recieve a response, regardless of its status.
• success - runs when you recieve a response with a successful status code (usually 200).
• error - runs when you recieve a response with an error code (for example 404 or 500).

To do something with the response body after a successful request, you should do something like

$.ajax({
    ...
    success: function(body) {
        alert('This is the method body:' + body);
    }
});

Read up in the documentation on the different methods to see what more parameters you can use.