Ajax integration: An Example of Aaxsys Integration via XML and Ajax

Integrating Aaxsys Search Availability in your web pages

Introduction.
There are two sides to Aaxsys. On the "private" side, the internal users add, edit and employ data records. On the public side, a part of this data is made available to the general public, mainly via Search Availability. The client submits a preferences form, and Aaxsys provides an availability listing of units within your (or bundled) membership space, and the client may proceed to a unit view page, and eventually all the way to make an online booking.

You may have already placed the Search Form on your website, instead of using the standard code-generated search form ("availfrm") provided by Aaxsys. And you may naturally want to keep the client on your webpages, instead of re-directing to www.aaxsys.com for the search availability listing. The purpose of the present article is to provide a toolkit for the member to directly integrate the public side of Aaxsys into their web pages. This is achieved by combining two elements. First, Aaxsys can provide "raw" search availability data in the form of XML. Secondly, by using Ajax, this data can be presented on your web page without ever leaving the page, and completely using your own design.

In the sequel, we describe the main ingredients of this integration. An entire example application ("toolkit") is made available and the reader may use it as a simple starting point for creating a fully functional page.

Obtaining XML output.
Let us consider a standard Aaxsys search form:

Furnished/Unfurnished:
City
Zip code
Reservation begins
Reservation ends
Number of bedrooms
Show results per page

When a form is submitted by the client, the output from Aaxsys is an html webpage. In order to receive XML, add a hidden field that tells Aaxsys to produce simple XML instead of a fully formatted html page:

<input type="hidden" name="TYPE" value="XML">

The same result is achieved by adding the parameter "&TYPE=XML" into the query string that calls the program "availres". However, in case nothing else is done, sending this additional parameter will produce a well-formatted XML page in the client's browser. In order to directly integrate the search results in the webpage, another technology must be brought into the action.

Ajax basics.
Javascript allows a document ("web page") to capture and act on client events such as mouse clicks. The latest browsers support an extension of traditional Javascript with an object that enables asynchronous calls to a remote server to provide XML (that actually does not even have to be XML) for updating the current page. This technique (Ajax) is simply based on an object (XMLHttpRequest) that is created and used to retrieve the requested data:

function createXMLHttpRequest() {
  if(window.ActiveXObject) {
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}

This part is invariably the same. Once the object is created, we will use it to post the fields of our search form:

function startAvailabilityRequest() {
url = "http://www.aaxsys.com/cgi-bin/availres?"
  + "&T=" + iTimes;
iTimes++;
var strQuery = createQueryString();
if (confirm('Start a new availability request?')) {
clearResults();
alert("Starting a new request");

createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("POST",url,true);
xmlHttp.setRequestHeader("Content-Type",
  "application/x-www-form-urlencoded;");
xmlHttp.send(strQuery);
}}

The above function first defines the url of the correct Aaxsys program for the XML request. (The "times" parameter is added only to make this url unique, to avoid cache-related problems.) Next, the query string is created. This is done simply by collecting the current values of the input fields of our search form, and concatenating them into a "key-value" string. All input elements of the search form actually are SELECT elements, and the following - for example - extracts the value of the "City" field:

sel = document.getElementById("CITY");
City = sel.options[sel.selectedIndex].value;

After starting the query string with necessary (and always the same) values, we add the selected values:

var strQuery = "Source=AAXSYS&Vendor=HIPARAMA" + 
      &TYPE=XML" + "&City="+City+"&Bedrooms=

Using the Ajax API

Integrating Aaxsys Search Availability in your web pages