PHP and AJAX

    You can unleash the great features bu using AJAX with PHP. AJAX (asynchronous javascript and XML) is a method that reduces client and server interactions by updating a part of the webpage instead of the whole page. AJAX allows the exchange of data without the page being refreshed. Javascript is a client-side language that is executed by web browsers that have javascript enabled. XML encodes the message in readable formats that allows you to create custom tags.

    Advantages of using AJAX

    • Allows you to create interactive web applications with great functionality.
    • Uses auto competition that allows performing validation without submitting the form.
    • Allows you to populate the dropbox.
    • Retrieve data from the server without refreshing the whole page.

    Creating a simple form using PHP and AJAX

    We will create a simple application form that allows you to search for some data using a text box. Then use MVC AJAX to search for the input text to display the complete name below the text box without submitting the form.

    1. Creating the main page (main.php) 

    <html>
<head>
     <title>Search Javascript IDEs - Search Engine</title>
     <script type="text/javascript" src="/auto_populate.js"></script>
</head>
<body>
     <h2>Javascript IDEs</h2>
     <p><b>Type the first letter of the Javascript IDEs</b></p>
     <form method="POST" action="main.php">
         <p><input type="text" size="40" id="txtHint"  onkeyup="showName(this.value)"></p>
     </form>
     <p>Matches: <span id="txtName"></span></p>
</body>
</html>

    “onkeyup="showName(this.value)" will execute the JavaScript showName function everytime whenever a key is typed in the given textbox.

    Output

    Form

    2. Creating a javascript IDEs page (ide.php) 

    <?php
$java_ide = array("Webstorm","Atom","Apache Cordove","Netbeans",”AppCode”) ;
$ide_name = $_GET["name"];
if (strlen($ide_name) > 0) {
$match = "";
for ($i = 0; $i < count($java_ide); $i++) {
     if (strtolower($ide_name) == strtolower(substr($java_ide[$i], 0, strlen($ide_name))))
 {         if ($match == "") {
             $match = $java_ide[$i];
         } else {
             $match = $match . " , " . $java_ide[$i];
         }
     } }
}
echo ($match == "") ? 'no match found' : $match;
?>

    3. Creating a javascript (auto_populate.js) 

    function showName(ide){
if (ide.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="+ide,true);
xmlhttp.send();
}
    Previous Tutorial Next Tutorial