<<Back
Ajax Sample
You can use
Ajax to load the presentation data for the recommendations.
You can download the presentation data as either HTML and insert this into the page or as JSON, XML or any other format and dynamically generate the HTML.
This is not intended to be a guide in the use of Ajax.
For this purpose there exits a plethora of resources such as
W3C Schools.
Presentation Data as HTML
A page is created - for example RecsDisplay.php - that takes an array of product identifiers as query string. The purpose of the page is only to display recommendations.
This page is loaded using Ajax and the returned HTML inserted using javascript.
The page http://www.mysite.com/RecsDisplay.php would load a page that would look something like below image.
<html>
<head>
<link rel="stylesheet" href="style.css"></link>
<script type="text/javascript" charset="UTF-8" src="http://service.avail.net/2009-02-13/dynamic/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/emark.js"></script>
<script type="text/javascript">
function populatePredictions(){
var xmlHttp = null;
var emark = new Emark();
var prodRecs = emark.getRecommendations("myTemplate", ["ProductId:myProductId"]);
emark.commit(function() {
//Get xml http object using a help function. The code for this function is not included.
xmlHttp = GetXmlHttpObject();
//State which function to load when data has been returned from server
xmlHttp.onreadystatechange=recsPresentationDone;
//Set the url to request
xmlHttp.open("GET", "RecsDisplay.php?ProdIds="+prodRecs, true);
//Request the page
xmlHttp.send(null);
});
}
//Function that is executed once the data has been returned from server
function recsPresentationDone(){
if (xmlHttp.readyState==4){
//Put the returned HTML in the recommendations div tag
document.getElementById('recommendations').innerHTML = xmlHttp.responseText;
}
}
</script>
</head>
<body onload="populatePredictions();">
<b>Recommendations</b>
<div id="recommendations"></div>
</body>
</html>
Presentation Data as XML, JSON and so on
In this sample the meta data for the recommendations is returned as XML.
The format could equally well be JSON, CSVm another XML syntax or any other format.
In this sample everything is identical to the sample above except that function that handles the data returned from the server.
The returned XML is shown below.
<return>
<value>
<ActionId>0590353403</ActionId>
<Title>Harry Potter and the Sorcerer's Stone (Harry Potter #1)</Title>
<Price>18.95</Price><Image>0786222727.jpg</Image>
<Author>J. K. Rowling</Author>
</value>
<value>
<ActionId>0375826696</ActionId>
<Title>Eragon (Inheritance Trilogy #1)</Title>
<Price>9.95</Price>
<Image>0552553204.jpg</Image>
<Author>Christopher Paolini</Author>
</value>
<value>
<ActionId>0375840400</ActionId>
<Title>Eldest (Inheritance Trilogy #2)</Title>
<Price>10.95</Price>
<Image>0552554103.jpg</Image>
<Author>Christopher Paolini</Author>
</value>
</return>
In the function below the meta data for the recommendation is entered into a HTML template and then put on the page.
//Function that is executed once the data has been returned from server
function recsDataDone(){
if (xmlHttp.readyState==4){
//Create the HTML template for the recommendations
sHtmlTemplate = '<a class="itemTitleLink" href="prodpage.htm?ProdId=[ActionId]"><img src="images/[Image]" border=0 width="60" align="left">[Title]</a>' +
'<div class="relatedAuthor"><br>[Author]</div>' +
'<div class="relatedPrice">€[Price]</div>' +
'<div class="relatedAuthor"><a href="javascript:addToCart(\'[ActionId]\');">Add To Cart</a></div>';
//Help funcction that returns a XML document object for the XML-string returned from the server
doc = GetXMLDomObject(xmlHttp.responseText);
var sHtmlRecTable = "<table>"; //Will hold the HTML for the recommendations
//Misc variables
var sNodeName = ""; var sNodeValue = ""; var iColIndex = 0;
aValues = doc.getElementsByTagName("value");
//Go throught the XML and enter the data
for(i=0; i<aValues.length; i++){
x = aValues[i];
sNewHtml = sHtmlTemplate;
for (j=0;j<x.childNodes.length;j++){
sNodeName = x.childNodes[j].nodeName;
if (sNodeValue = x.childNodes[j].childNodes[0] != undefined){
sNodeValue = x.childNodes[j].childNodes[0].nodeValue;
}
while (sNewHtml.indexOf("[" + sNodeName + "]") > -1){
sNewHtml = sNewHtml.replace("[" + sNodeName + "]", sNodeValue);
}
}
sHtmlRecTable += "<tr><td>" + sNewHtml + "</td></tr>";
}
sHtmlRecTable += "</table>";
//Put the generated table in the recommendations div tag
document.getElementById('recommendations').innerHTML = sHtmlRecTable;
}
}