Aaxsys Notes
  More articles

Using the Ajax API - Page 2

Previous page Next page
Our search results are shown in a table built from the XML feed, and the function clearResults clears and hides this table at the beginning of each new request. The rest of the above code (the code for startAvailabilityRequest) is nothing but a standard way to make a POST request using the Ajax XML request object.

Receiving the response.
When the server receives this request, the associated program (availres) resolves the availability of units exactly as in the normal case, except for the output phase. It sends an XML page instead of an availability listing in the standard Aaxsys format. In case we wanted to see the entire XML data sent out by the server, we could simply finish our task right here and use 

function handleStateChange() {
  if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {

      alert(xmlHttp.responseText);
    }}}
However, we want to receive the data as XML and select a few fields to be used to build a table that publishes the search results. Therefore, we define 
var results = xmlHttp.responseXML;
var Result = 
      results.getElementsByTagName("SearchResults");
  if(Result.length != 0) 
     {if(Result[0].hasChildNodes()) {
    AvailableUnits = 
      Result[0].getElementsByTagName("AvailableUnits");
    if (AvailableUnits[0].hasChildNodes()) {
      Units = 
        AvailableUnits[0].getElementsByTagName("Unit");
    }
  }
(This is a simplified form that includes neither handling the potential error message nor the message for "no availability".) In the XML feed, each unit is a list of field tags and their values, enclosed between tags. This is, in fact, nothing but a list of data records in a textual format. 		These field tags include some important fields taken directly from the unit's database record (unit code, bedrooms, city, ...) and some links for further information. You may wish to include these "pre-formed" links in your web page, for the client to proceed to the next pages in the online booking process. However, you may as well decide to use your own links, built from the received data.

Building the table.
Let us now use the list of available units to build a simple table. First, let use define a static stub for the table: 

<table id="searchresults" border="1" 
  class="results">
<tr><th colspan = "4">Search Results</th></tr>
<tr><thr>Property</thr><th>Name</th>
<th>Bedrooms</th>
<th>Bathrooms</th>
<tbody id="searchresultsbody">
</tbody>
</table>
Given an array aFields that will hold the field values for each unit and a utility function getTag(res,tag) that is used to read the value of a tag "tag" in a result "res", the following loop will read the consecutive values of four fields and adds a row into the body of the above table: 
for (var i = 0; i < nrUnits; i++) {

  aFields[0] = getTag(Units[i],"PropertyCode");
  aFields[1] = getTag(Units[i],"Name");
  aFields[2] = getTag(Units[i],"Bedrooms");
  aFields[3] = getTag(Units[i],"Bathrooms");

  addRows(aFields,tableBody);
}
Here addRows is a function that creates a new row and 4 cells of the current document and adds them into the tablebody:
Next Page