Web Designing and Web Development Company in mumbai

Mansi Gupta | 27 April 2020

Ajax(Asynchronous JavaScript & XML)For Beginners

Ajax is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. Using Ajax,web applications can send & retrieve data from a server without reloading the entire page. It is a group of technologies.

Uses:

It is used for allowing the client side of an application to communicate with the server side of the application.
With Ajax, the client & server can communicate directly to the server.
Update a webpage without reloading the page.
Send data to a server in the background.

Ajax technologies includes:

HTML/XHTML & CSS: It is used to display the content on webpage in most effective manner.
XML or JSON: It is commonly used as the format for receiving server data.
XMLHttpRequest: The XMLHttpRequest object is used to interact with a web server dynamically via JavaScript.
JavaScript: Ajax uses JavaScript for dynamic content display.

How does it work?

When a user loads & clicks a button or fills out a form etc…. JavaScript call goes to XMLHttpRequest object.The Http request is sent to the server by XMLHttpRequest object then Server interacts with the database using PHP,ASP.net etc. Data is retrieved & server sends XML data or JSON data to the XMLHttpRequest callback function. The HTML & CSS data is displayed on the browser.

For learn more visit: https://bit.ly/35mVD9x

Syntax:

$.ajax(url)

The parameters specifies one or more name/value pairs for ajax request.

Example: Change the text of element using an Ajax request:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.ajax({
       url: "demo_test.txt", 
       success: function(result){
               $("#d1").html(result);
            }});
        });
     });
</script>
</head>
<body>

<div id="d1"><h2>Change This Text</h2></div>

<button>Get External Content</button>
</body>
</html>

How to use jQuery?

There are several ways to start using jQuery on your website. You can download the

jQuery library from jQuery.com
Include jQuery from a CDN.

Put jQuery library reference within the head section:

 <script src="jquery-3.4.1.min.js"> </script>

Place the downloaded file in the same folder where your file is saved.

jQuery Google CDN:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>