How to Create an PHP Ajax application

What is PHP ?

PHP is a server-side scripting language that is used to develop Static websites or Dynamic websites or Web applications. PHP stands for Hypertext Preprocessor, which earlier stood for Personal Home Pages. PHP scripts can only be interpreted on a server that has PHP installed. The client computers accessing the PHP scripts require a web browser only. A PHP file contains PHP tags and ends with the extension “.php”.

Why use PHP?

You might have heard of a number of programming languages so why would we want to use PHP. Here are some of the compelling reasons:

  • Easy to learn
  • PHP is open-source and free
  • Interactive Features
  • Top-Notch Online Documentation
  • Most web hosting servers support PHP by default
  • Compatible With Databases
  • PHP is cross-platform

 

What is Ajax ?

AJAX or Asynchronous JavaScript & XML is a technology that reduces the interactions between the server and client by updating only part of a web page rather than the whole page.The asynchronous interactions are initiated by JavaScript.The purpose of AJAX is to exchange small amounts of data with server without page refresh.

Why use AJAX?

  • It allows developing rich interactive web applications just like desktop applications.
  • Validation can be performed done as the user fills in a form without submitting it. This can be achieved using auto completion. The words that the user types in are submitted to the server for processing. The server responds with keywords that match what the user entered.
  • It can be used to populate a drop down box depending on the value of another dropdown box
  • Data can be retrieved from the server and only a certain part of a page updated without loading the whole page. This is very useful for web page parts that load things like
    • Tweets
    • Commens
    • Users visiting the site etc.

How to Create an PHP Ajax application

In this Example we will create a Simple Application, which will have a text box / Search box,  and in which user will type the name of  php frameworks, which will be then match and display the data just below the Text box

Step 1) Creating the index page

index.php

<html>

    <head>

        <title>PHP MVC Frameworks - Search Engine</title>

        <script type="text/javascript" src="/auto_complete.js"></script>

    </head>

    <body>

        <h2>PHP MVC Frameworks - Search Engine</h2>

        <p><b>Type the first letter of the PHP MVC Framework</b></p>

        <form method="POST" action="index.php">

            <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>

        </form>

        <p>Matches: <span id="txtName"></span></p>

    </body>

</html>

 

HERE,

  • “onkeyup=”showName(this.value)”” executes the JavaScript function showName everytime a key is typed in the textbox.

    This feature is called auto complete

Step 2) Creating the frameworks page

frameworks.php

<?php

$frameworks = array("CodeIgniter","Zend Framework","Cake PHP","Kohana") ;

$name = $_GET["name"];

if (strlen($name) > 0) {

    $match = "";

    for ($i = 0; $i < count($frameworks); $i++) {

        if (strtolower($name) == strtolower(substr($frameworks[$i], 0, strlen($name)))) {

            if ($match == "") {

                $match = $frameworks[$i];

            } else {

                $match = $match . " , " . $frameworks[$i];

            }

        }

    }

}

echo ($match == "") ? 'no match found' : $match;

?>

Step 3) Creating the JavaScript script

auto_complete.js

function showName(str){

    if (str.length == 0){ //exit function if nothing has been typed in the textbox

        document.getElementById("txtName").innerHTML=""; //clear previous results

        return;

    }

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

        xmlhttp=new XMLHttpRequest();

    } else {// code for IE6, IE5

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

            document.getElementById("txtName").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET","frameworks.php?name="+str,true);

    xmlhttp.send();

}

HERE,

    • “if (str.length == 0)” check the length of the string. If it is 0, then the rest of the script is not executed.

 

    • “if (window.XMLHttpRequest)…” Internet Explorer versions 5 and 6 use ActiveXObject for AJAX implementation. Other versions and browsers such as Chrome, FireFox use XMLHttpRequest. This code will ensure that our application works in both IE 5 & 6 and other high versions of IE and browsers.

 

  • “xmlhttp.onreadystatechange=function…” checks if the AJAX interaction is complete and the status is 200 then updates the txtName span with the returned results.

 

Output :

 

How to Create an PHP Ajax application
You may Also Like
Scroll to top