Ajax prototype framework of Ajax.request class

-->

Using the Ajax.request class

If you don't use any helper packages, you probably write a whole lot of code to create the XMLHttpRequest object and track its process asynchronously, then parse the response and process it. You'll feel very fortunate when you don't need to support more than one type of browser.

To support AJAX functionality. This package defines the Ajax.request class.

If you have an application that can communicate with the server through http://yoursever/app/get_sales?empID=1234&year=1998. It returns an XML response such as the following:

?XML version= "1.0" encoding= "Utf-8 "?>
<Ajax-response>
<Responsetype= "Object"ID= "ProductDetails">
<Monthly-sales>
<Employee-sales>
<Employee-id>1234</Employee-id>
<Year-month>1998-01</Year-month>
<Sales>$8,115.36</Sales>
</Employee-sales>
<Employee-sales>
<Employee-id>1234</Employee-id>
<Year-month>1998-02</Year-month>
<Sales>$11,147.51</Sales>
</Employee-sales>
</Monthly-sales>
</Response>
</Ajax-response>    		

It is very easy to communicate with a ajax.request object and server and get this XML. The following example shows how it is done:

<Script>...
functionSearchsales ()
...{
varEmpID=$F (''lstemployees'');
vary=$F (''Lstyears'');
varURL= ''Http://yourserver/app/get_sales'';
varPars= ''empid='' +EmpID+ ''&year='' +y;

varMyajax= NewAjax.request (
Url
...{
Method:  'get',
Parameters:pars,
Oncomplete:showresponse
});

}

functionShowresponse (originalrequest)
...{
 //  put the returned XML in the textarea
$ ('result'). Value = Originalrequest.responsetext;
}
</Script>

<SelectID= "Lstemployees"size= "Ten"onchange= "Searchsales ()">
<optionvalue= "5">Buchanan, Steven.</option>
<optionvalue= "8">Callahan, Laura.</option>
<optionvalue= "1">Davolio, Nancy.</option>
</Select>
<SelectID= "Lstyears"size= "3"onchange= "Searchsales ()">
<optionselected= "Selected"value= "1996">1996</option>
<optionvalue= "1997">1997</option>
<optionvalue= "1998">1998</option>
</Select>
<BR><textareaID=resultcols=60rows=10></textarea>

Did you notice the second object passed into the ajax.request construction method? Parameter {method: ' Get ', Parameters:pars, oncomplete:showresponse} represents the true expression of an anonymous object. He says that the object you passed in has a property named method value of ' Get ' , and another property named parameters the query string containing the HTTP request, and a OnComplete Property/method contains function Showresponse.

There are other attributes that can be defined and set in this object, such as asynchronous, that can be true or false to determine whether AJAX calls to the server are asynchronous (the default value is true).

This parameter defines the options for AJAX invocation. In our example, the first parameter requests the URL via the HTTP get command, and the variable pars contains the query string, and theajax.request object will call when it completes receiving the response. Showresponse method.

Maybe you know,XMLHttpRequest . The progress will be reported during the HTTP request. This progress is described as four different stages:Loading, Loaded, Interactive, or Complete. You can make the ajax.request object invoke the custom method at any stage,Complete is the most commonly used one. You want to invoke a custom method simply by providing a custom method object in the requested option parameter named onxxxxx Property/method. Just like the oncompletein our example. The method you pass in will be invoked with one parameter, which is the XMLHttpRequest object itself. You will use this object to get the returned data and perhaps check the status property that contains the HTTP result code in this call.

There are two other useful options to handle the results. We can pass in a method at the onsuccess option, which is invoked when the AJAX is executed correctly, or, conversely, by passing a method at the onfailure option, which is invoked when an error occurs on the server side. As the onxxxxx option passes in, the two are called into a XMLHttpRequest object with an AJAX request.

Our example does not deal with this XML response in any interesting way, we just put this XML into a text field. A typical application of this response is likely to be finding the desired information, and then updating some elements of the page, or perhaps even making some XSLT transformations that produce some HTML on the page.

In version 1.4.0, a new event-return external rationale was introduced. If you have a piece of code that always executes for a particular event, regardless of which AJAX call throws it, you can use the new Ajax.responders object.

Suppose you want to show some hints, like a rotating icon, when an AJAX call is running, you can do it with two global event handles, one that displays the icon at the start of the first call, and the other hides the icon when the last call completes. Look at the example below.

<Script>
varmyglobalhandlers= ...{
OnCreate:function()...{
Element.show ('systemworking');
},

OnComplete:function() ...{
 if(ajax.activerequestcount  =   0)... {
Element.hide ('systemworking');
}
}
};

Ajax.Responders.register (myglobalhandlers);
</Script>

<Div ID=''systemworking''><img SRC=''Spinner.gif''>Loading ...</Div>

For a more complete explanation, see the Ajax.request Reference and options reference.