jquery
jQuery AJAX

What is AJAX

AJAX stands for Asynchronous Javascript And XML.   AJAX is the art of exchanging data from the server to the web browser without reloading the whole page.

The AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

AJAX just uses a combination of :

  • A browser built-in XMLHttpRequest object (to request data from a web server)
  • JavaScript and HTML DOM (to display or use the data)
AJAX has become so popular that you hardly find an applications. The example of some large-scale Ajax applications are: Google, Gmail, Google Maps, Google Docs,  Bing, YouTube, Facebook,  linkedin, twitter, etc.

The following figure illustrates the Ajax functionality.


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!

The jQuery library includes various methods to send Ajax requests. These methods internally use XMLHttpRequest object of JavaScript. The following table lists all the Ajax methods of jQuery.

Ajax Methods Description
ajax() Sends asynchronous http request to the server.
get() Sends http GET request to load the data from the server.
Post() Sends http POST request to submit or load the data to the server.
getJSON() Sends http GET request to load JSON encoded data from the server.
getScript() Sends http GET request to load the JavaScript file from the server and then executes it.
load() Sends http request to load the html or text content from the server and add them to DOM element(s).
Ajax Basic Example :
Load URL : ajax_my_site.html

<h1>
   <a href="http://www.freetimelearning.com" target="_blank"> www.freetimelearning.com </a>
</h1>

<!DOCTYPE html>
<html>
<head>
<title>jQuery Ajax Basic Example</title>
<script src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#my_site").load("ajax_my_site.html");
    });
});
</script>
<style type="text/css">
.btn{ padding:6px 15px;}
</style>
</head>
<body>
 
<div id="my_site">
<h2>Free Time Learning</h2>
</div>
 
<button type="button" class="btn">Click Here!</button>
 
</body>
</html>
Output :