What is AJAX ?

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script,Jquery .
Conventional web application transmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.
This method using speed up your application.
With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

Try Demo

Download

Client Side Script:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script>
function showUser(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        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("txtHint").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","ajax.php?q="+str,true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<?php

 $con = mysqli_connect('localhost','root','','learnoops');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

 mysqli_select_db($con,"customer_category");
$sql="SELECT * FROM customer_category WHERE CustCat_Status =1";
$result = mysqli_query($con,$sql);
?>
<div class="container">
  <form role="form">
    <div class="form-group">
      <label for="email">SELECT OPTION :</label>
   <select name="users" onchange="showUser(this.value)" class="form-control">
  <option value="">SELECT ONE </option>
  <?php 
  while($row = mysqli_fetch_array($result)) {  ?>
    <option value="<?php echo $row['CustCat_Id']; ?>"><?php echo $row['CustCat_Desc']; ?></option>

   <?php } ?>
    </select>
    </div>
  </form>
  <br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</div>
</body>
</html>

 Server Side Script:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css"/>

  <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
  <script type="text/javascript" charset="utf-8">
   $(document).ready(function() {
    $('#example').DataTable();
   } );
  </script>
</head>
<body>

 <div class="container">

 <?php
$q = intval($_GET['q']);

 $con = mysqli_connect('localhost','root','','learnoops');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

 mysqli_select_db($con,"customer");
$sql="SELECT * FROM customer WHERE Cust_catid = '".$q."'";
$result = mysqli_query($con,$sql);

 echo '

 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
    <th>S.No</th>
    <th>Customer Name</th>
    <th>Address</th>
    <th>Email</th>
    <th>Mobile</th>
    <th>Status</th>
   </tr>
        </thead> 
        <tbody>';
$status="";
$sno=1;
while($row = mysqli_fetch_array($result)) {
 if($row['Cust_status'] ==1){ $status="Active";}else{ $status="Inactive";}
    echo "<tr>";
    echo "<td>" . $sno . "</td>";
    echo "<td>" . $row['Cust_Name'] . "</td>";
 echo "<td>" . $row['Cust_Buadd1'] . ",".$row['Cust_Buadd2'].",".$row['Cust_Buadd3']."</td>";
    echo "<td>" . substr($row['Cust_email'],0,4). "XXXXXXX".substr($row['Cust_email'],-10).",</td>";
 echo "<td>" . substr($row['Cust_mobile1'],0,3). "XXXX".substr($row['Cust_mobile1'],-3). "</td>";
    echo "<td>" . $status . "</td>";
    echo "</tr>";
$sno++;
}
echo "</tbody></table>";
mysqli_close($con);
?>

 <script type="text/javascript">
 // For demo to fit into DataTables site builder...
 $('#example')
  .removeClass( 'display' )
  .addClass('table table-striped table-bordered');
</script>
</div>

 </body>

</html>

Learn Oop's

Tuesday, 24 May 2016

What is AJAX

What is AJAX ?

Try Demo

Download

No comments:

Post a Comment