Ajax

WHAT IS AJAX

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

AJAX?

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

<html>

   <body> 

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

         <!--

            //Browser Support Code

            function ajaxFunction(){

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

               try{

                  // Opera 8.0+, Firefox, Safari

                  ajaxRequest = new XMLHttpRequest();

               }

                 catch (e){

                  // Internet Explorer Browsers

                  try{

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

                  } 

                  catch (e) {

                     try{

                        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);

               ajaxRequest.send(null);

            }

         //-->

      </script>

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

         </select>

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

      </form>

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

   </body>

</html>

Comments (0)

Post Your Comments

Headquarter



Hong Kong Office



Find Us On

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