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

Bookmark Ajax PHP tutorial



AddThis Social Bookmark Button

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:

Our html code is very simple it looks like this:

Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Ajax - PHP example</title>
  6. </head>
  7.  
  8.  
  9. <form name="testForm">
  10. Input text: <input type="text" onkeyup="doWork();" name="inputText" id="inputText" />
  11. Output text: <input type="text" name="outputText" id="outputText" />
  12. </form>
  13. </body>
  14. </html>

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



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