Ajax PHP tutorial - PHP code and the complete AJAX example


Home - Tutorials - AJAX basic tutorials

In this article I will try to summarize the basics of Ajax and PHP communication. At the and you can find a full working Ajax - PHP example.

Tutorial info:


Name:Ajax PHP tutorial
Total steps:3
Category:AJAX basic tutorials
Date:2007-11-12
Level:Beginner
Product:See complete product
Viewed:542578

Bookmark Ajax PHP tutorial



AddThis Social Bookmark Button

Step 3 - PHP code and the complete AJAX example


Ajax PHP tutorial

 

Implementing the server side functionality is very simple compared to the client side. In the PHP code we just need to check the $_GET super-global array. Afterwards convert it to uppercase and echo the result. So the PHP code is this:

Code:
  1. <?php
  2. if (isset($_GET['inputText']))
  3. echo strtoupper($_GET['inputText']);
  4. ?>

That's really short, isn't it?

At least you can find the complete client and server code below.

Client:

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Ajax - PHP example</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. // Get the HTTP Object
  14. function getHTTPObject(){
  15. if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
  16. else if (window.XMLHttpRequest) return new XMLHttpRequest();
  17. else {
  18. alert("Your browser does not support AJAX.");
  19. return null;
  20. }
  21. }
  22.  
  23. // Change the value of the outputText field
  24. function setOutput(){
  25. if(httpObject.readyState == 4){
  26. document.getElementById('outputText').value = httpObject.responseText;
  27. }
  28.  
  29. }
  30.  
  31. // Implement business logic
  32. function doWork(){
  33. httpObject = getHTTPObject();
  34. if (httpObject != null) {
  35. httpObject.open("GET", "upperCase.php?inputText="
  36. +document.getElementById('inputText').value, true);
  37. httpObject.send(null);
  38. httpObject.onreadystatechange = setOutput;
  39. }
  40. }
  41.  
  42. var httpObject = null;
  43.  
  44. //-->
  45. </script>
  46.  
  47. <form name="testForm">
  48. Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
  49. Output text: <input type="text" name="outputText" id="outputText" />
  50. </form>
  51. </body>
  52. </html>

Server:

Code:
  1. <?php
  2. if (isset($_GET['inputText']))
  3. echo strtoupper($_GET['inputText']);
  4. ?>

 




Previous Step of Ajax PHP tutorial


Tags: ajax php tutorial, ajax php examples, ajax php, ajax, php, example

Ajax PHP tutorial - Table of contents
Step 1 - Ajax basics
Step 2 - Sending data to PHP with Ajax
Step 3 - PHP code and the complete AJAX example



F1 Site Family
AJAX F1
HTML F1
Java F1
JavaScript F1
PHP F1

Family tutorials
PHP Array
PHP Redirect
PHP Session
MySQL Create User
Mysqldump Example
MySQL Concat
JavaScript String
JavaScript Timeout
JavaScript Tooltip

Total time: 0.0349