0  0 2016-07-22 08:00:00


  • Full form of AJAX is Asynchronous JavaScript and XML.
  • AJAX is a new technique for creating good, very fast, and more interactive web applications with XML, HTML, CSS and Java Script.

PHP and AJAX Example

We will see a example of php and ajax with Mysql:-

Assume following table:-

CREATE TABLE `aajax_ee` (

   `aname` varchar(50) NOT NULL,

   `aage` int(11) NOT NULL,

   `asex` varchar(1) NOT NULL,

   `awpm` int(11) NOT NULL,

   PRIMARY KEY  (`name`)


Now insert following data into this table using the following SQL qurries:-

INSERT INTO ` aajax_ee ` VALUES ('Nikhil', 25, 'm', 20);

INSERT INTO ` aajax_ee ` VALUES ('Rahul', 25, 'm', 44);

INSERT INTO ` aajax_ee ` VALUES ('Sachin', 25, 'm', 87);

INSERT INTO ` aajax_ee ` VALUES ('Mayur', 25, 'm', 72);

INSERT INTO ` aajax_ee ` VALUES ('Abhi', 27, 'm', 0);

INSERT INTO ` aajax_ee ` VALUES ('Kishor', 35, 'm', 90);

Client Side HTML file

Create a client side HTML file in ajax:-



      <script language="javascript" type="text/javascript">


            //Browser Support Code

            function ajaxFunction(){

               var ajaxRequest;  // The variable that makes Ajax possible!


                  // Opera 8.0+, Firefox, Safari

                  ajaxRequest = new XMLHttpRequest();


                 catch (e){

                  // Internet Explorer Browsers


                     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");


                  catch (e) {


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


                        catch (e){

                        // Something went wrong

                        alert("Your browser broke!");

                        return false;




               // Create a function that will receive data

               // sent from the server and will update

               // div section in the same page.

               ajaxRequest.onreadystatechange = function(){

                  if(ajaxRequest.readyState == 4){

                     var ajaxDisplay = document.getElementById('ajaxDiv');

                     ajaxDisplay.innerHTML = ajaxRequest.responseText;



               // Now get the value from user and pass it to

               // server script.                

               var age = document.getElementById('age').value;

               var wpm = document.getElementById('wpm').value;

               var sex = document.getElementById('sex').value;

               var queryString = "?age=" + age ;

               queryString +=  "&wpm=" + wpm + "&sex=" + sex;

               ajaxRequest.open("GET", "ajax-example.php" + queryString, true);





      <form name='myForm'>

         Max Age: <input type='text' id='age' /> <br />

         Max WPM: <input type='text' id='wpm' />

         <br />

         Sex: <select id='sex'>

            <option value="m">m</option>

            <option value="f">f</option>


         <input type='button' onclick='ajaxFunction()' value='Query MySQL'/>    


      <div id='ajaxDiv'>Your result will display here</div>



Comments (0)

Post Your Comments


Hong Kong Office

Find Us On

Website Development Company
Digital Marketing
website development company in Hong Kong
website designer in pune