HTML Web Worker and Jquery Ajax call

问题

I'm wondering if I can use jQuery inside the web worker file. Google Chrome gives me this error: "Uncaught ReferenceError: $ is not defined".

Here is the code: The parent file:

var loader = new Worker(BASE_URL + "js/rss_loader_worker.js");
// Ask the worker to start loading the RSS from the server
loader.postMessage("loadRss");
// When receive the response from the server
loader.onmessage = function (event) {
  console.log(event.data);
}

The worker file:

onmessage = function (event) {
  if (event.data === "loadRss") {
    loadRss();
  }
}

/**
 * This function handles the AJAX request to the server side
 * then pass the content to the view page
 * @param none
 * @return html text
 */
loadRss = function () {
  $.ajax({
    data: {city: CITY_LOCATION},
    url: BASE_URL + "/getfeeds",
    onsucess: function (data) {

    }
  });
}

Please help, thank you :)

回答1:

No you cannot. There's no access to non-thread safe components or the DOM and you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code. jQuery is a JavaScript DOM library.

But you can use a native XMLHttpRequest in your worker however.

And, importing external scripts does not go via the page with a script tag : use importScripts() for that in your worker file.

回答2:

Here's what I found:

You can load external script files or libraries into a worker with the importScripts() function.

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-enviornment-loadingscripts

importScripts('script1.js');
importScripts('script2.js');

importScripts('script1.js', 'script2.js');

Although, you cannot load jQuery, because jQuery requires DOM access, which web workers don't have.

回答3:

Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object
The document object
The parent object

So you can't use $ inside worker file. Better you can use traditional AJAX something like this

if (window.XMLHttpRequest)
{
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Reference at http://www.w3schools.com/html/html5_webworkers.asp

回答4:

The execution environment in Node.JS also lacks a native DOM implementation. I think it's fair to say that Node.JS and HTML5 Web Workers share certain restrictions.

There are ways to simulate a DOM implementation for the purpose of using jQuery in Node.JS. If you still want to use jQuery in Web Workers, I think you should search for the Node.JS solutions and see if they apply.

回答5:

jQuery is mostly for working with the DOM and working with web pages. So it is not so suitable for Web Workers that do not have access to the DOM.

You might want to use a utility library instead of a DOM library, such as underscore.js, or perhaps someone ought to make a jQuery Worker library, a stripped down light version of jQuery without all the DOM manipulation functionality, just keeping the utility functions.

回答6:

take a look on this plug-in https://github.com/rwldrn/jquery-hive

来源：https://stackoverflow.com/questions/4838883/html-web-worker-and-jquery-ajax-call

标签

jquery

ajax

html5

web-worker