Ajax PHP tutorial - Sending data to PHP with Ajax


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

Bookmark Ajax PHP tutorial



AddThis Social Bookmark Button

Step 2 - Sending data to PHP with Ajax


Ajax PHP tutorial

Before the explanation of the doWork() function we first need to learn a more important thing. To make a communication between the client and the server the client code needs to create a so called XMLHttpRequest object. This object will be responsible for AJAX PHP communication.

However creating this object is bit triky as the browser implement it various ways. If you don't want to support the quite old browsers we can do it as follows:

Code:
  1. // Get the HTTP Object
  2. function getHTTPObject(){
  3. if (window.ActiveXObject) 
  4. return new ActiveXObject("Microsoft.XMLHTTP");
  5. else if (window.XMLHttpRequest) 
  6. return new XMLHttpRequest();
  7. else {
  8. alert("Your browser does not support AJAX.");
  9. return null;
  10. }
  11. }

Ok, now we have the XMLHttpRequest object, so it's time to implement the business logic inside the doWork() function.

First of all we need to get a valid XMLHttpRequest object. If we have it then we can send the value of the inputText field to the server script. We do this by composing an URL with parameter, so in the PHP script we can use the $_GET super-global array to catch the data. As next step we call the send() function of the XMLHttpRequest object which will send our request to the server. At the moment our doWork() function looks like this:

Code:
  1. // Implement business logic
  2. function doWork(){
  3. httpObject = getHTTPObject();
  4. if (httpObject != null) {
  5. httpObject.open("GET", "upperCase.php?inputText="
  6. +document.getElementById('inputText').value, true);
  7. httpObject.send(null);

  8. }
  9. }

It's nice but how we can catch the response from the server? To do this we need to use an other special property of the XMLHttpRequest object. We can assign a function to this parameter and this function will be called if the state of the object was changed. The final code is the following:

Code:
  1. // Implement business logic
  2. function doWork(){
  3. httpObject = getHTTPObject();
  4. if (httpObject != null) {
  5. httpObject.open("GET", "upperCase.php?inputText="
  6. +document.getElementById('inputText').value, true);
  7. httpObject.send(null);
  8. httpObject.onreadystatechange = setOutput;
  9. }
  10. }
The last step on client side is to implement the setOutput() function which will change the value of our second field. The only interesting thing in this function that we need to check the actual state of the XMLHttpRequest object. We need to change the field value only if the state is complete. The readyState property can have the following values:

So the setOutput() looks like this:

Code:
  1. // Change the value of the outputText field
  2. function setOutput(){
  3. if(httpObject.readyState == 4){
  4. document.getElementById('outputText').value
  5. = httpObject.responseText;
  6. }
  7.  
  8. }

Now the client side is ready let's implement the server side.




Previous Step of Ajax PHP tutorialNext 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
CSS F1
Database F1
Flash F1
HTML F1
Java F1
JavaScript F1
PhotoShop F1
PHP F1
Scripts F1
Tutorial F1
Windows 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.0314