Ajax PHP tutorial

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

Bookmark Ajax PHP tutorial

Step 1 - Ajax basics

Ajax PHP tutorial

In this article I don't want to show you the history of AJAX and discuss its pros and cons, but only focus on how to create a basic working AJAX - PHP communication.

The only important thing at the moment is that AJAX uses JavaScript so it need to be enabled in your browser to successfully complete this tutorial.

To demonstrate the AJAX PHP connection we will create a very simple form with 2 input fields. In the first field you can type any text and we will send this text to our PHP script which will convert it to uppercase and sends it back to us. At the end we will put the result into the second input field. ( The example maybe not very useful but I think it is acceptable at this level. )

So let's list what we need to do:

Listen on key-press event on the input field.
In case of key-press send a message to the PHP script on the server.
Process the input with PHP and send back the result.
Capture the returning data and display it.

Our html code is very simple it looks like this:

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

As you can see there is a doWork() function which is called in every case when a key is up (a key was pressed). Of course you can use any other supported events if you want.

But what is this doWork() and how we can send messages to the server script? On the next page you will find the answers.

Pass Certification offers latest CCNP Certification Preparation materials including CCNA Wireless Certification Preparation and CCSA Certification Preparation sample Questions & Answers. Use our GIAC Certification Preparation training material with 100% exam pass guarantee.

Next 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

Tutorial info:

Bookmark Ajax PHP tutorial

Step 1 - Ajax basics

MoocPlayer