[Из песочницы] Скрещиваем WebWorker и XMLHttpRequest
WebWorker+XMLHttpRequestHTML5 уже никого не удивляет, но у многих новичков возникает много вопросов. Особенно вопросы связаные с параллельными потоками, а именно с 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 */ Вот и готов наш «параллельный запрос». Теперь их можно делать параллельно.
