Difference between Synchronous AJAX and POST/GET

Question

There is some difference in performance and functioning between a AJAX Synchronous and a connection POST/GET? Both lock the thread (browser freezes) but there are other differentials between types of connections?

Answer 1

Ajax and Http Protocol(Get, Post)

Ajax is a form of communication between client server that uses some types of protocol. Among these are the Http that uses Oe 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. Prior to that it was only possible to make such communication through a get or post. It was common to use iframes for such communication. 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 do not remember the year exactly) and until today it is widely used.

Performance Http(iframe) and Ajax

On the question of performance, ajax has the advantage of only traffic information pertinent to request. E.g.: In a client query the server side can implement an api restfull and return only json related to that client. Already in the use of an iframe it would be necessary besides the data related to the client to bring possible js and css files that were related to the page in question. Note that the 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 awaits the return of the call to continue the program. What does this mean? Your browser will be waiting for the call to be completed to continue the routine it is running. And then the so-called "ie stopped working".

In particular, I avoid using the query synchronously to avoid this type of problem. Asynchronous ajax works in a way that does not lock from the routine in question until the return of the call. It is common to use in a method that performs this query a parameter that we call callback. This parameter indicates a function to be executed at the end of the query. This way we avoid the browser locking.

Example called:

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);
            }
        }
    }
}