We cross WebWorker and XMLHttpRequest

WebWorker + XMLHttpRequest

HTML5 does not surprise anyone, but many newbies have many questions. Especially issues related to parallel threads, namely with WebWorker. Further narration requires knowledge of JS and HTML - I will not chew the basics of html and js.
Today we will look at how to wrap an ordinary XMLHttpRequest in WebWorker.
The first step, of course, is to create a normal function.

function req0() {} 

Now you need to create an employee:

 Th0=new Worker('Th0.js') 

To work with WebWorker, we need to know only 3 commands: transfer, receive, delete.
For the main function:
onmessage - receiving a message or, roughly speaking, this is what the script will do after the completion of the WebWorker.
postMessage - sending a message or starting an employee. Here you can transfer data to the stream.
terminate - the completion of the worker.
For the worker himself in the script file:
onmessage - roughly speaking, this is what the employee will perform when starting it
postMessage is what the Employee sends to the main script, that is, the results of the work performed
Now you need to create the file Th0.js - it will contain the main code of the Employee. It is worth noting that WebWorker does not work locally, such as a regular html document. WebWorker requires a web server.
Open Th0.js and write:

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

Now we have a function that the Worker will perform. The variable nameRQ is required to pass the function to query the name of the file that contains the requested information. Now you need to write XMLHttpRequest. Everybody knows how? For more understanding, I advise you to read additional material about XMLHttpRequest requests. I will only briefly tell you.
Create a query:

 xhttp=new XMLHttpRequest() 

We write a simple server response handler. Of course, you can write a good handler with error recognition and reaction to them, but this is not about now.

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

if (xhttp.readyState == 4 && xhttp.status == 200) - server response handler. If the request is successfully completed, then execute the following function:
{postMessage ({goodReq0: xhttp.responseText})}};}

Now you need to run the query itself:

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

The request will be POST, asynchronous.
domen.dmn / req '+ nameRQ is the path to the file on the server. Accordingly, the required file with the requested name will be located in the req folder on the server - in this case, the name is characterized by the nameRQ variable. This will allow one request to access different files, changing the variable.
The final code of the Th0.js file

 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(); /*   */ } 

We return to the main function.
We write the worker's response handler.

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

document.getElementById ('DivRQ'). innerHTML - Inserts the resulting text into a div named DivRQ (which you must create on the page in advance).
event.data.goodReq0 is a variable with data received from the server.
"We kill" the Worker:

 Th0.terminate(); 

Now we actually write the employee startup function. In the code, onmessage goes first, then postMessage ..

 Th0.postMessage(nameRQ)} 

As you can see, in postMessage we transfer the name of the requested file from which information from the server will be read.
')
Summary file:

 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 */ 

So our “parallel query” is ready. Now they can be done in parallel.