Эпос об асинхронности - Часть 1: История AJAX

Это первая из трех частей серии, в которой асинхронный JavaScript подробно объясняется с подходами и фреймворками для работы с async. В этом разделе рассказывается о первых днях создания асинхронных сценариев, рассказывается о том, как появился AJAX и как он стал известен благодаря небольшому освещению тех дней программирования.

Привет, ребята, AJAX существует уже очень давно, и все мы прекрасно об этом знаем. Асинхронный JavaScript и XML - просто, правда? Мы вызываем их с помощью JavaScript, асинхронно передавая JSON. Но здесь что-то не так, а где же XML?

Родился герой

Итак, когда и кем был создан AJAX? Деннис Ричи и Bell Labs? нет-нет, они придумали C, бесспорного короля всего. Тим Бернерс Ли? снова неправильно. Не удивлюсь, если я скажу Microsoft ... да, на самом деле это была Microsoft. Это было время, когда браузеры получали данные только при перезагрузке. Всю HTML-страницу приходилось извлекать и загружать заново для каждого небольшого изменения. Поэтому, если вы создадите сообщение в Facebook, страница обновится и загрузит сообщение. Никто не увидит его, пока не обновит страницу, и никому даже не понравится ваш пост, так как им потребуется еще одна долгая перезагрузка, когда они нажмут лайк, что, по-видимому, никому не нравится. (неверный пример, тогда не было Facebook - если бы он был, то потерпел неудачу с треском - так что было хорошо, что его не было).

В начале-середине 1990-х большинство веб-сайтов основывалось на полных HTML-страницах. Каждое действие пользователя требовало загрузки с сервера полностью новой страницы. Этот процесс был неэффективным, что отражалось в опыте пользователя: все содержимое страницы исчезло, затем появилась новая страница. Каждый раз, когда браузер перезагружал страницу из-за частичного изменения, все содержимое приходилось повторно отправлять, даже если изменилась только часть информации. Это создавало дополнительную нагрузку на сервер и делало пропускную способность ограничивающим фактором производительности.

В 1996 году тег iframe был введен в Internet Explorer; подобно элементу объект, он может загружать или извлекать контент асинхронно. В 1998 году команда Microsoft Outlook Web App разработала концепцию скриптового объекта XMLHttpRequest. Он появился как XMLHTTP во второй версии библиотеки MSXML, которая поставлялась с Internet Explorer 5.0 в марте 1999 года.

-Википедия

MSXML - интересная библиотека, давайте поговорим об этом в другой статье и не будем здесь сильно отклоняться. Так родился герой, AJAX, который, как и IE, собирался надолго править миром Интернета.

Вызов AJAX

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

var xhr = new XMLHttpRequest();
xhr.open('GET', 'server-api-url');
xhr.send(null);

Обратите внимание на класс XMLHttpRequest, используемый для создания экземпляра объекта AJAX. Затем объект AJAX открывает соединение, указывая метод (GET в примере) и конечную точку (обозначается как server-api-url), а затем запрос запускается с помощью send функция объекта, вот и все, у нас там есть запрос AJAX. Но мы пока не получили ответа, посмотрим, как это делается -

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Success
    }
    else {
      // Failed
    }
  }
};

А вот и самая важная часть, onreadystatechange, которая представляет собой обработчик событий, помогающий AJAX решить, пришел ли ответ. Что мы здесь делаем, это сначала проверяем, был ли выполнен запрос и получен ли ответ. Существует 5 состояний готовности (0 - не инициализировано, 1 - подключено, 2 - получено, 3 - обработка, 4 - завершено), через которые проходит запрос AJAX. Событие onreadystatechange запускается каждый раз, когда состояние изменяется на следующее в порядке. Нас интересует, когда запрос завершен, следовательно, мы обрабатываем только состояние готовности 4 в приведенном выше примере.

После завершения мы проверяем возвращенный код состояния, 200 означает успех, все остальное - проблема. Когда приходит ответ, он загружает пару атрибутов xhr, наиболее важными из которых являются responseText, responseXML, которые содержат значения ответа в текстовой и XML-форме .

if (xhr.status === 200) {
    console.log(xhr.responseText)
}

Но использовали ли мы просто XMLHttpRequest для создания запроса AJAX? По правде говоря, не так выполнялись первые вызовы AJAX, помните, XMLHttp был функцией библиотеки MSXML? оригинальный инструмент для вызовов AJAX. Давайте взглянем на интересные технологии, которые Microsoft впервые использовала в какой-то момент, но со временем о них забыли.

Microsoft ActiveX

