ajaxWorkerはWeb Workerを利用しXMLHttpRequestによる非同期通信をサブスレッドで実行する機能を提供します。
ajaxWorker provides the function to use Web Worker to perform asynchronous communication via XMLHttpRequest in a sub-thread.
npm i install ajax-worker-js
<script src="ajax-worker.js"></script>
<!-- IE利用時のみ `URL API` のPolyfillが必要です -->
<script src="https://polyfill.io/v3/polyfill.js?features=URL"></script>
ファイル名 | 内容 |
---|---|
ajax-worker.js | メインスレッド上で実行する、Workerの呼び出しメソッドが定義されています。 Workerとしてサブスレッドで行う処理もインラインで含んでいます。 |
- メインスレッドで実行するインターフェースとなるメソッドです。
テキスト
,JSON
,XML
,画像
,Data URI
の取得が可能です。
実行に必要な引数オブジェクトに含めるパラメータと仕様の一覧です。
parameter | return value | data type | default | example | notes |
---|---|---|---|---|---|
method | String | 'GET' |
'GET' | 通信メソッド。'GET' または 'POST' |
|
url | String | null |
'http://example.com' | データ取得先のURL | |
dataType | String | 'text' |
'text' | 受け取るデータの形式。'text' , 'json' , 'xml' , 'image' , 'datauri' のいずれか |
|
elementType | String | 'inline' |
'inline' |
|
|
context | Object | this |
this | 受け渡すコンテキスト | |
data | Object | null |
{ property: value } | 送信データ | |
timeout | Int | 2000 |
2000 | 非同期通信のタイムアウト(ミリ秒) | |
cache | Boolean | true |
true |
|
|
retry | Boolean | false |
false | true を設定時、XMLHttpRequestに失敗した場合に1度だけ再試行します。 |
|
headers | Object | null |
{ 'Content-Type': 'application/json' } | 送信 header に指定したいオブジェクト | |
success | Function (_response ) |
成功時の処理 | |||
_response | Object String |
取得したデータ | |||
error | Function (_status , _statusText , _message ) |
エラー時の処理 | |||
_status | String | ステータスコード | |||
_statusText | String | ステータステキスト | |||
_message | String | エラーメッセージ | |||
complete | Function | 完了時の処理(成功・失敗に関わらず必ず実行) |
テキストファイルの内容やHTMLソースなど、テキストデータの取得する場合の例。
ajaxWorker({
url: 'http://example.com',
dataType: 'text',
headers: {
'Accept': 'text/html, application/xhtml+xml, application/xml'
},
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
"<!doctype html><html lang=\"ja\"><head><title>example.com</title></head><body>…"
APIアクセス等でJSONオブジェクトを取得する場合の例。
ajaxWorker({
url: 'http://example.com/api',
dataType: 'json',
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
{ 'property1': 'value1', 'property2': 'value2', 'property3': 'value3'... }
APIアクセス等でXMLオブジェクトを取得する場合の例。
ajaxWorker({
url: 'http://example.com/api',
dataType: 'xml',
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
▶︎ #document
- 画像を取得する場合の例。
- 戻り値として
inline
とblob
の2通りの取得が可能です。
ajaxWorker({
url: 'http://example.com/assets/images/example.jpg',
dataType: 'image',
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
<img src="data:image/jpeg;base64,******************************…">
ajaxWorker({
url: 'http://example.com/assets/images/example.jpg',
dataType: 'image',
elementType: 'blob',
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
<img src="blob:http://example.com/************************************">
指定URLをData URIとして取得する場合。
ajaxWorker({
url: 'http://example.com/favicon.ico',
dataType: 'datauri',
success: function (_response, _status) {
// console.log('success', _response, _status);
},
error: function (_status, _statusText, _message) {
// console.log('error', _status, _statusText, _message);
},
complete: function () {
}
});
"data:image/x-icon;base64,******************************…"
ajaxWorker の実装にあたり、特に以下の記事に大きな参考とアイデアをいただきました。