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
Product:See complete product

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:

  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>
  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
Java F1
JavaScript F1
Developer F1

Family tutorials
PHP Array
PHP8 on Windows10
Not a supported stylesheet mime type

PHP Utils
Latest video courses

Total time: 0.0032