ActiveX - это программная среда, созданная Microsoft, которая адаптирует свои более ранние технологии Component Object Model (COM) и Object Linking and Embedding (OLE) для контента, загружаемого из сети, в частности из "Всемирная сеть". Microsoft представила ActiveX в 1996 году. В принципе, ActiveX не зависит от операционных систем Microsoft Windows, но на практике большинство элементов управления ActiveX работают только в Windows. Для большинства также требуется, чтобы клиент работал на компьютере на базе x86, поскольку элементы управления ActiveX содержат скомпилированный код.

ActiveX по-прежнему поддерживается в Windows 10 через Internet Explorer 11, в то время как ActiveX не поддерживается в их веб-браузере по умолчанию Microsoft Edge (который имеет другую несовместимую систему расширений).

-Википедия

У ActiveX была одна основная цель - иметь возможность соединять различные приложения с помощью объектной модели. Объектная модель, как и DOM HTML, создавалась для всех ключевых приложений и стала доступной через SDK и API приложений. Самая крутая вещь, правда? Это означает, что вы можете создать текстовый документ из JavaScript с помощью ActiveX, где привязка ActiveX между приложениями (IE и MS Word) обеспечивает связь при вызове API. Чтобы попробовать, вставьте приведенный ниже код в консоль и запустите его, однако это работает только в IE, если вы включили ActiveX в настройках Интернета. Кроме того, вы можете перейти на надежный сайт и запустить код, открыв там консоль.

var Application = new ActiveXObject ("Word.Application");
var instance = Application.Documents.Add();
Application.Selection.TypeText("ActiveX Works here!")
Application.Visible = true;

Чтобы еще немного проиллюстрировать концепцию, следующий код заполняет таблицу умножения в Excel:

var Application = new ActiveXObject ("Excel.Application");
var instance = Application.Workbooks.Add ();
var sheet = instance.Worksheets.Add();
sheet.Name = "Times table";
Application.Visible = true;
var r = 0, c = 1;
var interval = setInterval(function(){
   sheet.Rows(++r+1).Columns(c).Value = " "+c+" X "+r+" = "+(c*r)+" ";
       if(r==10){
           r = 0;
           sheet.Rows(1).Columns(c).Value = " Table " + c;
           c ++;
           if(c>10) clearInterval(interval);
       }
}, 100)

MSXML была одной из таких библиотек, созданных исключительно для работы с XML. Он включал методы для доступа и управления объектной моделью XML-документа, объектной моделью схемы и т. Д. Одним из этих методов был XMLHttp, поэтому исходный экземпляр AJAX выглядел так:

var xhr = new ActiveXObject('Microsoft.XMLHttp');

Привет, мир!

Хотя это и не стандарт W3C, другие браузеры начали работать над созданием аналогичного механизма для асинхронных запросов, поскольку это была очень крутая функция. Следующей была Mozilla, которая изобрела велосипед (они знали, как выглядит колесо, поэтому технически они просто построили его заново) с XMLHttpRequest, а затем Safari и Opera. Вскоре W3C представил стандарты XMLHttpRequest в 2006 году и снова в 2008 году, а затем вернулся к 2006 году в 2011 году (да, они действительно это сделали).

К 2006 году в игре участвовали все, но из-за отсутствия стандартов W3C каждый поставщик в конечном итоге разработал свой собственный стандарт. Стандарты, которые у всех разные, ну, там просто оксимору создали, и это даже не урок грамматики. Вот что поразило большинство людей, которые хотели использовать новообретенную сверхдержаву, в сочетании со сложностью ее использования. Все, что сейчас требовалось миру, - это простая оболочка (не супермен, но он тоже вернулся), чтобы справиться со сложностью и кроссбраузерностью AJAX.

Позвольте мне подождать, сначала давайте подведем итоги всего нашего обучения и напишем нашу программу hello world с AJAX -

var xhr = null;
if (window.XMLHttpRequest) {
  // If IE7, Mozilla, Safari, and so on: Use native object.
  xhr = new XMLHttpRequest();
}
else
{
  if (window.ActiveXObject) {
     // ...otherwise, use the ActiveX control for IE5.x and IE6.
     xhr = new ActiveXObject('MSXML2.XMLHTTP.3.0');
  }
}
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log("Hello world")
    }
    else {
      console.log("Hello world with error!")
    }
  }
};

Эта программа Hello world для меня больше похожа на адский мир. Должен быть способ сделать это лучше, верно?

$ .ajax

2005–2006 годы стали важной вехой, ознаменовавшей появление ряда основных библиотек JavaScript, которые сделали JavaScript более популярным, чем это типичный вариант использования клиентских проверок и предупреждений. Такие библиотеки, как YUI, Dojo и, что наиболее важно, jQuery были представлены миру в это время, что произвело революцию в способах использования и восприятия JavaScript.

