Aaxsys Notes
  More notes

December 20, 2007

Using the Ajax API - Page 4

Previous page
To use the PHP proxy script instead of a direct call, simple changes have to be made into the Ajax code as well.
We replace the 4 first lines of startAvailabilityRequest with 
path = "/cgi-bin/availres?"+"&T=" + iTimes;
url = "/proxy.php";
iTimes++;
var strQuery = createQueryString() + 
  "&yws_path=" + encodeURIComponent(path);
The url is now "proxy.php" (the name we have chosen for the PHP script) instead of that of "availres", and the remote resource url is posted as the value of "yws_path", to be read by the PHP script and then used to call the correct Aaxsys program in the remote server.
Code Listing. 
<html>
<head>
<title>An Example of Search Availability Ajax/XML integration</title>
</head>
<script language="JavaScript">

var xmlHttp;
var strError = "";
var strNoAvailability = ""; 
var iTimes = 0;
var aFields = new Array(32);

function getTag(res,name) {
var temp = "";
  if(res.getElementsByTagName(name)[0].hasChildNodes()) {
   temp = res.getElementsByTagName(name)[0].firstChild.nodeValue;
  } else
  temp = "";
  return temp;
}

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

function getAvailabilityResults() {

var results = xmlHttp.responseXML;
var Error = results.getElementsByTagName("Error");
  if(Error.length != 0) {if(Error[0].hasChildNodes()) {
    strError = Error[0].firstChild.nodeValue;
  }};
var Result = results.getElementsByTagName("SearchResults");
  if(Result.length != 0) {if(Result[0].hasChildNodes()) {
    NoAvailability = Result[0].getElementsByTagName("NoAvailabilityMsg");
    if (NoAvailability.length != 0) {if(NoAvailability[0].hasChildNodes())  
      strNoAvailability = NoAvailability[0].firstChild.nodeValue;
    }
    HiddenFields = Result[0].getElementsByTagName("Hidden");
    AvailableUnits = Result[0].getElementsByTagName("AvailableUnits");
    if (AvailableUnits[0].hasChildNodes()) {
      Units = AvailableUnits[0].getElementsByTagName("Unit");
    }
  }} 
if(strError !="") 
  alert(strError) ;
if(strNoAvailability !="") 
  alert(strNoAvailability);
}

function clearResults() {

var tableBody = document.getElementById("searchresultsbody");
var i = tableBody.childNodes.length;
  for (var j = i-1; j>=0; j--) {
    tableBody.removeChild(tableBody.childNodes[j]);
  }
document.getElementById("searchresults").style.visibility="hidden";
strError = "";
strNoAvailability = "";
}

function scaleImage(image,iDim) {
var h = image.height;
var w = image.width;
if(h >= w) {image.height = iDim;
           if (w > 0) {
             image.width = iDim * (w/h)}
           else
             image.width = 0;}
else  {image.width = iDim;
         if (h > 0) {
           image.height = iDim * (h/w)}
         else
           image.height = 0;}
}

function addRows(fields,tBody) {
var row,cell,textNode,img;
  row = document.createElement("tr");
  cell = document.createElement("td");
  txtNode = document.createTextNode(fields[0]);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  cell = document.createElement("td");
  txtNode = document.createTextNode(fields[1]);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  cell = document.createElement("td");
  txtNode = document.createTextNode(fields[2]);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  cell = document.createElement("td");
  txtNode = document.createTextNode(fields[3]);
  cell.appendChild(txtNode);
  row.appendChild(cell);
  cell = document.createElement("td");
  img = document.createElement("img");
  img.src = fields[4];
  scaleImage(img,100);
  cell.appendChild(img);
  row.appendChild(cell);

  tBody.appendChild(row);
}

function publishAvailabilityResults() {

var nrUnits = Units.length;
var tableBody = document.getElementById("searchresultsbody");
document.getElementById("searchresults").style.visibility="visible";

  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");
  aFields[4] = getTag(Units[i],"PictureLink");

  aFields[4] = 'http://www.aaxsys.com' + aFields[4];

  addRows(aFields,tableBody);

  }
}

function getSelectedVal(id) {
  sel = document.getElementById(id);
  return sel.options[sel.selectedIndex].value;
}

