Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • PHP and AJAX

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 313
    Comment on it

    AJAX is a topic which comes under PHP AJAX Stands for Asynchronous JavaScript and XML. AJAX is used to update segment of web pages, without refreshing the whole page. By using AJAX we can create dynamic web pages easily and very fast. Firstly in the browser an event occur it create an XMLHttpRequest object and then it sends HttpRequest then it sends to the server then server process the HTTPRequest and create a response and send back to the browser then browser process the returned data using JavaScript and update the page content.

    PHP & AJAX Example

    To understand it more clearly  how easy we can access the information using PHP and AJAX we write MySQL queries  and display the results on "form.html". But before we proceed, lets create the table using the following command.


    CREATE TABLE `example` (
       `Name` varchar(50) NOT NULL,
       `Age` int(11) NOT NULL,
       `Gender` varchar(1) NOT NULL,
       `wpm` int(11) NOT NULL,
       PRIMARY KEY  (`name`)


    Now we insert the data in the table using the SQL statements

    INSERT INTO `example` VALUES ('Jerry', 120, 'm', 20);
    INSERT INTO `example` VALUES ('Tom', 75, 'm', 44);
    INSERT INTO `example` VALUES ('Franky', 45, 'm', 87);
    INSERT INTO `example` VALUES ('Jilla', 22, 'f', 72);
    INSERT INTO `example` VALUES ('Tracila', 27, 'f', 0);
    INSERT INTO `example` VALUES ('Jelena', 35, 'f', 90);

    Now we make our client side HTML file which is form.html and it will have following code:

          <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) {
                            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;
         "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 />
             Genger: <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>

    Now the above code will give you a screen as given with two textbox one for age and one for wpm and a dropdown for gender and a button for query MYSQL 


       $dbhost = "localhost";
       $dbuser = "dbusername";
       $dbpass = "dbpassword";
       $dbname = "dbname";
       //Connect to MySQL Server
       mysql_connect($dbhost, $dbuser, $dbpass);
       //Select Database
       mysql_select_db($dbname) or die(mysql_error());
       // Retrieve data from Query String
       $age = $_GET['age'];
       $sex = $_GET['sex'];
       $wpm = $_GET['wpm'];
       // Escape User Input to help prevent SQL Injection
       $age = mysql_real_escape_string($age);
       $sex = mysql_real_escape_string($sex);
       $wpm = mysql_real_escape_string($wpm);
       //build query
       $query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
       $query .= " AND age <= $age";
       $query .= " AND wpm <= $wpm";
       //Execute query
       $qry_result = mysql_query($query) or die(mysql_error());
       //Build Result String
       $display_string = "<table>";
       $display_string .= "<tr>";
       $display_string .= "<th>Name</th>";
       $display_string .= "<th>Age</th>";
       $display_string .= "<th>Gender</th>";
       $display_string .= "<th>WPM</th>";
       $display_string .= "</tr>";
       // Insert a new row in the table for each person returned
       while($row = mysql_fetch_array($qry_result)) {
          $display_string .= "<tr>";
          $display_string .= "<td>$row[name]</td>";
          $display_string .= "<td>$row[age]</td>";
          $display_string .= "<td>$row[gender]</td>";
          $display_string .= "<td>$row[wpm]</td>";
          $display_string .= "</tr>";
       echo "Query: " . $query . "<br />";
       $display_string .= "</table>";
       echo $display_string;


 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: