XMLHttpRequest vs WebSocket

В 2001 году Microsoft вводит объект XMLHTTP в браузер Internet Explorer 5. Это активный объект X. Он станет XMLHttpRequest в браузере Mozilla.
Microsoft переименовывает объект в Internet Explorer 6, но остается Active X.

Сравнение XMLHttpRequest и WebSocket

18 февраля 2005 года статья Ajax, новый подход к веб-приложениям Джей Джей Гарретта, запускает слово Ajax.
Одного существования термина достаточно, чтобы сделать этот способ оформления веб-страниц очень популярным, и с тех пор количество сайтов, посвященных Ajax, уже не подсчитывается.

В августе 2011 года WebSocket реализуется и включается по умолчанию в Firefox 6, в то время как стандарт все еще определяется. После асинхронного режима, предоставляемого объектом XHR, это новый прогресс - двухнаправленная связь .

Асинхронный режим по сравнению с двунаправленным режимом

В традиционном веб-приложении, когда пользователь выполняет действие, оно выполняется, и браузер ждет результата, чтобы вернуть пользователю руку. Если это действие требует обмена с сервером и обновления страницы, это приводит к задержкам и ожиданиям пользователя.

Асинхронный режим устраняет это ожидание. Запросы на сервер запускаются без приостановки взаимодействия с браузером, и страница обновляется при наличии необходимых данных. Асинхронная сторона получается с объектом XMLHttpRequest.

В то время как протокол HTTP работает через последовательность альтернативных запросов и ответов, WebSocket является двусторонним: между сервером и клиентом устанавливается статическое соединение, и обе стороны отправляют данные по своему усмотрению .

Получение данных с помощью объекта XMLHttpRequest

Начинается с создания объекта

Создание экземпляра:

xhr = new XMLHttpRequest();

Для работы объекта обработчику событий присваивается функция, которая должна быть выполнена, когда сервер ответил на запрос, который выполняется путём вызова методов open () и send ().

xhr.onreadystatechange = function() { ... };
xhr.open(...);
xhr.send();

Команда GET

Он позволяет извлечь файл на сервер.

xhr.open('GET',  url);                  
xhr.send(null);

В этом случае метод send () не имеет параметров, в то время как считываемый файл является параметром url открытого метода.

Команда POST

Она подходит для отправки данных скрипту на сервере.

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

Сценарий является параметром url, значение true устанавливает асинхронный режим, и данные предоставляются в качестве аргументов данных в виде строки переменных и значений следующим образом :

var data = "nom1=valeur1&nom2=valeur2...";

Как и в случае с GET, в теле функции, связанной с onreadistatechange, вызывается функция для выполнения при получении запроса и полученном ответе на эту функцию.

Обмен данными через соединение WebSocket

По инициативе заказчика устанавливается соединение с данной командой:

var connection = new WebSocket('ws://iqlevsha.ru');

Затем можно отправить данные:

connection.onopen=function() 
{
   connection.send('Message xxx');
};

И получать от сервера:

connection.onmessage=function(e) 
{
    console.log('Received: ' + e.data);  
};

Событие onmessage находится в ожидании данных, отправленных сервером, оно хранится в переменной data объекта e.

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

Приложение: Gimp в браузере

GTK 3.2 предоставляет возможность отображения приложений в браузере, при этом вращаясь либо локально, либо на сервере. Это позволяет запускать Gimp без установки, если он работает на сервере, к которому подключается браузер по такому протоколу, как WebSocket.

Это благодаря развивающемуся API, HTML 5 GDK, версия 3.2.
Для его тестирования на Firefox 4 необходимо загрузить исходный код GTK 3.0 и скомпилировать его вместе с этой директивой:

- enable-x11-backend-enable-broadway-backend

Также необходимо включить веб-сокет в Firefox 4. Введите about: config в адресной строке включить следующие два флага :

network.websocket.enabled = true
network.websocket.override-security-block = true

Еще один пример приложения представлен на этом сайте с файловым менеджером Advanced Explorer, который общается с системой через соединение WebSocket, управляемое Node.js. Как интерфейс, так и бэкенд написаны на JavaScript. Разницы в работе между этой версией и предыдущей, написанной на Java, нет.

Ссылки: XMLHttpRequest спецификации W3C и WebSocket спецификации .