First download the Prototype.js package and include it in your <script src= ' prototype.js ' ></script>
Create a XMLHttpRequest object and track its process asynchronously, then parse out the response and then deal with it maybe this is the fundamental meaning of Ajax, it's the most powerful place, but you can be compatible with a variety of different browser code, may make you miserable, But thankfully Jiukujiunan's Prototype.js offers ajax.request classes to get you out of these troubles.
If you have an application that can communicate with the server via URL http://ajax.boogu.com/cm.html. It returns an XML response such as the following.
(This is, of course, 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 communicate with a Ajax.request object and server and get this XML. The following example shows how it is done.
<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= "" _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 into the Ajax.request construction method? The parameter {method: ' Get ', Parameters:pars, Oncomplete:showresponse} represents the true wording of an anonymous object. He said that the object you passed in has a property named method value of ' get ', another property named parameters the query string containing the HTTP request, and a OnComplete property/method containing the 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 through the HTTP GET command, and the query string contained in the variable pars is passed in, and the Ajax.request object invokes the Showresponse method when it completes receiving the response.
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 oncomplete in 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.
Dragon to the Pulse
OnComplete this value to pass a function argument over, like the showresponse above, this function, by default, is passed there will be a originalrequest pass over
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.
After you get this ORIGINALREQUESTC, if you are an XML object, you can have
var xml = Originalrequest.responsexml;
So you can get the text value of the first monthly-sales.
var monthly-sales = xml.getelementbytagname (' monthly-sales ') [0].text
Prototype.js This Swiss Army knife, is indeed our home travel, the necessary tools to write JS code
