Friday, January 22, 2016

How to use Ajax request



This is the program which shows how to fetch data from server using ajax (without any page refresh).

<!DOCTYPE>
<html>
<head>
<!-- google ajax library  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<!-- if you want to use your own jQuery library then download and use it.  -->
<!--<script src="jquery-1.11.1.min.js"></script>--> 
<script language="javascript">

$(function(){
        $.ajax({
                type : 'POST',
                url : 'ajax.php',
    //if you need to send data to ajax.php through ajax then remove the comment.
                //data: {'appid':appid}, 
                success : function (d) {
                    alert("Server Date: "+d);
                   //$("div#size").html(d);
                },
                error : errorHandler
            });
  }); 

//error handler  
function errorHandler(jqXHR, exception) {
    if (jqXHR.status === 0) {
        alert('Not connect.\n Verify Network.');
    } else if (jqXHR.status == 404) {
        alert('Requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        alert('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        alert('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        alert('Time out error.');
    } else if (exception === 'abort') {
        alert('Ajax request aborted.');
    } else {
        alert('Uncaught Error.\n' + jqXHR.responseText);
    }
}  
  
  </script>
  </head>
  <body>
  </body>
  </html>

ajax.php code:

<?php
echo date("d-m-Y");
?>

Note: As soon as you run this program in browser you will get  your server's current time in alert box.

Here is the Output: