Ajax PHP tutorial
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.
|Name:||Ajax PHP tutorial|
|Category:||AJAX basic tutorials|
|Product:||See complete product|
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.
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:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
- <html xmlns="http://www.w3.org/1999/xhtml">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Ajax - PHP example</title>
- <form name="testForm">
- Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
- Output text: <input type="text" name="outputText" id="outputText" />
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.
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|