AJAX - CODE For Beginner

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. It is a group of Inter-related technologies like JavaScript, DOM, XML, HTML, CSS etc.
AJAX allows you to send and receive data without reloading the web page.

(In simple AJAX is Load a remote page using an HTTP request.)

Importance of AJAX?

AJAX allows you to send only important information to the server not the entire page.
Only valuable data from the client side is routed to the server side. It makes your application interactive and faster

Benefits of Ajax

There are 4 main benefits of using Ajax in web applications:

Callbacks: Ajax is used to perform a callback, making a quick round trip to and from the server to retrieve and/or save data without posting the entire page back to the server
Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server. This allows the client browser to avoid waiting for all data to arrive before allowing the user to act once more.
User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will always be more responsive, faster and more user-friendly.
Increased Speed: The main purpose of Ajax is to improve the speed, performance and usability of a web application. A great example of Ajax is the movie rating feature on Netflix. The user rates a movie and their personal rating for that movie will be saved to their database without waiting for the page to refresh or reload. These movie ratings are being saved to their database without posting the entire page back to the server.

Basic Structure of AJAX:

Here is the simple syntax to use this method −

$.ajax( options )

Example:

<html>
    <head>
       <title>The jQuery Example</title>
       <script type = "text/javascript" 
          src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script type = "text/javascript" language = "javascript">
          $(document).ready(function() {
             $("#driver").click(function(event){
                $.ajax( {
                   url:'result.html',
                   success:function(data) {
                      $('#stage').html(data);
                   }
                });
             });
          });
       </script>
    </head>
 <body>
  <p>Click on the button to load result.html file:</p>
     <div id = "stage" style = "background-color:blue;">
          STAGE
     </div>
  <input type = "button" id = "driver" value = "Load Data" />
  </body>
 </html>