prototype1.5 First experience page 2/2

3. Ajax object
The common methods mentioned above are very good, but when it comes to it, they are not the most advanced things. Are they? You may have written these yourself and even have similar functions in your scripts. But these methods are just the tip of the iceberg.

I'm pretty sure the reason you're interested in is most likely due to its AJAX capabilities. So let's explain how this package makes it easier when you need to complete AJAX logic.

The Ajax object is a predefined object created by this package to encapsulate and simplify the crafty code involved in writing AJAX functions. This object contains a series of classes that encapsulate AJAX logic. Let's take a look at some of them.

3.1. Use Class
If you don't use any help packages, you're likely writing a whole lot of code to create an XMLHttpRequest object and track its process asynchronously, then parse out the response and then process it. You will feel very lucky when you don't need to support more than one type of browser.

In order to support the AJAX function. This package defines the class.

If you have an application that can be passed through urlhttp://yoursever/app/get_sales?empID=1234&year=1998Communicate with the server. It returns the following XML response.

It is very simple to communicate with the server and get this XML using an object. The following example demonstrates how it is done.

Have you seen the second object passed in the construction method? Parameters {method: 'get', parameters: pars, onComplete: showResponse} Denotes the true writing of an anonymous object. It indicates that the object you pass in has a property named method with a value of 'get', another property named parameters containing the query string for HTTP requests, and an onComplete property/method containing the function showResponse.

There are some other properties that can be defined and set in this object, such as asynchronous, which can be true or false to determine whether AJAX's call to the server is asynchronous (the default value is true).

This parameter defines the options for AJAX calls. In our example, when the first parameter requests that url through the HTTP GET command, the query string contained in the variable pars is passed in. The object will call the showResponse method when it completes receiving the response.

Maybe you know that XMLHttpRequest will report progress during HTTP requests. This progress is described as four different stages: Loading, Loaded, Interactive, or Complete. You can make the object call custom methods at any stage, and Complete is the most commonly used one. To call a custom method, you only need to simply provide a custom method object in the attribute named onXXXXX property/method in the requested option parameter. Just like onComplete in our example. The method you pass in will be called with a parameter, which is the XMLHttpRequest object itself. You will use this object to get the returned data and perhaps check the status attribute containing the HTTP result code in this call.

There are two other useful options for processing results. We can pass a method in the onSuccess option, and call it when AJAX is executed correctly. On the contrary, we can also pass a method in the onFailure option, and call it when an error occurs on the server side. Just like the method passed in the onXXXXX option, these two also pass in an XMLHttpRequest object with an AJAX request when called.

Our example does not handle this XML response in any interesting way, we just put this XML into a text field. A typical application to this response is likely to find the information you want, and then update certain elements in the page, or even do some XSLT conversions to generate some HTML in the page.

3.2. Use Class
If the information returned by the other end of your server is already HTML, then using the classes in this package will make your life easier. To use it, you just need to provide which element needs to be filled with HTML returned by the AJAX request. The example is clearer than what I wrote.

As you can see, this code is more concise than the previous example, not including the onComplete method, but an element id is passed into the constructor. Let's modify the code a little to describe how it becomes possible to handle server segmentation errors on the client.

We will add more options to specify a way to handle errors. This is done with the onFailure option.

We also specified a placeholder that will be populated only after a successful request. To accomplish this, we modified the first parameter from a simple element id to an object with two attributes, success (used when everything is OK) and failure (used when something goes wrong) in the following example, the failure attribute is not used, but only the reportError method is used at onFailure.

If your server logic returns JavaScript code instead of a simple HTML tag, the object can execute that JavaScript code. In order to make this object treat the response to JavaScript, you only need to simply add the evalScripts: true attribute to the object constructor of the last parameter.

Prototype learning materials include:
prototype14 reference
prototype 1.3 Source Code Interpretation.txt
prototype 1.5 Reference Picture
prototype 1.
prototype 1.
Click here to download