jQuery, которая является наиболее широко используемой и развернутой библиотекой всех времен, очень актуальна даже сегодня. jQuery черпал вдохновение из cssQuery, в основе которого лежала простая идея, позволяющая разработчикам использовать правила выбора элементов CSS в JavaScript. Это позволило пользователям иметь возможность выбирать элементы DOM для обработки намного удобнее, чем исходные - выбор по идентификатору или имени тега. jQuery взял эту идею и, кроме того, создал намного больше функций для выполнения расширенного выбора, манипуляции с DOM и связывания.

Одной из этих функций была $ .ajax, которая упростила вызовы AJAX и устранила боль, связанную с обработкой стандартов кроссбраузерности. Позвольте мне продемонстрировать это с помощью программы hello world с использованием jQuery -

var ajaxConfig = {
	type: 'GET',
	url: 'server-api-url',
	dataType: "JSON",
	success: function (data) {console.log('Hello world');},
	error: function() {console.log('Hello world with error!');}
}
$.ajax(ajaxConfig);

Это очень чисто, просто определите все в конфигурации и передайте в $ .ajax. Нет обработки событий, нет необходимости вручную проверять коды состояния HTTP или состояния готовности. Акцент делается только на том, что необходимо: URL-адрес, тип запроса и данных, а также обработчики успеха и ошибки.

jQuery еще больше упростил ajax с помощью настраиваемых функций, таких как get и post, см. пример ниже -

function success(data) {console.log('Hello world');}
function error(data) {console.log('Hello world with error!');}
$.get('server-api-url').done(success).fail(error);

Чище, правда?

.. и другие

AJAX был назван в честь одноименного мифического героя из греческой мифологии. Имя имело смысл, во-первых, AJAX был (есть) героем, а имя представляло конструкции, на которых он был построен, асинхронный JavaScript, где данные были в формате XML (теперь мы знаем, почему его не называли Ахиллесом или даже Брэдом. Питт).

XML использовался и используется Microsoft в качестве общего формата данных (и это правильно), и из-за того, что это не зависящий от технологии простой текстовый формат, он лучше всего подходил для передачи данных (помните SOAP?). Непосредственными преимуществами AJAX были:

Это позволило избежать загрузки страницы, когда не требовалось обновлять всю страницу.
Он создал технологически независимый способ передачи данных.
Он минимизировал объем данных, которые необходимо передавать по сети.
Это позволило клиенту (браузеру) позаботиться об обработке всего уровня представления, уменьшив огромную нагрузку на серверы.

Это были новаторские и определяющие элементы современных веб-технологий. Они позволили супер-богатым страницам загружаться один раз и выполнять частичное обновление (теперь ваш лайк на Facebook просто отправляет несколько байтов данных и получает несколько байтов вместо нескольких сотен сообщений при каждом обращении).

Однако были и другие концепции: в первой созданной мной веб-службе (асинхронная сетка с параметрами добавления, редактирования и удаления) служба возвращала обработанный HTML вместо XML. Это было легко, поскольку серверные языки были хорошо оснащены, чтобы легко обрабатывать шаблоны и заполнять пробелы данными. Я бы заменил только ту часть страницы, которая нуждалась в обновлении (скажем, add добавит новую строку в таблицу HTML, edit заменит строку, а delete удалит строку - HTML не был возвращен). Вскоре я обнаружил, что это не новая концепция, но уже существует нечто под названием AJAH, асинхронный JavaScript и HTML.

Теперь переходить к AJAX, часть XML, на самом деле не была нужна. Когда Microsoft представила AJAX в MSXML с классом XmlHttp, это не было обязательным ограничением для использования XML. HTML, являющийся XML (без DOCTYPE? Хм…), на самом деле не был преступником. Но тогда большинство людей используют JSON? Почему именно JSON?

JSON является родным для JavaScript, языка браузеров. Это означает, что вам не нужен переводчик Google, если вы получили письмо на простом английском языке!
JSON занимает меньше места для передачи того же объема данных по сравнению с XML, поскольку он избегает открывающих и закрывающих тегов, повторяющихся тегов для массивов и т. Д.

Тогда почему мы не называем это AJAJ? Что ж, собственно, для этого нет особой причины, зачем без причины отходить от культового греческого героя. Эта концепция возникла с использованием тегов XML, и она уже хорошо известна под этим именем, нет смысла называть ее AJAF и AJAP для flatbufs и protobufs. Бриджит Еллинек в этом блоге говорит нам, что X больше не обозначает XML, это X, которое может быть любым, имеет смысл, верно?

Более того, что есть в имени.

«Роза под любым другим названием будет пахнуть так же сладко»

- Вильям Шекспир

Эпос об асинхронности - Часть 1: История AJAX