[Из песочницы] Скрещиваем WebWorker и XMLHttpRequest

WebWorker+XMLHttpRequest

HTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с WebWorker. Дальнейшее повествование требует знания JS и HTML — я не буду разжевывать основы html и js.

Сегодня мы рассмотрим как обернуть в WebWorker обычный XMLHttpRequest.

Первым, естественно, шагом будет создание обычной функции.

function req0() {}

Теперь необходимо создать работника:

Th0=new Worker('Th0.js')

Для работы с WebWorker нам понадобиться знать всего лишь 3 команды: передача, прием, удаление.

Для основной функции:

onmessage -прием сообщения или, грубо говоря, это то, что будет делать скрипт после завершения работы WebWorker.

postMessage — отправка сообщения или запуск работника. Здесь можно передать данные в поток.

terminate — завершение Работника.

Для самого Работника в файле скрипта:

onmessage — грубо говоря, это то, что будет выполнять Работник при его запуске

postMessage — это то, что Работник отправит в главный скрипт, то есть результаты выполненной работы

Теперь надо создать файл Th0.js — в нем и будет находится основной код Работника. Стоит заметить, что WebWorker не работает локально, как например, обычный html документ. Для WebWorker необходим веб-сервер.

Открываем Th0.js и пишем:

onmessage=function(event) {
nameRQ=event.data;}

Теперь у нас есть функция, которую будет выполнять Работник. Переменная nameRQ необходима для передачи функции запроса имени файла, в котором содержится запрашиваемая информация. Теперь надо написать XMLHttpRequest. Все знают как? Для большего понимания советую прочитать дополнительный материал про XMLHttpRequest-запросы. Я лишь вкратце расскажу.

Создаем запрос:

xhttp=new XMLHttpRequest()

Пишем простенький обработчик ответа сервера. Безусловно, можно написать хороший обработчик с распознаванием ошибок и реакцией на них, но сейчас не об этом.

  xhttp.onreadystatechange=function(){if (xhttp.readyState==4&&xhttp.status==200) {postMessage({goodReq0:xhttp.responseText})}};

if (xhttp.readyState==4&&xhttp.status==200) — обработчик ответа сервера. Если запрос успешно завершен, тогда выполнить следующую функцию:

{postMessage({goodReq0:xhttp.responseText})}};}

Теперь надо запустить сам запрос:

xhttp.open('POST','http://domen.dmn/req/'+nameRQ,true);
xhttp.send();

Запрос будет POST, асинхронным.

domen.dmn/req/'+nameRQ — это путь к файлу на сервере. Соответственно, в папке req на сервере будет находится искомый файл с запрашиваемым именем — в данном случае имя характеризуется переменной nameRQ. Это позволит одним запросом обращаться к разным файлам, меняя переменную.

Итоговый код файла Th0.js

onmessage=function(event) {
        nameRQ=event.data;      /* Имя запрашиваемого файла */
        xhttp=new XMLHttpRequest(); /* создаем XMLHttpRequest-запрос */
        xhttp.onreadystatechange=function(){if (xhttp.readyState==4&&xhttp.status==200) {postMessage({goodReq0:xhttp.responseText})}}; /* Обработчик запроса */
        xhttp.open('POST','http://domen.dmn/req/'+nameRQ,true); /* открываем запрос */
        xhttp.send(); /* и запускаем */
}

Возвращаемся к основной функции.

Пишем обработчик ответа Работника.

Th0.onmessage=function(event) {document.getElementById('DivRQ').innerHTML=event.data.goodReq0;}

document.getElementById('DivRQ').innerHTML — Вставляет полученный текст в Div с именем DivRQ (который заранее необходимо создать на страничке).

event.data.goodReq0 — переменная с данными, полученными от сервера.

«Убиваем» Работника:

Th0.terminate();

Теперь собственно пишем функцию запуска работника. В коде сначала идет onmessage затем postMessage..

Th0.postMessage(nameRQ)}

Как видите, в postMessage мы передаем имя запрашиваемого файла, с которого будет считываться информация с сервера.

Итоговый файл:

function req0() {
        Th0=new Worker('Th0.js'); /* создаем Работника */
        Th0.onmessage=function(event) {document.getElementById('DivRQ').innerHTML=event.data.goodReq0;  /* обработчик  */               Th0.terminate();} /* завершаем WebWorker */             
        Th0.postMessage(nameRQ)} /* запускаем WebWorker */      

Вот и готов наш «параллельный запрос». Теперь их можно делать параллельно.

This entry passed through the Full-Text RSS service — if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.