In a short example we’ve a simple AJAX call with very large request.

xhr = $.ajax({
    url : 'www.example.com?some-large-call',
    success : function(responseText) {
        // some DOM manipulation
    }
});

But what if something changes the data we’d like to request with this call even before the response has come. For example I click on a category in the site but before all the data has come I’d prefer to see other category’s data.

In this case I just add some more code to the example. Actually it’s important to notice that $.ajax is returning an object that can be “aborted”.

var xhr = null;

xhr = $.ajax({
    url : 'www.example.com?some-large-call',
    success : function(responseText) {
        // some DOM manipulation
    }
});

$(document).click(function() { xhr.abort() });

As you can see this is really a mixture between working and pseudo code, so it will require a little bit more improvisation!

$(‘#elem’).load(‘url’, ”, function() {});

or

$.ajax({

type : ‘GET’, // or POST

dataType : ‘text’, // or JSON

url : ‘url’,

data : {}, // GET or POST key/value parameters

success : function () {}, // on success callback

error : function () {} // on error callback

});

Note: be careful to miss the comma after the error callback declaration, cause IE is giving some problems with objects with comma after the last key/value pair.

Both methods are useful, but however the second one is more complicated and gives more functionality. It’s important to note that if you’d like to include Html, which will be JavaScript processed after that, there are another two ways. The first one is obvious, you can call the javascript file processing the included Html in your success callback of the first ajax call. After calling the second ajax call, be aware to call it with dataType : ‘script’, which includes de js code and parses it as code. Than you can call whatever function in that .js as you’d do it as it was already included.

That method is obvious and easy, but however on slow nets it’s pretty slow and it’s not useful. Actually you can include your script file as you’d normally do it, with a script tag.

In it you should register all event listeners in methods you can call later. That’s the better way.

In the first case you have:

$.ajax({

type: ‘GET’,

dataType: ‘text’,

url: ‘the_url’,

data: {},

success : function () {

$.ajax({

type: ‘GET’,

dataType: ‘script’,

url : ‘script.js’,

success : function() {

// now do what you want

}

})

},

error : function() {

}

});

In the second case you’d just include your file:

<script src=”script.js”></script>

<script>

$.ajax({

type : ‘GET’,

dataType : ‘text’,

url : ‘url’,

success : function() {

init_script(); // method in script.js

}

});

</script>

Now everything should work OK, good luck!