Skip to content

Taking Ajax further with PHP

Peter's WebDev Workshop

Find this tutorial useful?





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.

Please support this work!

There used to be advertising here, but I no longer feel sure that advertising delivers the best experience and truly reflects the values of this site.

Keeping things running, however, is not without financial cost. If you would like to support the time and effort I have put into my tutorials and writing, please
consider making a donation.





Our data

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

[php][/php]

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.

[php]





Product information page


Product information page

Welcome. Please buy lots of stuff from this website. To find out more about a product, choose it from
the box below.





Like this post?

If you would like to support the time and effort I have put into my tutorials and writing, please consider making a donation.

19 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 08:58 | Permalink | Using Internet Explorer Internet Explorer 6.0 on Windows 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 15:11 | Permalink | Using Safari Safari 419.3 on Mac OS Mac OS
  3. mccormicky wrote:

    Thanks for writing this, I needed something like this.

    Tuesday, November 20, 2007 at 07:01 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.9 on Windows Windows 2000
  4. Bubbila wrote:

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

    Monday, February 11, 2008 at 23:09 | Permalink | Using Internet Explorer Internet Explorer 6.0 on Windows 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 | Permalink | Using Mozilla Firefox Mozilla Firefox 2.0.0.17 on Windows Windows XP
  6. Alan Gilmore wrote:

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

    Alan

    Friday, October 17, 2008 at 14:29 | Permalink | Using Internet Explorer Internet Explorer 7.0 on Windows 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 19:27 | Permalink | Using Safari Safari 525.20.1 on Mac OS X Mac OS X 10.5.5
  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 05:03 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.3 on Windows 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 23:37 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.4 on Windows Windows XP
  10. F.P. wrote:

    Thanks! Great tutorial!!

    Friday, January 2, 2009 at 14:47 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.5 on Windows 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 06:02 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.0.5 on Windows Windows Vista
  12. like ur tuts wrote:

    like

    Thursday, October 29, 2009 at 04:40 | Permalink | Using Google Chrome Google Chrome 3.0.195.27 on Windows Windows XP
  13. John wrote:

    It’s really a good start for me, thank you very much!

    Monday, November 2, 2009 at 08:08 | Permalink | Using Mozilla SeaMonkey Mozilla SeaMonkey 2.0b1 on Linux Linux
  14. Ofer wrote:

    Thanks,
    You’ve been my first introduction to Ajax!

    Monday, November 23, 2009 at 02:18 | Permalink | Using Internet Explorer Internet Explorer 8.0 on Windows Windows Vista
  15. egorbrandt wrote:

    thanks, Peter, your tutorials are a great way to share your knowledge: well written, and to the point.

    I enjoyed them very much.

    Thursday, February 18, 2010 at 10:42 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.5.8 on Windows Windows Vista
  16. Nits wrote:

    It runs cool…but i wanna display & update d users info from database….so wht do i do……?

    Tuesday, March 23, 2010 at 08:16 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6 on Windows Windows XP
  17. Munish wrote:

    VERY VERY THANKYOU FOR SUCH A GREATE TUTORIAL EVEN A BEGINER CAN USE THIS TUTORIAL THANKS !!!!!!!!!!!!!!!!!!

    Thursday, June 17, 2010 at 14:31 | Permalink | Using Mozilla Firefox Mozilla Firefox 3.6.3 on Windows Windows XP
  18. w wrote:

    Interesting tutorial…

    Sunday, February 26, 2012 at 03:19 | Permalink | Using Safari Safari 534.52.7 on Mac OS X Mac OS X 10.7.2
  19. John wrote:

    Brilliant!
    I have completed both AJAX tutorials, managed to break them both, and fix them again, with thanks to what I learned here.
    Now I’m off to adapt what I’ve learnt to a real-world scenario.
    Many thanks.

    Thursday, May 2, 2013 at 01:11 | Permalink | Using Google Chrome Google Chrome 26.0.1410.64 on Windows Windows 7

19 Trackbacks/Pingbacks

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

  2. […] 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 22:46

    […] 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 07:58

    […] 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

    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 09:05

    […] 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 05:22

    […] 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

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

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

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

Post a Comment

On some sites, you must be logged in to post a comment. This is not the case on this site.
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.