First download this class package and include it in your <html> page
<script src=''></script>
Create an XMLHttpRequest object and track its process asynchronously, then parse out the response and then process it. This may be the fundamental meaning of ajax, its most powerful thing, but you can produce code compatible with various browsers, which may cause you to suffer. Fortunately, the class that saves you and helps you get rid of these troubles.
Suppose you have an application that can communicate with the server via url/. It returns the following XML response.
(Of course this is impossible)
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" >
<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 simple to communicate with the server and get this XML using an object. The following example demonstrates 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 (
url,
{method: 'get', parameters: pars, onComplete: showResponse}
); }
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = ;
}
</script>
<select size="10" _onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select 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 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.
Dragon Death
OnComplete This value needs to pass a function parameter. For example, the above showResponse function will be passed by default. There will be an originalRequest passed by.
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.
After obtaining this originalRequestc, if it is an XML object, it can have it.
var xml = ;
This will get the text value of the first monthly-sales
var monthly-sales = ('monthly-sales')[0].text
This Swiss Army Knife is indeed a must-have tool for writing JS code when we travel at home
<script src=''></script>
Create an XMLHttpRequest object and track its process asynchronously, then parse out the response and then process it. This may be the fundamental meaning of ajax, its most powerful thing, but you can produce code compatible with various browsers, which may cause you to suffer. Fortunately, the class that saves you and helps you get rid of these troubles.
Suppose you have an application that can communicate with the server via url/. It returns the following XML response.
(Of course this is impossible)
<?xml version="1.0" encoding="utf-8" ?>
<ajax-response>
<response type="object" >
<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 simple to communicate with the server and get this XML using an object. The following example demonstrates 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 (
url,
{method: 'get', parameters: pars, onComplete: showResponse}
); }
function showResponse(originalRequest)
{
//put returned XML in the textarea
$('result').value = ;
}
</script>
<select size="10" _onchange="searchSales()">
<option value="5">Buchanan, Steven</option>
<option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
<select 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 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.
Dragon Death
OnComplete This value needs to pass a function parameter. For example, the above showResponse function will be passed by default. There will be an originalRequest passed by.
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.
After obtaining this originalRequestc, if it is an XML object, it can have it.
var xml = ;
This will get the text value of the first monthly-sales
var monthly-sales = ('monthly-sales')[0].text
This Swiss Army Knife is indeed a must-have tool for writing JS code when we travel at home