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

Bookmark Ajax PHP tutorial

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: 
<?php
    if (isset($_GET['inputText'])) 
       echo strtoupper($_GET['inputText']);
?>
Javascript F1

That's really short, isn't it?

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

Client:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax - PHP example</title>
</head>
 
<body>
 
<script language="javascript" type="text/javascript">
<!-- 
// Get the HTTP Object
function getHTTPObject(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
      alert("Your browser does not support AJAX.");
      return null;
   }
}   
 
// Change the value of the outputText field
function setOutput(){
    if(httpObject.readyState == 4){
        document.getElementById('outputText').value = httpObject.responseText;
    }
 
}
 
// Implement business logic    
function doWork(){    
    httpObject = getHTTPObject();
    if (httpObject != null) {
        httpObject.open("GET", "upperCase.php?inputText="
                        +document.getElementById('inputText').value, true);
        httpObject.send(null); 
        httpObject.onreadystatechange = setOutput;
    }
}
 
var httpObject = null;
 
//-->
</script>
 
  <form name="testForm">
     Input text: <input type="text"  onkeyup="doWork();" name="inputText" id="inputText" /> 
     Output text: <input type="text" name="outputText" id="outputText" />
  </form>
</body>
</html>
Javascript F1

Server:

Code: 
<?php
    if (isset($_GET['inputText'])) 
       echo strtoupper($_GET['inputText']);
?>
Javascript F1

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

AJAX F1

Help in AJAX, get AJAX code, scripts, tutorials

Ajax PHP tutorial - PHP code and the complete AJAX example

Tutorial info:

Bookmark Ajax PHP tutorial

Step 3 - PHP code and the complete AJAX example

MoocPlayer