Кое-что об AJAX

Сложно представить себе современное веб-приложение, в котором не использовался бы AJAX. Под этой аббревиатурой скрывается технология, которая позволяет из JavaScript-а подгружать данные с сервера. При этом происходит это невидимым для пользователя образом - не прерывая его текущую работу. На JQuery это выглядит следующим образом:

$.post("/getData.php", { id = 1 }, function( response ) {
    //делаем что-то с полученными данными
}

Ключевой особенностью технологии AJAX является callback функция, определяющая какие действия должны быть выполнены в момент получения запрошенных данных с сервера. Благодаря наличию этой функции AJAX запрос исполняется, а javascript переходит к выполнению следующих инструкций не дожидаясь получения непосредственно данных.

Именно возможность асинхронного выполнения было тем новым, что привнес AJAX. Однако, как показывает практика у многих современных веб-разработчиков AJAX ассоциируется немного с другим. А именно вообще со способностью обращаться к серверу из JavaScript-а. Таким образом даже в тех редких (действительно редких) случаях, когда требуется выполнить синхронный запрос к серверу - все равно используется AJAX.

Связано это, видимо, с не достаточно глубоким понимаем того, как же реализуется AJAX. Кое-что об этом я и решил написать.

Во первых AJAX это не самостоятельная технология, а лишь способ использования уже давно существовавших. Основным компонентом AJAX является JavaScript объект - XMLHttpRequest. Собственно именно через этот объект и происходит сам запрос данных с сервера. Простейшая реализация AJAX выглядит следующим образом:

function ajax(url, data, onResponse) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', url, true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4) {
            if(xmlhttp.status == 200) {
                onResponse(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send(data);
}

А пример вызова:

ajax("/getData.php",{}, function( data ) { console.log( data ) });

После создания самого объекта XMLHttpRequest мы вызываем его метод open - указываем тип запроса (GET), URL и устанавливаем флаг асинхронности. Затем мы определяем callback функцию, которая будет вызвана когда состояние запроса изменится. В данной функции происходит проверка текущего статуса, и в случае если запрос совершился успешно - мы вызываем необходимую нам функцию и передаем ей в качестве параметра данные, которые вернул сервер.

Как видно из примера, за асинхронность запроса отвечает третий параметр метода open. И если нам вдруг понадобиться выполнить синхронный запрос к серверу, который заблокирует выполнения всего JavaScript до тех пор пока результат не будет получен, мы можем сделать следующее:

function syncRequest(url, data) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open('GET', url, false);
    xmlhttp.send(data);
    return xmlhttp.responseText;
}

Пример вызова:

var data = syncRequest("/getData.php", {});

Таким образом, этой заметкой я хотел бы напомнить всем, что сутью AJAX является именно асинхронность - т.е. не блокирующий способ взаимодействия с сервером.