Category: jquery

AJAX is a web development technique for creating interactive web application. It contains a lot of features that added flexibility in Your web application. AJAX became so popular after adding suggestion feature by Google on Google search page, after that popularity of AJAx increase day after day.

What is AJAX ??

AJAX stands for

A   –   Asynchronous

J  –   JavaScript

A  –   and

X  –   XML

AJAX is used for creating better and faster web application with help of HTML, CSS, JAVASCRIPT and XML or JSON here I will explain feature of AJAX with help of JSON file in which I read JSON file and added to my web application, think how it is cool to add complete json file with help of AJAX after writing few lines of code just a magic but magic will happen.

HOW AJAX works ??

To explain it I have an image taken from w3schools.com.

In short from above image you are getting some concept in your mind that Browser sends a request to server and server response back to Browser and both communication takes place via internet.Here I am adding some points with a expectation that it will help to understand concept more easily.

1. An event occurs in a web page
2. An XMLHttpRequest object is created by JavaScript
3. The XMLHttpRequest object sends a request to a web server
4. The server processes the request
5. The server sends a response back to the web page
6. The response is read by JavaScript
7. Proper action (like page update) is performed by JavaScript

Note : Above steps will be occurred with XML object.But here I am creating an example with JSON file so, don’t be confused.

Purpose of Doing it

# I think from above image You can be able to understand concept with XML request, 
now I thinks that You should have knowledge of JSON object.Don't worry in upcoming post
I will add Example using XML.

So,now without wasting time we are moving towards our example in which We are reading an JSON file https://raw.githubusercontent.com/krdheeraj51/country-json/master/src/country-by-capital-city.json that contains country and its capital and after reading these details we are adding to our html page.

So finally for completing this project we have need three files

1. HTML : To display country and capital details (index.html)
2. Js       :  To send request and get response back to html page (index.js).
3. JSON :  file that contains data, https://raw.githubusercontent.com/krdheeraj51/country-json/master/src/country-by-capital-city.json

So, At first we are creating HTML file for designing a layout where we can display details for country and it’s respective capital.

Note : for designing I am using Bootstrap here.

index.html

Now,we go for index.js page for reading our JSON file and displaying data on html page.

 $(document).ready(function () {
    loadDetails();
});
//Load country and capital details
let loadDetails = () => {
    // alert('Company details ....');
    $.ajax({
        type: 'GET', //Method
        dataType: 'json', //File
        url: 'https://raw.githubusercontent.com/krdheeraj51/country-json/master/src/country-by-capital-city.json',
       //On success Code execute 
        success: (data) => {
            let countryDetail=data;
            //Starting for in loop for extracting data from JSON file
            for(let countyInfo in countryDetail){
      let addData=`<div class="row"> <div class="col"><p class="text-danger text-center">${countryDetail[countyInfo].country}</p></div> <div class="col"><p class="text-danger text-center">${countryDetail[countyInfo].city}</p></div> </div>`;
        $('#showDetails').append(addData);

            }
        },
        //On Error code execute
        error:(data)=>{
            alert('Somethong wrong going on');
        }    
    });

};      

After executing you code You will find output on browser like this