Monday, September 12, 2016

What is AJAX and how to make AJAX call using jQuery?

What is AJAX?

AJAX = Asynchronous JavaScript and XML. AJAX is a misleading name. You don't have to understand XML to use AJAX. 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. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.

Why AJAX?

AJAX is use on based of following open standards:
  • Browser-based presentation using HTML and Cascading Style Sheets (CSS).
  • Data is stored in XML format and fetched from the server.
  • Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.
  • JavaScript to make everything happen.

How to use AJAX?

Before you continue you should have a basic understanding of the following:
  • HTML
  • JavaScript
Syntax


[selector].load( URL, [data], [callback] );



URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.
data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

Simple example of AJAX Call:


<html>
    <head>
    <title>The jQuery Example</title>
    <script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    //this is AJAX function to load the tag stored in result.html
        <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
             $("#driver").click(function(event){
             $('#stage').load('jQuery/result.html');
            });
         });
        </script>
    </head>
               
    <body>
        <p>Click on the button to load /jquery/result.html file</p>
        <div id = "stage" style = "background-color:cc0;">
            STAGE
        </div>
    //this will create a button which will execute the function
        <input type = "button" id = "driver" value = "Load Data" />
    </body>
               
</html>


make another html file name it result.html and add this line to that and store it to the default dir and just change the path here  $('#stage').load('jQuery/result.html'); in above code.


<h1>THIS IS RESULT...</h1>



Other interesting things to know?

Query AJAX Methods
You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need.



  • jQuery.ajax( options ) Load a remote page using an HTTP request.
  • jQuery.ajaxSetup( options ) Setup global settings for AJAX requests.
  • jQuery.get( url, [data], [callback], [type] ) Load a remote page using an HTTP GET request.
  • jQuery.getJSON( url, [data], [callback] ) Load JSON data using an HTTP GET request.
  • jQuery.getScript( url, [callback] ) Loads and executes a JavaScript file using an HTTP GET request.
  • jQuery.post( url, [data], [callback], [type] ) Load a remote page using an HTTP POST request.
  • load( url, [data], [callback] )Load HTML from a remote file and inject it into the DOM.






No comments: