Хотя «X» в AJAX обозначает XML, любой тип данных может быть отправлен и получен. JSON ( Обозначение объектов JavaScript ) заменило XML как предпочтительный формат обмена данными. Основная причина этого заключается в том, что JavaScript изначально разбирает JSON, а XML должен анализироваться гораздо медленнее и громоздким набором клиентских библиотек . Сегодня с помощью новых объектов responseType (ArrayBuffer, Blob и т. Д.) Вы даже можете запрашивать двоичные файлы через XMLHttpRequest и создавать гораздо более мощные и полнофункциональные веб-приложения.

XMLHttpRequest - основной способ взаимодействия с сервером и клиентом; он поддерживается всеми современными браузерами. Ранние версии Internet Explorer (IE 5 и 6) не поддерживают собственный XHR API, хотя они поддерживают API ActiveX, который обладает большинством возможностей XHR (примером этого является new ActiveXObject("MSXML2.XMLHTTP.3.0")). Важно отметить, что XMLHttpRequest при непосредственном использовании должен обрабатывать уровень связи и ждать завершения ответа на запрос. Вы можете увидеть это в строке if (xmlhttp.readyState == 4 && xmlhttp.status == 200) в приведенном ниже примере. Этот тест проверяет, завершено ли состояние запроса и получил действительный ответ 200. Причина в том, что эта функция обратного вызова будет вызываться каждый раз, когда клиент получает пакет с сервера.

AJAX Пример:

var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //stuff to do with response text (xmlhttp.responseText)
    }
}
xmlhttp.open("GET", "url", true);
xmlhttp.send();

AJAX Пример 2 :

function (url, params) {
    // IE 5.5+ and every other browser
    var xhr = new(window.XMLHttpRequest || ActiveXObject)('MSXML2.XMLHTTP.3.0');

    xhr.open("POST", url, true);

    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status >= 200 && this.status < 400) {
                console.log(JSON.parse(this.responseText));
            }
        }
    }
    xhr.send(params);
    xhr = null;
},

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

jQuery AJAX Пример:

$.ajax({
    url: "url",
    context: document.body
}).done(function() {
    //stuff to do with response text
});

Начиная с Chrome 42, Edge 14 и Firefox 39 / 52 существует новый API под названием fetch , который значительно упрощает AJAX в браузерах. Поддержка Internet Explorer отсутствует. fetch Пообещано на основе.

Пример Fetch AJAX:

fetch('/url').then(res => res.json()).then(jsonData => console.log(jsonData));

fetch('/url', { method: 'POST', body: JSON.stringify({id: 1}), })
   .then(res => res.json()).then(jsonData => console.log(jsonData));

Список фреймворков AJAX:

1. jQuery UI
2. MooTools
3. Прототип
4. Библиотека YUI
5. ASP.NET AJAX
6. Spry framework
7. Dojo Toolkit
8. Ext JS
9. Backbone.js
10. AngularJS
11. Unified.JS

Ресурсы:

• AJAX в Википедии
• Рабочий проект XMLHttpRequest Level 2 для W3C
• Mozilla MDN
• JSON - JavaScript Объектная нотация
• реализация jQuery.ajax ()
• Реализация ProtoypeJS Ajax
• Реализация Dojo Ajax
• Внедрение JS Ajax
• Ajax: новый подход к веб-приложениям
• Fetch API - MDN Мы b docs