JavaScript framework: Standardized AJAX requests across browsers

Ajax

The most compelling reason to use JavaScript frameworks 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, plain text format. Most JavaScript frameworks have a certain form of Ajax request objects that accept a range of options as parameters. These options include callback functions that are invoked when the Web server responds, as ExtJS, MooTools, and prototype AJAX requests appear to be:

Listing 11: An AJAX request in a 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 the URL, params, method, and succcess processing functions, and the URL field contains the address of the server-side script, which is invoked by the AJAX request. The params itself is an object, made up of key/value pairs, and then passed to the server. The method field has two optional values: Get or post, default to post. The last field is succcess, which is invoked after the server has successfully responded. In this example, assume that the server side returns plain text, which is rendered to the user by the alert () method.

Next, let's explore the Ajax requests in MooTools.

Ajax requests in the listing 12:mootools

New Request ({
URL: ' server-script.php ',
Data: {
Name1: ' value1 ',
Name2: ' value2 '
},
Method: ' Post ',
Oncomplete:function (response) {
alert (response);
}
}). Send ();

As you see, MooTools is very similar to ExtJS. You will notice that the variable is passed through the data field and the Method field needs to be lowercase. In addition, unlike the success handler function, MooTools uses the OnComplete function. Finally, unlike ExtJS, MooTools actually sends requests using the Send () function of request.

Finally, let's look at the obvious differences between prototype.

Ajax requests in the listing 13:prototype

New Ajax.request (' server-script.php ', {
Params: {
Name1: ' value1 ',
Name2: ' value2 '
},
Method: ' Post ',
Onsuccess:function (transport) {
alert (Transport.responsetext);
}
});

Look, prototype works the same way, but there are differences in grammar. For starters, the request object for the prototype accepts two parameters to be passed to the constructor. The first parameter is the URL that sends the request, as you can see in the previous two examples, the second parameter is an object that contains the options for each AJAX request. Of course, the URL is passed as a separate parameter, and he is not in the list of options. In addition, it is noteworthy that unlike MooTools, the Prototype object's constructor implicitly sends the request, so no method needs to be invoked to trigger the HTTP request.

Most JavaScript frameworks support Ajax beyond what I'm talking about here. Some notable enhancements include automatically updating elements after a response, without any special onsuccess functions. Some libraries have pre-built AutoComplete, as you can see in the Google search engine, giving you some advice when typing.

In the following sections, you will learn about the user experience (UE) improvements that the JavaScript framework brings to the developer.

Reprint Address: http://www.denisdeng.com/?p=729

Original address: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html