01.20.07

Create a Simple AJAX Interfeced PHP Page

Posted in Code at 7:48 pm by Steve Terjeson

Here is a great sample of how to create an AJAX PHP page. The AJAX is a menu portion that can be expanded. It is a good "start" to a dynamic page that can be built upon.

By the end of this simple tutorial, you will have a PHP driven, AJAX Interfaced website.

In actual terms you will have an Index page which has a menu that is driven by javascript events and which will dynamically read other PHP scripts residing on your server, and will render their output within a DIV on the index page.

Create an index.php

PLAIN TEXT

HTML:

  2.  
  4. <script type='text/javascript' language='javascript' src='application.js'></script>
  5. <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
  6. <title>Page Title</title>
  7. </head>
  8.  
  10.  
  11. <div id='header'>
  12. Page Title
  13. </div>
  14.  
  15. <div id='menu'>
  17. <li onclick='menuRequest("menu1")'>Menu 1</li>
  18. <li onclick='menuRequest("menu2")'>Menu 2</li>
  19. </ul>
  20. </div>
  21.  
  22. <div id='content'>
  23. Default Content
  24. </div>
  25.  
  26. </body>
  27.  
  28. </html>

Create stylesheet.css

PLAIN TEXT

CSS:

  1. body {
  2.  
  3. }
  4.  
  5. div#header {
  6.  
  7. }
  8.  
  9. div#menu {
  10.  
  11. }
  12.  
  13. div#menu ul {
  14.  
  15. }
  16.  
  17. div#menu ul li {
  18.  
  19. }
  20.  
  21. div#content {
  22.  
  23. }

Create application.js

PLAIN TEXT

JavaScript:

  1. function menuRequest(url)
  2. {
  3. var arg = url;
  4. url = "content.php?q=" + url;
  5. var http_request = false;
  6.  
  7. if (window.XMLHttpRequest)
  8. { // Mozilla, Safari,...
  9. http_request = new XMLHttpRequest();
  10.  
  11. if (http_request.overrideMimeType)
  12. {
  13. http_request.overrideMimeType('text/xml');
  14. // See note below about this line
  15. }
  16. } else if (window.ActiveXObject)
  17. { // IE
  18. try
  19. {
  20. http_request = new ActiveXObject("Msxml2.XMLHTTP");
  21. } catch (e)
  22. {
  23. try
  24. {
  25. http_request = new ActiveXObject("Microsoft.XMLHTTP");
  26. } catch (e) {}
  27. }
  28. }
  29.  
  30. if (!http_request)
  31. {
  32. alert('Giving up :( Cannot create an XMLHTTP instance');
  33. return false;
  34. }
  35.  
  36. http_request.onreadystatechange = function() { alertContents(http_request); };
  37. http_request.open('GET', url, true);
  38. http_request.send(null);
  39.  
  40. }
  41.  
  42.  
  43. function alertContents(http_request)
  44. {
  45. if (http_request.readyState == 4)
  46. {
  47. if (http_request.status == 200)
  48. {
  49. document.getElementById("content").innerHTML=http_request.responseText;
  50. }
  51. else
  52. {
  53. alert('There was a problem with the request.');
  54. }
  55. }
  56. }

Create content.php

PLAIN TEXT

PHP:

  1. <?php
  2.  
  3. if( $_GET['q'] == "menu1" )
  4. {
  5. echo "Content for click on Menu 1";
  6. }
  7.  
  8. if( $_GET['q'] == "menu2" )
  9. {
  10. echo "Content for click on Menu 2";
  11. }
  12.  
  13. ?>

Happy Developing!

Technorati Tags: , , , ,

Leave a Comment

Hide Ads