Using the Ajax API - Page 3

function addRows(fields,tBody) {
var row,cell,textNode;

  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");

  tBody.appendChild(row);
}

Adding the unit pictures.
The above code builds a table with 4 columns for the very basic units data fields (unit code, name, bedrooms and bathrooms). However, Aaxsys also provides pre-built links to external information. The simplest of these is the picture link. You may either use this to make a unit picture directly appear on the web page, for example as the 5th column in the "searchresults" table. In this case, the graphic of the picture is fetched from the Aaxsys web server. On the other hand, you may want to use images stored in your own website. In this case you would build the required image link from the provided unit data (unit code) using Javascript. In the following we use Aaxsys as the image source.

  aFields[4] = getTag(Units[i],"PictureLink");
  aFields[4] = 'http://www.aaxsys.com' + aFields[4];

img = document.createElement("img");
  img.src = fields[4];

  scaleImage(img,100);

  cell.appendChild(img);
  row.appendChild(cell);

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;}
}

But what about Cross-Domain Security?
The above example is available in a complete form under http://www.aaxsys.com/testform.htm. The reader may test it for various choices of bedrooms and reservation dates. However, the working of this example is limited to www.aaxsys.com itself. It cannot be used for the very purpose of integrating Aaxsys data with your own web pages (residing in a separate domain). The Same Origin Policy of the browser's Javascript security would be broken and therefore would produce a permission denial.

Fortunately, there is a natural solution to enable such cross-domain requests. If the url points to your own domain, then Ajax has no problem using the resource. Therefore, if you can provide another script that can make the remote call to Aaxsys on behalf of the Javascript and then return the resulting XML, then the modified example will work as intended. Luckily, this kind of proxy can be provided with a minimum effort. Presumably your website has PHP enabled. You can download a simple PHP script from developer.yahoo.com. In order to work with the above example, two changes are needed: In the script, change the hostname to "www.aaxsys.com". To handle our POST requests, the while loop in the yahoo script should be replaced by a for loop such as

if ($_POST['yws_path']) {
 $postvars = '';
 for ($i=0;$i < count($_POST);$i++) {
   $postvars .= key($_POST).'='.current($_POST).'&';
   next($_POST);
 }
}