Use the Ajax. Request class

If you do not use any help package, you may write a large amount of code to create an XMLHTTPRequest object and asynchronously track its process, then parse the response and process it. You are very lucky when you do not need to support more than one type of browser.

To support Ajax functions. This package defines the Ajax. Request class.

Assume that you have an application that can use http: // yoursever/APP/get_sales? Empid = 1234 & year = 1998 communicates with the server. It returns the following XML response:

<?xml version="1.0" encoding="utf-8" ?> <ajax-response><response type="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 use the Ajax. Request object to communicate with the server and obtain the XML file. The following example demonstrates how it is completed:

<SCRIPT> function searchsales () {var empid = $ F ('lstemployees'); var y = $ F ('lstyears'); var url = 'HTTP: // yourserver/APP/get_sales '; var pars = 'empid =' + empid + '& year =' + Y; var myajax = new Ajax. request (URL, {method: 'get', parameters: pars, oncomplete: showresponse});} function showresponse (originalrequest) {// put the returned XML in textarea $ ('result '). value = originalrequest. responsetext ;}</SCRIPT> <select id = "lstemployees" size = "10" onchange = "searchsales ()"> <option value = "5"> Buchanan, steven </option> <option value = "8"> Callahan, Laura </option> <option value = "1"> davolio, nancy </option> </SELECT> <select id = "lstyears" size = "3" onchange = "searchsales () "> <option selected =" selected "value =" 1996 "> 1996 </option> <option value =" 1997 "> 1997 </option> <option value =" 1998"> 1998 </option> </SELECT> <br> <textarea id = Result Cols = 60 rows = 10> </textarea>

Have you noticed the second object passed in the Ajax. Request constructor? Parameter {method:
'Get', parameters: pars, oncomplete: showresponse} indicates the actual writing of an anonymous object. It indicates that the object you passed in has an attribute named 'get' with the method value, and another attribute named parameters contains
The HTTP request query string and an oncomplete attribute/method contain the showresponse function.

Some other attributes can be defined and set in this object. For example, asynchronous can be set to true or false.
Whether Ajax calls to the server are asynchronous (the default value is true ).

This parameter defines the Ajax call options. In our example, the first parameter uses the http get command to request the URL and passes in the query string contained in the variable pars, Ajax. when the request object receives a response, it will call the showresponse method.

You may know that XMLHttpRequest will report progress during the HTTP request. This progress is described as four different stages:Loading,Loaded,Interactive, OrComplete. You can make the Ajax. Request object call the custom method at any stage
,CompleteIs the most commonly used one. To call a custom method, you only need to provide a custom method object in the onxxxxx attribute/method in the request's option parameter. 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 may check the HTTP
The status attribute of the result code.

There are two other useful options for processing results. We can pass in a method in the onsuccess option. After Ajax is executed correctly, we can call the method in the onfailure option. If an error occurs on the server side, we can call the method. Just like the method passed in by the onxxxxx option, these two methods are also passed in
The XMLHTTPRequest object of the Ajax request.

Our example does not use any interesting method to process this XML response. We just put this XML into a text field. A typical application of this response is probably to find the desired information, then update some elements on the page, or even perform some XSLT transformations to generate some HTML on the page.

In version 1.4.0, a new Event Callback principle is introduced. If you have a piece of code that is always executed for a special event, and no matter which Ajax call causes it, you can use the new Ajax. Responders object.

Suppose you want to display some prompts when an Ajax call is running, such as a continuously rotating icon, you can use two global event handles to do so, one shows the icon at the beginning of the first call, and the other hides the icon at the end of the last call. Let's look at the example below.

<script>var myGlobalHandlers = {onCreate: function(){Element.show('systemWorking');},onComplete: function() {if(Ajax.activeRequestCount == 0){Element.hide('systemWorking');}}};Ajax.Responders.register(myGlobalHandlers);</script><div id='systemWorking'>Loading...</div>