How to use the AjaxRequest component

This component will allow exchange of data with the server. It is based on the XMLHttpRequest object. This tutorial will show you an exemple to use the ajaxRequest component. We will get customer information just after selecting his name.

Creation of the component

the init parameters are:

  • url: indicate the relative or absolute uri to call
  • withWaitWindow: if set to true will display a wait popup during the load
  • callBackObjectOnSuccess: object who have the onsucces callback method
  • callBackObjectOnFailure: object who have the onfailure callback method
  • canBeCancel:if set to true, the request can be abort
  • method:call method (get or post)
  • onSuccess:onsucces callback method
  • onFailure:onfailure callback method

The init call look like this:

example:


var ajaxReq=new rialto.io.AjaxRequest({
                        url:"/getCustomer?NAME=SMITH",
                        method: 'get',
                        withWaitWindow:true,                        
                        onSuccess: refreshData,
                        onFailure: failureCall
                    })

Request

To request on the server just call the load method as:

example:

ajaxReq.load("NAME=SMITH");

The parameter of this function is the querry string. With the 'get' method, the parameters can be add to the url and the load function is call with an empty string

example:


var ajaxReq=new rialto.io.AjaxRequest({
                        url:"/getCustomer?NAME=SMITH",
                        method: 'get',
                        withWaitWindow:true,
                        onSuccess:refreshData,
                        onFailure:failureCall
                    })

ajaxReq.load("");

Response

The callback function use the request object as parameter

Javascript

If you retrieve javascript data use the javascrit eval function in the callback method with the responseText propertie of the request

example:

if the server send back something like

{name:“SMITH”, firstName:“BOB”, age:“23” };


function refreshData(request){       
    eval("var resp="+request.responseText);
    var name=resp.name;
    var firstName=resp.firstName;
    var age=resp.age;
}

XML

If you retrieve XML data use in the callback method the responseXML propertie of the request

example:

if the server send back something like

1<response>
2   <customer name="SMITH" firstName="BOB" age="23"/>
3</response>

then the ajax callback method can look at this:


function refreshData(request){
       var xmlDoc = request.responseXML;
       var rootNode =xmlDoc.getElementsByTagName("response")[0];
       var childNode= rootNode.getElementsByTagName("customer")[0];

       var name=childNode.getAttribute("name");
       var firstName=childNode.getAttribute("firstName");
       var age=childNode.getAttribute("age");
}