1.1.9 • Published 2 years ago
ajax-worker-js v1.1.9
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の取得が可能です。
引数オブジェクトのパラメータ一覧
実行に必要な引数オブジェクトに含めるパラメータと仕様の一覧です。
実行サンプル
テキスト
テキストファイルの内容や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 の実装にあたり、特に以下の記事に大きな参考とアイデアをいただきました。