我似乎不能在我的Web Worker中使用jQuery,我知道可以使用XMLHttpRequest
来完成,但是当我读到这个答案时,那可能不是一个好选择。
我似乎不能在我的Web Worker中使用jQuery,我知道可以使用XMLHttpRequest
来完成,但是当我读到这个答案时,那可能不是一个好选择。
当然你可以在Web Worker内部使用AJAX,你只需要记住 AJAX 调用是异步的,因此你必须使用回调函数。
这是我在Web Worker中使用的ajax
函数来访问服务端并进行AJAX请求:
var ajax = function(url, data, callback, type) {
var data_array, data_string, idx, req, value;
if (data == null) {
data = {};
}
if (callback == null) {
callback = function() {};
}
if (type == null) {
//default to a GET request
type = 'GET';
}
data_array = [];
for (idx in data) {
value = data[idx];
data_array.push("" + idx + "=" + value);
}
data_string = data_array.join("&");
req = new XMLHttpRequest();
req.open(type, url, false);
req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
req.onreadystatechange = function() {
if (req.readyState === 4 && req.status === 200) {
return callback(req.responseText);
}
};
req.send(data_string);
return req;
};
然后在您的worker内部,您可以这样做:
ajax(url, {'send': true, 'lemons': 'sour'}, function(data) {
//do something with the data like:
self.postMessage(data);
}, 'POST');
如果您通过 webworkers 发送 过多的 AJAX 请求,可能会遇到一些问题。您可能需要阅读此答案,了解其中的一些陷阱。
// Helper function to make the server requests
function MakeServerRequest()
{
importScripts("http://SomeServer.com?jsonp=HandleRequest");
}
// Callback function for the JSONP result
function HandleRequest(objJSON)
{
// Up to you what you do with the data received. In this case I pass
// it back to the UI layer so that an alert can be displayed to prove
// to me that the JSONP request worked.
postMessage("Data returned from the server...FirstName: " + objJSON.FirstName + " LastName: " + objJSON.LastName);
}
// Trigger the server request for the JSONP data
MakeServerRequest();
只需使用来自Fetch API的JS函数fetch()。您还可以设置许多选项,如绕过CORS等(因此您可以使用Promises以更干净的方式实现与importScripts相同的行为)。
代码如下:
var _params = { "param1": value};
fetch("http://localhost/Service/example.asmx/Webmethod", {
method: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8"
},
body: JSON.stringify(_params )
}).then(function (response) {
return response.json();
}).then(function (result) {
console.log(result);
});
这个webservice的web.config看起来像这样:
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>