How to use Ajax in Javascript

In this tutorial i am going to let you guys know about how AJAX.

AJAX is not a new technology. It is a set of various existing technologies. Ajax key constituents:

  1. Standards-based presentation using XHTML and CSS
  2. Dynamic display and interaction using the Document Object Model
  3. Asynchronous server communication using XMLHttpRequest
  4. JavaScript binding everything together

Where we can use AJAX ?

Form Validation : Form validation is possible without ajax as well but there is some problem when we need to check data from database with the form. So Ajax make it simple.

Load on demand: Based on a client event, an HTML page can fetch more data in the background, allowing the browser to load pages more quickly.

Refreshing data and server push: We can pull or push data into the database using AJAX. and all this asynchronous.

So I hove you guys now got the idea about ajax Now I am going to use ajax in the HTML page.

I am using Jquery library for make this process easy.

Let’s start with the coding :

<html>
<head>
<title>AJAX</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$('.btn').click(function(){
var country = $('.country').val();
$.ajax({
url: 'https://restcountries.eu/rest/v2/name/'+country+'?fullText=true',
success: function(data){
$('.population').html(data[0].population); 
}
});
});
}); 
</script>
<style>
.population{
text-align:center;
font-size:60px;
}
</style>
</head>
<body>
<input type="text" class="country"/>
<input type="button" class="btn" value="Click me" />
<div class="population">

</div>
</body>
</html>

In the above code I have used Country Info API which is free of cost.

and then use ajax jquery method to get data from external source and show it on the page without reloading the page.

Output for the same as follow :

How to use Ajax in Javascript
How to use Ajax in Javascript

In this country api all data comes into the json format.

But ajax not required JSON only it’s better if you used ajax with the json but you can use it with all type of the data for example you can pull data from another page as html as well and show it on the working page.

So that’s all for today guys hope you enjoy this tutorial. stay tuned for my further updates.

11 thoughts on “How to use Ajax in Javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. I spent four years trying EVERYTHING in Online Dating, and through a huge amount of trial and error, I produced a system that I will share for you. This book will take you, step by step, through everything you need to know to double, triple or even quadruple the number of women you meet online.

  2. I can see you are an expert at your field! I am launching a website soon, and your details will be really fascinating for me.. Thanks for all your assist and wishing you all of the success.

  3. Pretty section of content. I just stumbled upon your site and in accession capital to assert that I get actually enjoyed account your blog posts. Any way I will be subscribing to your feeds and even I achievement you access consistently quickly.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.