Ajax
The most compelling reason to use a JavaScript framework is to standardize Ajax requests across browsers. An Ajax request is an asynchronous HTTP request that sends a request to a server-side script and then gets a response result, such as data in XML, JSON, HTML, or plain text format. Most JavaScript frameworks have some form of Ajax request object that accepts a series of options as parameters. These options include callback functions that are called when a response is received from the web server. Ajax requests for ExtJS, MooTools, and Prototype look like this:
Listing 11: Ajax request in an ExtJS library
Ext.Ajax.request({
url: 'server_script.php',
params: {
name1: 'value1',
name2: 'value2'
},
method: 'POST',
success: function(transport) {
alert(transport.responseText);
}
});
ExtJS accepts a parameter, including fields such as url, params, method and success processing function. The url field contains the address of the server-side script, which is called by Ajax requests. Params itself is an object consisting of key/value pairs, which are then passed to the server. The method field has two optional values: GET or POST, and the default is the post method. The last field is success, which is called after the server gets a successful response. In this example, it is assumed that the server returns plain text, and this text is presented to the user through the alert() method.
Next, let us further explore Ajax requests in MooTools.
Listing 12: Ajax request in MooTools
new Request({
url: 'server-script.php',
data: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onComplete: function(response) {
alert(response);
}
}).send();
As you can see, MooTools is very similar to ExtJS. You'll notice that variables are passed through the data field, and method fields need to be lowercase. In addition, unlike the success handler function, MooTools uses the onComplete function. Finally, unlike ExtJS, MooTools actually sends the request using the Request send() function.
Finally, let's look at the obvious differences between Prototype.
Listing 13: Ajax request in Prototype
new Ajax.Request('server-script.php', {
params: {
name1: 'value1',
name2: 'value2'
},
method: 'post',
onSuccess: function(transport) {
alert(transport.responseText);
}
});
See, Prototype works the same way, but with small syntax differences. For starters, the prototype Request object accepts two parameters to be passed to the constructor. The first parameter is the URL to send the request to, as you saw in the previous two examples, and the second parameter is an object containing the options for each Ajax request. Of course, the URl is passed as a separate parameter and is not in the options list. In addition, it is worth noting that, unlike MooTools, the constructor of the Prototype object sends the request implicitly, so there is no need to call any method to trigger the HTTP request.
Most JavaScript frameworks support Ajax beyond what I've mentioned here. Some notable enhancements include automatically updating elements upon receiving a response, without the need for any special onSuccess functions. Some libraries have pre-built autocomplete functionality, as you see with the Google search engine, that gives you some query suggestions as you type.
In the following chapters, you will learn about the user experience (UE) improvements that JavaScript frameworks bring to web developers.
Reprint address: http://www.denisdeng.com/?p=729
Original address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html