Comparison of JavaScript frameworks-Ajax (6)

Ajax

The most convincing reason for using JavaScript frameworks is to standardize Ajax requests across browsers. An Ajax request is an asynchronous HTTP request. It sends a request to a server script and returns a response, such as XML, JSON, HTML, and plain text. Most JavaScript frameworks have a fixed form of Ajax request object, which accepts a series of options as parameters. These options include callback functions called when the Web server responds. The Ajax requests of ExtJS, MooTools, and Prototype look like this:

Listing 11: Ajax requests 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 url, params, method, succcess, and other fields. The url field contains the address of the server script and is called by Ajax requests. Params itself is an object consisting of key/value pairs and then transmitted to the server. The method field has two optional values: GET or POST. The default value is post. The last field is succcess, which is called after the server receives a successful response. In this example, if the server returns plain text, the text is presented to the user through the alert () method.

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

Listing 12: Ajax requests 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 similar to ExtJS. You will notice that the variable is passed through the data field, and the method field must be in lower case. In addition, unlike the success processing function, MooTools uses the onComplete function. Finally, unlike ExtJS, MooTools actually uses the send () function of Request to send requests.

Finally, let's take a look at the obvious differences between prototypes.

Listing 13: Ajax requests in Prototype

New Ajax. Request ('server-script. php ',{
Params :{
Name1: 'value1 ',
Name2: 'value2'
},
Method: 'post ',
OnSuccess: function (transport ){
Alert (transport. responseText );
}
}); Look, Prototype works in the same way, but the syntax is slightly different. For beginners, the prototype Request object accepts two parameters passed to the constructor. The first parameter is the URL of 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, which is not in the option list. In addition, unlike MooTools, the Prototype object constructor implicitly sends a request, so you do not need to call any method to trigger the HTTP request.

Most JavaScript frameworks support Ajax more than I have mentioned here. Some obvious enhancements include automatic updating of elements after response, without any special onSuccess functions. Some libraries have pre-built the auto-completion function, as you can see in google search engine, giving you some query suggestions when typing.

In the following sections, you will learn about the enhancement of the user experience (UE) brought by the JavaScript framework to Web developers.

Reprint address: http://www.denisdeng.com /? P = 729

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