ajaxWorker 
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としてサブスレッドで行う処理もインラインで含んでいます。 |
ajaxWorker (_settings)
- メインスレッドで実行するインターフェースとなるメソッドです。
-
テキスト,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>…"JSON
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 () {
}
});成功時の戻り値: JSONオブジェクト
{ 'property1': 'value1', 'property2': 'value2', 'property3': 'value3'... }XML
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 () {
}
});成功時の戻り値: DOMオブジェクト
▶︎ #document
画像
- 画像を取得する場合の例。
- 戻り値として
inlineとblobの2通りの取得が可能です。
Data URIによるインラインデータで取得
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,******************************…">blobデータで取得
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/************************************">Data URI
指定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 URI
"data:image/x-icon;base64,******************************…"
Special Thanks
ajaxWorker の実装にあたり、特に以下の記事に大きな参考とアイデアをいただきました。