Use prototype. js for asynchronous operations

Download the prototype. js class package and include it on your <Script src = 'prototype. js'> </script>

Create an XMLHttpRequest object and asynchronously track its process, parse the response, and process it. It may be the fundamental significance of ajax, where it is the most powerful, however, if you can develop code that is compatible with different browsers, it may make you suffer, but fortunately, prototype is difficult to solve. js provides Ajax. request class to free you from these troubles.

Assume that you have an application that can communicate with the server through url http://ajax.boogu.com/cm.html. It returns the following XML response.
(Of course this is impossible)

<? 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: // yoursever/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 returned XML in the 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>
Do you see the second object passed in the Ajax. Request constructor? The {method: 'get', parameters: pars, onComplete: showResponse} parameter represents the actual method of writing an anonymous object. It indicates that the object you pass in has an attribute named 'get' with the method value, and another attribute named parameters contains the query string of the HTTP request, and an onComplete attribute/method contains the showResponse function.

Some other attributes can be defined and set in this object. For example, asynchronous can be true or false to determine 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, or Complete. You can use Ajax. Request objects to call custom methods at any stage. Complete is 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 status attribute that contains the HTTP result code in this call.
Longdemai
The onComplete value needs to be passed through a function parameter. For example, in the showResponse above, this function will be passed by default with an originalRequest passed over.
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. Like the method passed in by the onXXXXX option, both of them also pass in an XMLHttpRequest object with an AJAX request when called.

After you obtain originalRequestc, if it is an xml object, you can

Var xml = originalRequest. responseXML;
In this way, the text value of the first monthly-sales can be obtained.
Var monthly-sales = xml. getElementByTagName ('monthly-sales') [0]. text

Prototype. js, the Swiss Army knife, is indeed an essential tool for us to write JavaScript code during home travel.