Skip to content

Taking Ajax further with PHP

Peter's WebDev Workshop

First of all, I have to apologise. It's been literally two months since my last post in this series, and it's been more than that since I last looked at Ajax in PHP. OK, I might admit it, it was this comment that motivated me to pick up this series again. Oh, that and I'm now on the half term break, so I'm finally getting round to some things that have been on the back burner for a long time.

In our last Ajax tutorial, we got started with Ajax using PHP and made our first Ajax application.

Today, we're going to take Ajax a little further, by building a little application where our user selects a product from a pop-up list, and then we do a little Ajax dance to get some product details (and an image) and display them in a box below. We'll be making our own little XML schema which we'll use to pass information between the JavaScript in the user's browser and our PHP script on the server.

Requirements

For this tutorial, you'll need the following (and in brackets, I'll show you what I'll be using):

  • A web server running PHP (I'm using PHP 5, but it might work on PHP 4).
  • A decent browser (I'll be using Firefox 2.0.0.1).
  • A decent text editor and/or IDE that supports Unix line breaks if you download my set of files (I'm using the best web development IDE in the world, Quanta).
  • Some patience, time, determination and enough hair to rip out when the JavaScript is going wrong (check, check, check).

Also highly recommended, but not required, is the Firebug extension for Firefox, as it makes checking and debugging your JavaScript a lot easier.

All code in this tutorial is released under the Modified BSD Licence.

You might want to download yourself the finished project now, so you can see how it works and if you're not rewriting it yourself and just stepping through my code.

Download .zip
Download .tar.gz
Download .tar.bz2

What we're doing

Diagrams are always good, so let's briefly look at what we'll be doing (click to enlarge, or grab the PDF).

Ajax tutorial diagram

That's roughly how our system is going to work.

Our list of products that will appear in the <select> list will be populated by PHP on the pageload and for this tutorial, the product data that we'll be using will be hard-coded into PHP. There's no reason why you couldn't populate the list and fetch product details using a database, but to keep it simple, we'll stick with a set list for this tutorial. We will write it so that it's easily modifiable, though.

Our data

Here's data.php, which contains our product information.

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. // this file just contains our sample data for the application
  4. // you can edit, add to, and delete this data or use a database in a real situation
  5.  
  6. $products[1]['name'] = 'Big Green monster';
  7. $products[1]['description'] = 'If you want a monster, look no further than a Big Green one. Big Green have over 40 years experience making top-quality monsters, and at low, low prices.';
  8. $products[1]['price'] = 33.99;
  9.  
  10. $products[2]['name'] = 'Dalmatian';
  11. $products[2]['description'] = 'A white dog with black spots is just what you need. But don\'t take our word for it, speak to our happy customer.';
  12. $products[2]['price'] = 699.99;
  13.  
  14. $products[3]['name'] = 'The Latest Gadget';
  15. $products[3]['description'] = 'Can you live without The Latest Gadget? Probably, yes, but you don\'t have to! Buy it now and we guarantee you will be satisfied. Not an actual guarantee.';
  16. $products[3]['price'] = 9999.99;
  17.  
  18. $products[4]['name'] = 'Purple furry thing';
  19. $products[4]['description'] = 'Hey, it\'s purple and furry. Need we say more? You want one and so does everyone in your street.';
  20. $products[4]['price'] = 10.99;
  21.  
  22.  
  23. ?>

OK, fairly simple. From now on, we need to make sure all our PHP files include() or require() this data file.

Our interface

Here's index.php, our main interface with the user.

PLAIN TEXT
PHP:
  1. <?php
  2.  
  3. // this is our interface with the user.
  4.  
  5. require_once('data.php'); // import our data
  6.  
  7. ?>
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb">
  11. <head>
  12. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  13. <title>Product information page</title> 
  14.  
  15. <style type="text/css">
  16.  
  17. /* some really basic styles */
  18.  
  19. body {
  20.     background-color:#ffffff; font-family:Verdana,sans-serif; font-size:0.8em
  21. }
  22.  
  23. h1 {
  24.     font-family:'Trebuchet MS',sans-serif; font-size:1.5em
  25. }
  26.  
  27. </style>
  28.  
  29. <script type="text/javascript" src="ajaxprodselect.js"></script>
  30.  
  31. </head>
  32. <body>
  33. <h1>Product information page</h1>
  34.  
  35. <p>Welcome. Please buy lots of stuff from this website. To find out more about a product, choose it from
  36. the box below.</p>
  37.  
  38. <!-- we don't actually need a form tag, as it won't be submitted in the normal way in this example -->
  39.  
  40. <select name="chooseproduct" onchange="selectProduct(this.options[this.selectedIndex]);">
  41.  
  42. <!-- dummy element, deliberately the value is -1 -->
  43. <option value="-1" selected="selected">---</option>
  44.  
  45. <?php
  46.  
  47. // populate the box
  48.  
  49. foreach ($products as $number => $prod) {
  50.  
  51.     ?><option value="<?php echo $number;?>"><?php echo $prod['name'];?></option><?php
  52.  
  53. } // end foreach
  54.  
  55. ?>
  56. </select>
  57.  
  58. <br /><br />
  59. <div id="descriptionarea">Choose a product to see its description here.</div>
  60.  
  61. </body>
  62. </html>

The Ajax backend

Here's our PHP file that will act as our backend. It's the script JavaScript calls behind the scenes to get the data. As you can see, we have our own XML setup going on below, which I'll explain in a minute.

PLAIN TEXT
PHP:
  1. require_once('data.php'); // import our data
  2.  
  3. // start the XML document
  4.  
  5. header('Content-Type: text/xml');
  6. echo '<'.'?'.'xml version="1.0" ?'.'>'."\n";
  7. ?>
  8. <productresponse>
  9. <?php
  10.  
  11. // if there is no ID, give an error and quit
  12.  
  13. if (empty($_GET['prodid'])) {
  14.  
  15.     ?><requeststatus>ERROR</requeststatus></productresponse><?php
  16.     die();
  17.  
  18. }
  19.  
  20. // similarly, if the number is -1, or too big
  21.  
  22. if ($_GET['prodid'] == -1 OR ($_GET['prodid']> count($products)) ) {
  23.  
  24.     ?><requeststatus>ERROR</requeststatus></productresponse><?php
  25.     die();
  26.  
  27. }
  28.  
  29. // otherwise, the request is OK, so let JavaScript know
  30.  
  31. // then fetch name and description of the product
  32. ?>
  33. <requeststatus>OK</requeststatus>
  34.  
  35. <productname><?php echo $products[$_GET['prodid']]['name'];?></productname>
  36. <productdesc><?php echo $products[$_GET['prodid']]['description'];?></productdesc>
  37. <productprice><?php echo $products[$_GET['prodid']]['price'];?></productprice>
  38.  
  39. </productresponse>

Our XML schema here is made up of the following:

productresponse is the root tag, and is only really used here as a container.

requeststatus lets JavaScript know whether the request was OK, or failed, identified by ERROR or OK. (If there is an error, that's it - the end of the XML document. We won't bother including the tags below).

productname contains the product name (funnily enough).

productdesc contains the product description.

productprice is for the price.

If you've got all the files in place so far, try browsing to ajax.php. If you're using a decent browser, you should get a nice syntax-highlighted XML tree (nice for debugging). You'll notice that you've got an error here, and rightly so - you didn't specify a product ID!

Try going to ajax.php?prodid=1. That's better. You should see the data in ourtags. That's our fully formed XML document that JavaScript will have the job of parsing and formatting. Sounds like fun...

The JavaScript

Now, finally, the hardest part of the whole exercise - the JavaScript that actually makes sense of the XML and displays it in our box. Bear with me here, let's just get the code down here then I'll explain what we're doing.

PLAIN TEXT
JAVASCRIPT:
  1. var ajaxObject = false;
  2.  
  3. // this is our object which gives us access
  4. // to Ajax functionality
  5.  
  6.  
  7. function selectProduct(productId) {
  8.  
  9.         if (window.XMLHttpRequest) { // Gecko, KHTML/WebKit, and IE7 apparently
  10.             ajaxObject = new XMLHttpRequest();
  11.             if (ajaxObject.overrideMimeType) {
  12.                 ajaxObject.overrideMimeType('text/xml');
  13.                 // ^ is for older Mozilla-based browsers
  14.             }
  15.         } else if (window.ActiveXObject) { // IE5 or IE6
  16.             try {
  17.         // IE has two methods of calling the object, typical!
  18.                 ajaxObject = new ActiveXObject("Msxml2.XMLHTTP");
  19.             } catch (e) {
  20.                 try {
  21.                     ajaxObject = new ActiveXObject("Microsoft.XMLHTTP");
  22.                 } catch (e) {}
  23.             }
  24.         }
  25.  
  26.  
  27.         if (!ajaxObject) {
  28.         alert("Sorry, your browser doesn't support this feature.");
  29.             return false;
  30.         }
  31.  
  32.  
  33.         ajaxObject.onreadystatechange = selectProduct_response;
  34.     ajaxObject.open('GET', 'ajax.php?prodid=' + productId.value, true);
  35.         ajaxObject.send(null);
  36.  
  37.     return true;
  38.  
  39. } // end selectProduct()
  40.  
  41. function selectProduct_response() {
  42.  
  43.     if (ajaxObject.readyState == 4) { // it's finished
  44.  
  45.         if (ajaxObject.status == 200) { // the HTML request is all OK
  46.  
  47.             // do the response
  48.             var xmlData = ajaxObject.responseXML.documentElement;
  49.    
  50.    
  51.             if (xmlData.getElementsByTagName("requeststatus")[0].firstChild.data != 'OK') {
  52.                 // if <requeststatus> isn't OK, then stop processing
  53.                 alert("Sorry, there was an error.");
  54.                 return;x
  55.             }
  56.    
  57.             var productName = xmlData.getElementsByTagName("productname")[0].firstChild.data;
  58.             // extract product name from the XML
  59.    
  60.             var productDesc = xmlData.getElementsByTagName("productdesc")[0].firstChild.data;
  61.             // same with product description
  62.    
  63.             var productPrice = xmlData.getElementsByTagName("productprice")[0].firstChild.data;
  64.             // and price
  65.    
  66.             // now we've extracted our data, let's format it
  67.    
  68.             var divContent = '<strong>Name:</strong> ' + productName + '<br /><br /><strong>Description:</strong> ' + productDesc + '<br /><br /><strong>Price</strong> ' + productPrice;
  69.    
  70.             // and place it in our div
  71.             document.getElementById('descriptionarea').innerHTML = divContent;
  72.  
  73.        
  74.         } // end if status is 200   
  75.  
  76.         else // if the HTTP code is anything other than 200 OK
  77.         {
  78.            
  79.                 alert("Sorry, there was an error.");
  80.             return;
  81.  
  82.         }
  83.  
  84.     } // end readyState is 4
  85.  
  86. } // end selectProduct_response

Dissecting the JavaScript

You should be able to decipher the vast majority of this already. If you've been through the first tutorial (and you certainly should have), you should understand exactly what we're doing with the basic Ajax stuff.

The new and important bit here are the lines like this:

PLAIN TEXT
JAVASCRIPT:
  1. var productName = xmlData.getElementsByTagName("productname")[0].firstChild.data;

All that's really saying is this:

  • Go to the XML document and fetch me all the elements with the tag name 'productname'.
  • Now get me the first instance of that tag (that's the [0] bit)
  • Go to the first child (meaning the stuff inside that tag)
  • Fetch me the content of the stuff inside that tag

We do that for the name, description and price and each time put that information in a variable.

We then just concatenate these variables together with some HTML formatting and line breaks, and that's what is going inside our div.

We put that in our div, and we're done!

You might also notice the line:

PLAIN TEXT
JAVASCRIPT:
  1. if (xmlData.getElementsByTagName("requeststatus")[0].firstChild.data != 'OK')

It's exactly the same idea, but instead of putting the content of the requeststatus tag into a variable so we can use it later, we just check to see if it isn't 'OK'. And if it isn't, we throw an error dialogue box.

It works!

At this point, our example works very well. Very very well. If you head over to index.php, you should be able to simply select a product from the list and have the description pop into the correct box within a second or two.

It might not seem very impressive for the level of work - and in fact, we could have done this without XML, but now that you've got some basic XML parsing with JavaScript ability, you can move on to cooler things with Ajax.

I could go on and extend this application some more, but this is already a monster post and it's about time I signed off this tutorial. We may well be returning to this project at a later date to add some more functionality to it, but I can't guarantee when that will be.

Feedback is the key

This tutorial took an insane amount of time to write. Almost a whole afternoon. Actually, you have to plan it, write the code, then write the tutorial, debug the code, fix the code, break the code, rewrite bits of the tutorial and check everything works.

And that takes time.

All I ask of you is that if you read this and liked it, or if you didn't, or if you just read it, to leave a comment below. It makes all the effort worthwhile.

Anyway, thanks for reading thus far and I look forward to next time!

Icon from Oxygen icon set, CC BY-NC 2.5.

This post was written by Peter on Sunday, February 18, 2007 at 16:52. Filed under Development, Tutorials.

Bookmark the permalink to this post. To subscribe to the comments on this post only, use this RSS feed.

Post a comment on this post, or leave a trackback from your own blog.

11 Comments

  1. Ashok wrote:

    this is one and only & very nice tutorial, which i have found in net. By this i can able to write my own ajax program.
    thank u very much.
    Ashok

    Wednesday, March 14, 2007 at 8:58 am | Permalink | Posted in Internet Explorer 6.0 on Windows 2000
  2. Tom wrote:

    Awesome, prior to reading this article the process of adding some ajax to my php sites was a pretty nebulous to say the least. This gives me a great jumping off point. Thanks a bunch!

    Tuesday, March 27, 2007 at 3:11 pm | Permalink | Posted in Safari 419.3 on Mac OS X
  3. mccormicky wrote:

    Thanks for writing this, I needed something like this.

    Tuesday, November 20, 2007 at 7:01 am | Permalink | Posted in Mozilla Firefox 2.0.0.9 on Windows 2000
  4. Bubbila wrote:

    Sweet comprehensive tutorial, just what I have been looking for! Well Pleased…

    Monday, February 11, 2008 at 11:09 pm | Permalink | Posted in Internet Explorer 6.0 on Windows XP
  5. Invader_Zim wrote:

    Thank you so much for your time to write this tutorial. Awesome!

    Friday, October 17, 2008 at 11:05 am | Permalink | Posted in Mozilla Firefox 2.0.0.17 on Windows XP
  6. Alan Gilmore wrote:

    Fantastic content. Just the kind of stuff I need. Thanks so much.

    Alan

    Friday, October 17, 2008 at 2:29 pm | Permalink | Posted in Internet Explorer 7.0 on Windows XP
  7. Tony Gaspro wrote:

    Excellent tutorial. I check out the basic PHP/AJAX tut, and after going over it, immediately went through this one.

    Your tutorials are clear and concise. Will be letting friends know about these two.

    Cheers.

    Sunday, October 19, 2008 at 7:27 pm | Permalink | Posted in Safari 525.20.1 on Mac OS X
  8. Emily wrote:

    Thanks a billion for this tutorial.. i have been trying learn ajax. so far i cant really understand it. But your is a simple and detail one which i can understand and now i know how to write it already.

    Once again thank you for your time in writing this tutorial. :)

    Saturday, December 6, 2008 at 5:03 am | Permalink | Posted in Mozilla Firefox 3.0.3 on Windows XP
  9. emil wrote:

    awesome stuff man! you really helped me into ajax and I will not try to rewrite my blog into ajax and xml stuff!

    thanks dude!

    Wednesday, December 17, 2008 at 11:37 pm | Permalink | Posted in Mozilla Firefox 3.0.4 on Windows XP
  10. F.P. wrote:

    Thanks! Great tutorial!!

    Friday, January 2, 2009 at 2:47 pm | Permalink | Posted in Mozilla Firefox 3.0.5 on Windows XP
  11. Paul wrote:

    Thanks a great deal for these two tutorials! The instructions are very clear and well written, an excellent jumping point to start my training into what I can do with AJAX.

    I look forward to reading the next installment.

    Tuesday, January 13, 2009 at 6:02 am | Permalink | Posted in Mozilla Firefox 3.0.5 on Windows Vista

11 Trackbacks/Pingbacks

  1. Peter Upfold » Blog Archive » Building your first Ajax application with PHP on Sunday, February 18, 2007 at 4:58 pm

    [...] Taking Ajax further with PHP [...]

  2. Building your first Ajax application with PHP :: Blog :: Peter Upfold on Wednesday, June 27, 2007 at 6:38 pm

    [...] Ready to take Ajax further? I’ve got a followup tutorial. This was written by Peter. Posted on Wednesday, September 27, 2006, at 5:09 pm. Filed under [...]

  3. 50 Excellent AJAX Tutorials | Tutorials | Smashing Magazine on Thursday, October 16, 2008 at 10:46 pm

    [...] Taking AJAX Further with PHP Following up on the preceding introduction, this post goes a bit further. [...]

  4. Useful AJAX Tutorials | Neurosoftware web dev on Friday, October 17, 2008 at 7:58 am

    [...] Taking AJAX Further with PHP Following up on the preceding introduction, this post goes a bit further. [...]

  5. pligg.com on Friday, October 17, 2008 at 12:14 pm

    Taking Ajax further with PHP…

    First of all, I have to apologise. It’s been literally two months since my last post in this series, and it’s been more than that since I last looked at Ajax in PHP. OK, I might admit it, it was this comment that motivated me to pick up this series a…

  6. 50 Excellent AJAX Tutorials | Web Burning Blog on Saturday, October 18, 2008 at 9:05 am

    [...] Taking AJAX Further with PHPFollowing up on the preceding introduction, this post goes a bit further. [...]

  7. 50 Excellent AJAX Tutorials | Evolution : weblog on Friday, October 31, 2008 at 5:22 am

    [...] Taking AJAX Further with PHP Following up on the preceding introduction, this post goes a bit further. [...]

  8. 50 Excellent AJAX Tutorials « Rohit Dubal on Monday, February 16, 2009 at 10:43 am

    [...] Taking AJAX Further with PHP Following up on the preceding introduction, this post goes a bit further. [...]

  9. Best Ajax Tutorials and Dynamic Solution for PHP ,Asp.net,Ruby On Rrails | Click On Tech on Monday, February 23, 2009 at 2:25 pm

    [...] Taking AJAX Further with PHP Following up on the preceding introduction, this post goes a bit further. [...]

Post a Comment

Your email address is not made public or shared. Required fields are marked with *.
*
*
*
Posting a comment signifies you accept the privacy policy.
Please note - usually your comment will appear straight away but sometimes it will be held for approval (this is due to the spam filter). If your comment is waiting to be approved, please don't post it again! It will appear eventually.
‹ This is why I love blogging
A tip when writing massive WordPress posts ›