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 ?>
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>
Server:
Code:
<?php ?>
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 |