Difference between Synchronous AJAX and POST / GET

Ajax and Http Protocol (Get, Post)

Ajax is a form of communication between client server that uses some protocol types. Among these are the Http that uses the and post and get methods to traffic information between client and server. The idea of ajax arose from the need to communicate with the server side without having to load the page again. Before that it was only possible to make this communication through a get or post. The use of iframes for such communication was common. With the implementation of ajax it was possible to give more dynamism to the web pages. It was a great evolution for the time (I can not remember the year exactly) and to this day it is widely used.

Performance Http (iframe) and Ajax

On the performance issue, ajax has the advantage of only passing on the information relevant to the request. Eg: In a client query the server side can implement a restfull api and return only the json related to that client. Already in the use of an iframe would be necessary besides the data related to the client to bring possible files of js and css that were related to the page in question. Note that ajax returns exactly what you want.

Synchronous and asynchronous Ajax

The difference between the two is simple. The synchronous ajax as its name already says waits for the return call to continue the program. What does that mean? Your browser will wait for the call to be completed to continue the routine you are running. And so what happens is said "IE stopped working".

I particularly avoid using the query synchronously to avoid this kind of problem. Asynchronous ajax works in a way that does not make the lock of the routine in question until the call returns. It is common to use in a method that performs this query a parameter that we call callback. This parameter indicates a function to execute at the end of the query. This way we avoid locking the browser.

Example calls:

function init(){
    var dataSync = callAjaxSync();
    console.log(dataSync);

    callAjaxAsync(function(dataAsync){
        console.log(dataAsync);
    }, function (errorAsync) {
        console.error(errorAsync);
    });
}

function callAjaxSync(){
    var request = new XMLHttpRequest();
    request.open('GET', '/bar/foo.txt', false);
    request.send(null);
    return request.responseText;
}

function callAjaxAsync(callback, onError){
    var request = new XMLHttpRequest();
    request.open('GET', '/bar/foo.txt', true);
    request.send(null);
    request.onreadystatechange = function(event) {
        if (request.readyState == 4) {
            if (request.status == 200) {
                callback(request.responseText);
            } else {
                onError(request.statusText);
            }
        }
    }
}