Advanced jQuery Ajax Options

Yesterday we discussed how you can use jQuery as an Ajax library for your web application. The discussion only covered the most basic options to make the Ajax work. There are many more options available to modify how the Ajax behaves. Today we will discuss those options.

async: boolean – If you do not set this option, it will default to true. If this option is set to false, the Ajax will be done synchronous. What this means for your application is that the browser will lock the page while the Ajax is processing. You will want to use this to prevent multiple iterations of the Ajax from processing at the same time.

beforeSend: function(XMLHTTPRequest) – You can use this to change the XMLHTTPRequest before it is sent for processing. You will most likely use this if you need to set custom headers for the request. Returning false within this function will cancel the request. This is very useful for form processing and validation before sending the request to the server.

cache: boolean – Setting this option to false will force the browser to not cache the result.

complete: function() – This function will run once the Ajax request has been completed. This is one my personal choice for where to handle the results of your Ajax request. It has two parameter sets. The first set is just a single parameter. This is the raw result text of the request. The second is a two parameter set that is the XMLHTTPRequest Object and the raw text of the request. You may use either one, but if you don’t need to access the object directly, use the single parameter option.

contentType: String – Use this option to set the Content-type header for the request.

data – This is the extra data that will go into the request. You will put any form data into this field. You can form your data in two ways. The first one being in a query string format (data1=value&data2=value&data3=value) and the second being an array (I prefer the query string format).

dataFilter: function(data, type) – This function executes just before the complete function runs. Use this to pre-process the response data.

dataType: String – Tell the Ajax what kind of data you are expecting to be returned. You can choose xml, html, script, json, jsonp, or text depending on what you are expecting. If you do not specify this, jQuery will do its best to determine the data type (and it does a very good job of that. I have never had to use this function before).

error: function(XMLHttpRequest, status, error) – If something bad happens this function will run. You this to inform your users that something bad happened.

global: boolean – Tell jQuery if it should fire off a global Ajax event.

ifModified: boolean – Tells jQuery the Ajax request was successful only if the Last-Modified header has changed. Default for this is false.

success: function() – This function is called if the Ajax request succeeds.

timeout: int – Sets the length of time the Ajax call will execute before it gives up.

type: (POST, GET) – Determines if the Ajax call will be done using GET or POST.

url: string – The URL to connect to.

username: string – The username to provide if the server requests credentials

password: string – The password to provide if the server requests credentials

There you have it. You can any combination of these to customize Ajax to do whatever you require it to do for your project.

Sorry, Comments are Closed.

You'll have to take it up with the author...