WebワーカーでjQueryを使用できないようですが、XMLHttpRequest
でjQueryを実行する方法があるはずですが、読んだときにそれは良いオプションではないようです この答え 。
もちろんWebワーカー内でAJAXを使用できますが、AJAX呼び出しは非同期であり、コールバックを使用する必要があることを覚えておいてください。
これは、サーバーにアクセスしてAJAXリクエストを実行するためにWebworker内で使用する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;
};
次に、あなたの労働者の中であなたがすることができます:
ajax(url, {'send': true, 'lemons': 'sour'}, function(data) {
//do something with the data like:
self.postMessage(data);
}, 'POST');
あなたが読みたいかもしれないこの答えが多すぎる場合に発生する可能性があるいくつかの落とし穴についてAJAX Webworkersを経由するリクエスト。
Fetch APIからJS関数fetch()を使用するだけです。 [〜#〜] cors [〜#〜]バイパスなどの多くのオプションを設定することもできます(同じことを実現できます) importScriptsと同様の動作ですが、Promises)を使用することで、よりクリーンな方法で実行できます。
コードは次のようになります。
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);
});
webサービスの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>
JSONPを使用する別のドメインでサービスを呼び出そうとする場合は、importScripts関数を使用できます。例えば:
// 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();
ここでこの素晴らしいヒントを見つけました: http://cggallant.blogspot.com/2010/10/jsonp-overview-and-jsonp-in-html-5-web.html