JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

var div = document.createElementC'div"); // Создать <div>

div.appendChild(node); // Добавить текст, узел в div

document.body.insertBefore(div, input); // И добавить div перед input

input.scrollIntoView; // Прокрутить до появления

} // input в видимой области

// Передавать сообщения

пользователя на сервер с помощью XMLHttpRequest

input.onchange = function { // При нажатии клавиши Enter

var msg = nick + ": " + input.value; // Имя пользователя + введ. текст

var xhr = new XMLHttpRequest; // Создать новый XHR

xhr.open("POST", "/chat"); // POST-запрос к /chat,

xhr.setRequestHeader("Content-Type", // Тип - простой текст UTF-8

"text/plain;charset=UTF-8");

xhr.send(msg); // Отправить сообщение

input.value = ""; // Приготовиться к вводу

} // следующего сообщения

};

</script>

<!-- Пользовательский интерфейс чата состоит из единственного поля ввода -->

<!-- Новые сообщения, отправленные в чат, вставляются перед полем ввода -->

<input id="input" style="width:100%"/>

На момент написания этих строк объект

EventSource

поддерживался в Chrome и Safari и должен был быть реализован компанией Mozilla в первом же выпуске Firefox, вышедшем после версии 4.0. В броузерах (таких как Firefox), где реализация объекта

XMLHttpRequest

возбуждает событие «readystatechange» в ходе загрузки ответа (для значения 3 в свойстве

readyState

) многократно, поведение объекта

EventSource

относительно легко имитировать с помощью объекта

XMLHttpRequest

, как демонстрируется в примере 18.16. С модулем имитации пример 18.15 будет работать в Chrome, Safari и Firefox. (Пример 18.16 не будет работать в броузерах ІE и Opera, поскольку реализации объекта

XMLHttpRequest

в этих броузерах не генерируют события в ходе загрузки.)

Пример 18.16. Имитация объекта

EventSource

с помощью

XMLHttpRequest

// Имитация прикладного интерфейса EventSource в броузерах, не поддерживающих его.

// Требует, чтобы XMLHttpRequest генерировал многократные события readystatechange

//

в ходе загрузки данных из долгоживущих HTTP-соединений. Учтите, что это не полноценная

// реализация API: она не поддерживает свойство readyState, метод close, а также

// события open и error. Кроме того, регистрация обработчика события message выполняется

// только через свойство onmessage -- эта версия не определяет метод addEventListener

if (window.EventSource === undefined) { // Если EventSource не поддерживается,

window.EventSource = function(url) { // использовать эту его имитацию,

var xhr; // HTTP-соединение...

var evtsrc = this: // Используется в обработчиках,

var charsReceived = 0; // Так определяется появление нового текста

var type = null; // Для проверки свойства type ответа,

var data = ""; // Хранит данные сообщения

var eventName = "message": // Значение поля type объектов событий

var lastEventld = ""; // Для синхронизации с сервером

var retrydelay = 1000: // Задержка между попытками соединения

var aborted = false: // Установите в true, чтобы разорвать соединение

// Создать объект XHR

xhr = new XMLHttpRequest:

// Определить обработчик события для него

xhr.onreadystatechange = function {

switch(xhr.readyState) {

case 3: processData: break; // При получении фрагмента данных

case 4: reconnectO: break; // По завершении запроса

}

};

// И установить долгоживущее соединение

connect;

// Если соединение было закрыто обычным образом, ждать секунду

// и попробовать восстановить соединение

function reconnect {

if (aborted) return; // He восстанавливать после