Home » Tutorials Advanced Tutorial

How to Develop Web Applications with Ajax: Part 3
2.2/5.0 (15 votes total)
Rate:

Jonathan Fenocchi
March 08, 2006
Jonathan Fenocchi
Jonathan Fenocchi is a talented young developer coming at you from southern TX, USA. Accessibility advocate, proficient programmer, and determined designer, Jonathan spends his free time researching new technologies, developing new ideas, playing video games and listening to rock music. Jonathan runs a Slightly Remarkable blog where he focuses on web-related content, and continues to pursue his goals as an aspiring web developer."
Jonathan Fenocchi has written 20 tutorials for JavaScriptSearch.
View all tutorials by Jonathan Fenocchi...

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): 

 

 

 

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:

 

 

 

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.

The first step is connecting to the MySQL database to retrieve the data. This article is focused on JavaScript, so I won't explain how the following code works; you'll need to learn how to connect to a MySQL database in more detail on your own.

Once you've connected to the database, you'll retrieve the information with a query as below:

This gives you the information you want, but it isn't output properly . We need to change the PHP to spit out the data as XML, not plain text. There are several changes we must make in order for this to occur.

<?php
 header('Content-Type: text/xml');
 echo '<?xml version="1.0" encoding="UTF-8"?>';
 echo "\n<data>\n<pets>\n";
 $user = "admin";
 $pass = "adminpass";
 $host = "localhost";
 $conn = mysql_connect($host, $user, $pass) or
 die("Unable to connect to MySQL.");
 $db   = mysql_select_db("pets",$conn) or 
die("Could not select the database.");
 $result = mysql_query("SELECT * FROM `pets`");
  if(mysql_num_rows ($result) == 0){
     die ('Error: no data found in the database.');
  }
  while ($row = mysql_fetch_assoc($result)){
     echo '<'.$row['pet'].' tasks="'.$row['tasks'].
	'" />'."\n";
  }
  echo "</pets>\n</data>";
 mysql_close($db);
?>

 

Let's take the above, one line at a time, and analyze how it's outputting the XML. I've color-coded each line to make it easier to understand.

  • The maroon part of the code sends an HTTP header that causes user agents to understand the output of the PHP file to be XML. This is what makes the file appear to be an XML file when you view it in your browser, even though your file has a ".php" extension.
  • The blue part of the code outputs the XML declaration. This is the first line of the XML that I showed you earlier.
  • The green part of the code outputs the first two tags: our root tag, <data> and our <pets> tag, which holds all of the pets.
  • The black part of the code is the toughest part. This is inside a loop that runs until there is no more data in your database. Each time the code runs, it outputs a new node with a tag name of a pet and a tasks attribute. For example, if the first pet in your database is "Cat" and its corresponding task field is "Feed, Water, Comb for fleas," then PHP will output <Cat tasks="Feed, Water, Comb for fleas" /> in the XML document. The "\n" part just puts a new line at the end, so that the XML code isn't all on the same line.
  • The red part of the code closes the </pets> and </data> nodes, which were opened at the beginning of the document. This part is important because the XML must be well-formed in order for it to work well.

Now that we've gotten PHP to output the XML, all we have to do to update the XML is login to our MySQL database and make the changes we want. Pretty cool, agreed? We can use exactly the same JavaScript as in the last article to retrieve this data, because the XML output is exactly the same.

Conclusion

You can extend this further by simply using XML to store and retrieve data. In other words, you can use PHP to write to your XML file and then have JavaScript read that XML file. With Ajax, you can also periodically check to see if that XML file has been updated and, if so, update the page accordingly.

Add commentAdd comment (Comments: 0)  

Advertisement

Partners

Related Resources

Other Resources

arrow