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.

How Ajax is working?

     AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

    AJAX cannot work independently. It is used in combination with other technologies to create interactive web pages.

• JavaScript
• DOM
• CSS
• XML HttpRequest

           JavaScript object that performs asynchronous interaction with the server.

Steps of AJAX Operation

• A client event occurs.
• An XMLHttpRequest object is created.
• The XMLHttpRequest object is configured.
• The XMLHttpRequest object makes an asynchronous request to the Webserver.
• The Webserver returns the result containing XML document.
• The XMLHttpRequest object calls the callback() function and processes the result.
• The HTML DOM is updated.

The XMLHttpRequest Object is Created

         The XMLHttpRequest object is the key to AJAX.

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction(){
   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;
         }
      }
   }
}

 jQuery  AJAX

      With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

   jQuery load() Method

       The load() method loads data from a server and puts the returned data into the selected element.
 
Syntax:

$(selector).load(URL,data,callback); 

The required URL parameter specifies the URL you wish to load.

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $("#div1").load("demo_test.txt #p1");
    });
});
</script>

jQuery $.get() Method

    The $.get() method requests data from the server with an HTTP GET request.

Syntax:

$.get(URL,callback);

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("demo_test.asp", function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>

    jQuery $.post() Method

The $.post() method requests data from the server using an HTTP POST request.

Syntax:

$.post(URL,data,callback);

 <script>
$(document).ready(function(){
    $("button").click(function(){
        $.post("demo_test_post.asp",
        {
          name: "Donald Duck",
          city: "Duckburg"
        },
        function(data,status){
            alert("Data: " + data + "\nStatus: " + status);
        });
    });
});
</script>