Connecting dbBee XDE with host page using AJAX

Remember, in previous article we mentioned that upon deploying XDE, the embed code page displays nothing but a link code and data preview.

In this article we’ll give you basic instructions on how to connect XDE with your host page.

For this example we will need the jQuery library, so make sure that you have included it somewhere in your page. If you do not have it included, use the following code to include it:


<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>

In this example, we will use XDE to display books in our library. XML returned by our XDE looks like this (we will show only two records here, to save the space):


<Books generated="2016-04-05T11:43:17">
    <BooksCount>28</BooksCount>
    <Book>
        <Author>Olav Martin Kvern</Author>
        <Title>Real World FreeHand 5.0/5.5</Title>
        <YearPublished>1996</YearPublished>
        <ISBN>0201883600</ISBN>
        <Publisher>Addison-Wesley Pub Co</Publisher>
        <Image>
           <img src="http://www.small-applications.com/biblioimg/0201883600.jpg" border="0">
        </Image>
    </Book>
    <Book>
       <Author>Andrew Troelsen</Author>
      <Title>C# and the .NET Platform</Title>
      <YearPublished>2001</YearPublished>
      <ISBN>1893115593</ISBN>
      <Publisher>Apress</Publisher>
      <Image>
         <img src="http://www.small-applications.com/biblioimg/1893115593.jpg" border="0">
      </Image>
    </Book>
</Books>

You’ll notice that root node Books has two child nodes BooksCount and Book. These are the names we defined in XDE wizard, when we created the project. BooksCount node appears only once and it contains a total number of records in the recordset (in this case 28 records). The other node, Book, has child nodes containing the values of the database fields Author, Title, YearPublished, ISBN, Publisher and Image. That node repeats for every record (in our case it means that our XML will have 28 nodes "Books”).

Now, to get this XML and to connect it with our page we need a div where we will display the fetched data and some jQuery:


<script>
$.ajax({
  url: "https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksXMLxmlapi.wbsp",
  cache: false
})
  .done(function( xmlDoc ) {
	  	$("#demo").append("The search returned "+$(xmlDoc).find("BooksCount").text() + " records<br/>");
		$(xmlDoc).find("Book").each(function(){
			$("#demo").append(
			"<h1>" +
			$(this).find("Title").text() +
			"</h1><h2>" +
			$(this).find("Author").text() +
			"</h2><h2>" + 
			$(this).find("Publisher").text() +
			"</h2><h3>" +
			$(this).find("YearPublished").text() +
			"</h3>" +
			$(this).find("Image").text()+"<hr>"
			);
		});
  });
 </script>
 <div id="demo"></div>

Let’s analyze this code. It is basically single jQuery ajax function with three basic settings:
url: the URL of our XDE project
cache: set to false so the function always fetch new content from server
.done – function that will process fetched XML (referred in function as xmlDoc)

So once the host page is ready, jQuery function $.ajax will fetch XML from specified URL. When document is loaded our custom function will process each node named "Book”, create HTML code using XML data in child nodes and append HTML code to div element with id "demo”. See live demo here.

Same can be accomplished using the plain JavaScript (without jQuery):


<script>
function loadXMLDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    procXMLDoc(xhttp);
    }
  };
  xhttp.open("GET", "https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksXMLxmlapi.wbsp", true);
  xhttp.send();
}
function procXMLDoc(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var tHTML="The search returned "+xmlDoc.getElementsByTagName("BooksCount")[0].childNodes[0].nodeValue + " records<br/>";
  var x = xmlDoc.getElementsByTagName("Book");
  for (i = 0; i <x.length; i++) {
    tHTML += "<h1>" +
    x[i].getElementsByTagName("Title")[0].childNodes[0].nodeValue +
    "</h1><h2>" +
    x[i].getElementsByTagName("Author")[0].childNodes[0].nodeValue +
    "</h2><h2>" + 
    x[i].getElementsByTagName("Publisher")[0].childNodes[0].nodeValue +
    "</h2><h3>" +
    x[i].getElementsByTagName("YearPublished")[0].childNodes[0].nodeValue +
    "</h3>"+x[i].getElementsByTagName("Image")[0].childNodes[0].nodeValue+"<hr>";
  }
  document.getElementById("demo").innerHTML = tHTML;
} 
loadXMLDoc();
</script>
<div id="demo"></div>

Although they seem to be very different, both scripts do the same thing in the very same way.

To see live demo in plain JavaScript, please click here.

So far, we demonstrated how XDE can be used to display all the records, without any search, pagination and formatting. That works great with small number of records, but for any serious use, we need more. That will be explained in the next blog.

Please like our
Facebook page
Arrows