Developing Web Applications with Ajax, Part 3 | WebReference

Developing Web Applications with Ajax, Part 3

current pageTo page 2
[next]

Developing Web Applications with Ajax, Pt. 3

In part 3 of this series on Ajax, we'll learn how to use Ajax in conjunction with server-side processing and how these technologies can produce powerful web applications. If you're interested in learning how to create webapps like GMail or Google Maps, this is a basic approach (although those are much more complex than we will get into in this article). For this article, I use PHP as the server-side language, but Ajax is compatible with any server-side language, so feel free to use whichever language is your favorite!

Once more, we begin with code from the previous article, so you might need to read it for reference.

So here's the HTML page (with the JavaScript): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Developing Web Applications with Ajax - Example</title>
  <script type="text/javascript"><!--
  function ajaxRead(file){
   var xmlObj = null;
   if(window.XMLHttpRequest){
      xmlObj = new XMLHttpRequest();
   } else if(window.ActiveXObject){
      xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      return;
   }
   xmlObj.onreadystatechange = function(){
    if(xmlObj.readyState == 4){
       processXML(xmlObj.responseXML);
    }
   }
   xmlObj.open ('GET', file, true);
   xmlObj.send ('');
  }
  function processXML(obj){
   var dataArray = obj.getElementsByTagName('users')[0].childNodes;
   var dataArrayLen = dataArray.length;
   var insertData = '<table><tr><th>'
    + 'Pets</th><th>Tasks</th></tr>';
   for (var i=0; i<dataArrayLen; i++){
     if(dataArray[i].tagName){
        insertData += '<tr><td>' + dataArray[i].tagName + '</td>'
                   +  '<td>' + dataArray[i].getAttribute('tasks') + '</td></tr>';
     }
   }
   insertData += '</table>';
   document.getElementById ('dataArea').innerHTML = insertData;
  }
  //--></script>
  <style type="text/css"><!--
  table, tr, th, td {
   border: solid 1px #000;
   border-collapse: collapse;
   padding: 5px;
  }
  --></style>
 </head>
 <body>
  <h1>Developing Web Applications with Ajax</h1>
  <p>This page demonstrates the use of Asynchronous Javascript and XML (Ajax) technology to
  update a web page's content by reading from a remote file dynamically -- no page reloading
  is required. Note that this operation does not work for users without JavaScript enabled.</p>
  <p>This page particularly demonstrates the retrieval and processing of grouped sets of XML data.
  The data retrieved will be output into a tabular format below.
  <a href="#" onclick="ajaxRead('data.php'); return false">See the demonstration</a>.</p>
  <div id="dataArea"></div>
 </body>
</html>

Note: The only modification was that we changed "data.xml" in our ajaxRead() call to "ajax.php." This is because we'll be using PHP to output XML (if you open the PHP file in your browser, it will appear as an XML file -- we're just going to do processing in that file that couldn't be done with simply XML). This is what the output of the PHP file will look like: 

<?xml version="1.0" encoding="UTF-8"?>
<data>
 <pets>
   <Cat tasks="Feed, Water, Comb flees" />
   <Dog tasks="Feed, Water, Put outside" />
   <Fish tasks="Feed, Check oxygen, water pureness, etc." />
 </pets>
</data>

While this will be the output, we're going to retrieve this information from a MySQL database. Instead of having to modify the XML file from now on, we can modify the data in our database, extract it via PHP and retrieve it onto a page with Ajax -- all this, and still no page reloading occurs.

current pageTo page 2
[next]

Created: November 15, 2005

URL: https://webreference.com/programming/javascript/jf/column14/1