function createQueryString() {
  var City = getSelectedVal("CITY");
  var Bedrooms = getSelectedVal("BEDROOMS");
  var BeginDay =  getSelectedVal("BEGINDAY");
  var BeginMonth =  getSelectedVal("BEGINMONTH");
  var BeginYear =  getSelectedVal("BEGINYEAR");
  var EndDay =  getSelectedVal("ENDDAY");
  var EndMonth =  getSelectedVal("ENDMONTH");
  var EndYear =  getSelectedVal("ENDYEAR");
  var iResults = getSelectedVal("RESULTS");
  var Furnished = getSelectedVal("FURNISHED");
  var strQuery = "Source=AAXSYS&Vendor=HIPARAMA&TYPE=XML" + 
     "&City="+City+"&Bedrooms="+Bedrooms+"&Results="+iResults+"&Furnished="+Furnished+
     "&BeginDay="+BeginDay+"&BeginMonth="+BeginMonth+"&BeginYear="+BeginYear+
     "&EndDay="+EndDay+"&EndMonth="+EndMonth+"&EndYear="+EndYear;
  return strQuery;
}

function handleStateChange() {
  if(xmlHttp.readyState == 4) {
    if(xmlHttp.status == 200) {
      getAvailabilityResults();
      if((strError=="")&&(strNoAvailability=="")) {
        publishAvailabilityResults();
        alert("Results Published")
      }
    }
  }
}

function startAvailabilityRequest() {
path = "/cgi-bin/availres?"+"&T=" + iTimes;
url = "/proxy.php";
iTimes++;
var strQuery = createQueryString() + "&yws_path=" + encodeURIComponent(path);
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);
}}

</script>
<style>
td {font-family: arial,helvetica,sans-serif;font-size:10pt;}
table.results {visibility:hidden;}
table.results td {border:1px solid #9fc7c7;}
</style>
<body>
<h2>Explore Suite Availability</h2>
<form action="/cgi-bin/availres" method="post" >
<input type=hidden name = "SOURCE" value = "AAXSYS">
<input type=hidden name = "VENDOR" value = "HIPARAMA">
<input type=hidden name = "AVLVENDORS" value = "HIPARAMA">
<input type=hidden name = "TYPE" value = "XML">

<table  style="width: 400;" bgcolor="#ffffff" border="0" cellpadding = 0
cellspacing = "4">
<tr>
<td class = "selpro">Furnished/Unfurnished:</td>
<td class = "selpro">
<select name = "FURNISHED" id="FURNISHED" SIZE=1>
<option value = "FURNISHED" selected>FURNISHED
<option value = "FURNISHED"> Furnished
<option value = "UNFURNISHED"> Unfurnished
<option value = "BOTH"> Both
</select>
</tr>
<tr>
<td class = "selpro">City</td>
<td class = "selpro">
<select name = "CITY" id="CITY" SIZE = "1" style="width:100pt;">
<option value = "*">ALL CITIES
<option value = "Pahoa">Pahoa</select>
</td></tr>
<tr>
<td class = "selpro">Zip code</td>
<td class = "selpro">
<input type = text name = "ZIP" id="ZIP" value = "" size = "10"> </td>
</tr>
<tr>
<td class = "selpro">Reservation begins</td><td>
<style>select {border:1px solid #9fc7c7;}</style><script> thisDate = new Date();var months = new Array("Jan", 
"Feb","Mar", "Apr", "May", "Jun", "Jul", "Aug","Sep", "Oct", "Nov", "Dec");function setCurrentDate() 
{document.write('<option value = "'+thisDate.getDate()+'" selected>'+thisDate.getDate());};function setCurrentMonth() 
{document.write('<option value = "'+(thisDate.getMonth()+1)+'" selected>' + months[thisDate.getMonth()]);};function 
setCurrentYear() {document.write('<option value = "'+thisDate.getFullYear()+'" selected>' 
+thisDate.getFullYear());};</script><select name="BEGINMONTH" id = "BEGINMONTH" 
size=1><script>setCurrentMonth();</script><option value = "01"> Jan<option value = "02"> Feb<option value = "03"> 
Mar<option value = "04"> Apr<option value = "05"> May<option value = "06"> Jun<option value = "07"> July<option value = 
"08"> Aug<option value = "09"> Sep<option value = "10"> Oct<option value = "11"> Nov<option value = "12"> 
Dec</select><select name="BEGINDAY" id = "BEGINDAY" size=1><script>setCurrentDate();</script><option value = "01"> 
01<option value = "02"> 02<option value = "03"> 03<option value = "04"> 04<option value = "05"> 05<option value = "06"> 
06<option value = "07"> 07<option value = "08"> 08<option value = "09"> 09<option value = "10"> 10<option value = "11"> 
11<option value = "12"> 12<option value = "13"> 13<option value = "14"> 14<option value = "15"> 15<option value = "16"> 
16<option value = "17"> 17<option value = "18"> 18<option value = "19"> 19<option value = "20"> 20<option value = "21"> 
21<option value = "22"> 22<option value = "23"> 23<option value = "24"> 24<option value = "25"> 25<option value = "26"> 
26<option value = "27"> 27<option value = "28"> 28<option value = "29"> 29<option value = "30"> 30<option value = "31"> 
31</select><select name="BEGINYEAR" id = "BEGINYEAR" size=1><script>setCurrentYear();</script><option value = "2006"> 
2006<option value = "2007"> 2007<option value = "2008"> 2008<option value = "2009"> 2009<option value = "2010"> 
2010<option value = "2011"> 2011<option value = "2012"> 2012<option value = "2013"> 2013<option value = "2014"> 
2014<option value = "2015"> 2015<option value = "2016"> 2016</select> 
</td>
</tr>
<tr>
<td class = "selpro">Reservation ends</td><td>
<style>select {border:1px solid #9fc7c7;}</style><script> thisDate = new Date();var months = new Array("Jan", 
"Feb","Mar", "Apr", "May", "Jun", "Jul", "Aug","Sep", "Oct", "Nov", "Dec");function setCurrentDate() 
{document.write('<option value = "'+thisDate.getDate()+'" selected>'+thisDate.getDate());};function setCurrentMonth() 
{document.write('<option value = "'+(thisDate.getMonth()+1)+'" selected>' + months[thisDate.getMonth()]);};function 
setCurrentYear() {document.write('<option value = "'+thisDate.getFullYear()+'" selected>' 
+thisDate.getFullYear());};</SCRIPT><select name="ENDMONTH" id = "ENDMONTH" 
size=1><SCRIPT>setCurrentMonth();</SCRIPT><option value = "01"> Jan<option value = "02"> Feb<option value = "03"> 
Mar<option value = "04"> Apr<option value = "05"> May<option value = "06"> Jun<option value = "07"> July<option value = 
"08"> Aug<option value = "09"> Sep<option value = "10"> Oct<option value = "11"> Nov<option value = "12"> 
Dec</select><select name="ENDDAY" id = "ENDDAY" size=1><script>setCurrentDate();</script><option value = "01"> 01<option 
value = "02"> 02<option value = "03"> 03<option value = "04"> 04<option value = "05"> 05<option value = "06"> 06<option 
value = "07"> 07<option value = "08"> 08<option value = "09"> 09<option value = "10"> 10<option value = "11"> 11<option 
value = "12"> 12<option value = "13"> 13<option value = "14"> 14<option value = "15"> 15<option value = "16"> 16<option 
value = "17"> 17<option value = "18"> 18<option value = "19"> 19<option value = "20"> 20<option value = "21"> 21<option 
value = "22"> 22<option value = "23"> 23<option value = "24"> 24<option value = "25"> 25<option value = "26"> 26<option 
value = "27"> 27<option value = "28"> 28<option value = "29"> 29<option value = "30"> 30<option value = "31"> 
31</select><select name="ENDYEAR" id = "ENDYEAR" size=1><script>setCurrentYear();</script><option value = "2006"> 
2006<option value = "2007"> 2007<option value = "2008"> 2008<option value = "2009"> 2009<option value = "2010"> 
2010<option value = "2011"> 2011<option value = "2012"> 2012<option value = "2013"> 2013<option value = "2014"> 
2014<option value = "2015"> 2015<option value = "2016"> 2016</select> 
</select>
</td>
</tr>
<tr><td class="selpro">Number of bedrooms</td>
<td class = "selpro">
<select name="BEDROOMS" id="BEDROOMS" size=1 class="selpro">
<option value = "" selected> Any 
<option value = "0"> 0
<option value = "1"> 1
<option value = "2"> 2
<option value = "3"> 3
<option value = "4"> 4
<option value = "5"> 5
<option value = "6"> 6
<option value = "7"> 7

<option value = "8"> 8
<option value = "9"> 9
<option value = "10"> 10
</select> 
</td></tr>
<tr><td class="selpro">Show results per page</td>
<td class = "selpro">
<select name="RESULTS" size=1 class="selpro">
<option value = "30" selected> 30
<option value = "10"> 10
<option value = "20"> 20
<option value = "30"> 30
<option value = "40"> 40
<option value = "50"> 50
<option value = "ALL"> ALL
</select>
</td></tr>
</table>
<input type=button align="left" value="Submit" name="submit" onClick="startAvailabilityRequest();">
      
<input type=RESET align = "left" value="Reset" name="RESET">
</form>

<table id="searchresults" border="1" class="results">
<tr><th colspan = "5">Search Results</th></tr>
<tr><th>Property</th><th>Name</th><th>Bedrooms</th><th>Bathrooms</th><th>Picture</th></tr>
<tbody id="searchresultsbody">
</tbody>
</table> 
</body>
</html>
Aaxsys Notes, December 20, 2007