jQuery & Ajax

 Version française disponible

Ajax

Appeared in 2005, Ajax (Asynchronous JavaScript and XML) is a group of existing technologies, including HTML, JavaScript and XML. With Ajax, web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page. Thus, it allows Web pages to be more interactive and behave like local applications, which are also known as RIA applications (Rich Internet Applications). The term “Asynchronous” means that the JavaScript allows the page to continue to be processed and will handle the reply if and when it arrives. In synchronous mode, the browser is “frozen” while the request is processing.

jQuery

Initiated in 2006, the jQuery project is an open source JavaScript library which has become very popular. It allows the development of JavaScript quickly and concisely, as its slogan “Write less, do more” says ! jQuery handles events, performs animations, includes CSS selectors, adds Ajax interactions to Web pages… In addition, many plugins are available and the library is cross-browser.

Ajax with jQuery

There are several ways to do Ajax with jQuery.


$.get(url, data, callback, type)

$.get() is a general way to make GET requests. It handles the response of many formats including XML, Html, Text, Script and Json.

	function add_elements_table(elementIds) {
		$.get( 'demoajax.php', 
				{	
					'cmd': 'addElements', 
					'elementSelecteds': elementIds
				}, 
				function (data) { refresh_table() });
	}

$.post(url, data, callback, type)

$.post() does exactly the same job as $.get(), except for the fact that it makes a POST request instead.


$.ajax(settings)

$.get() and $.post() are high-level abstractions that are often easy to understand and use. If you need maximum control over your requests, check out the $.ajax() function. You can specify ajax options (e.g. error callbacks, browser cache). $.ajax() argument is a set of key/value pairs that initialize and configure the Ajax request.

	function add_elements_table(elementIds) {
		$.ajax({ url : 'demoajax.php', 
				data : {	
					'cmd': 'addElements', 
					'elementSelecteds': elementIds
				},
				cache : false,
				success : function (data) { refresh_table() }});
	}

Ajax caching issues with Internet Explorer !

I have been working on a project that involves using jQuery and Ajax. I have using the $.get() method to handle simple calls. The JavaScript was working great on Firefox, Chrome and also on Internet Explorer 6.
However, I realized that on IE7, 8 and 9, some strange and random behaviors happen.
After some research, I find out that it was a caching issue. The first time, the Ajax call is properly treated. But, the second time, the server has not been requested and the data from the very first Ajax call was returned…
Now, I recommend the use of $.ajax() with the “cache: false” option.