npm.io
1.1.9 • Published 3 years ago

ajax-worker-js

Licence
MIT
Version
1.1.9
Deps
0
Size
25 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

ajaxWorker npm version

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'
  • dataType が 'image' のときのみ必要。
  • 'inline' または 'blob' のいずれか
context Object this this 受け渡すコンテキスト
data Object null { property: value } 送信データ
timeout Int 2000 2000 非同期通信のタイムアウト（ミリ秒）
cache Boolean true true
  • 非同期通信のキャッシュを有効とするか
  • false のときURLにUNIXタイムスタンプをランダムパラメータとして追加して送信します。
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 の実装にあたり、特に以下の記事に大きな参考とアイデアをいただきました。

Keywords

javascriptweb workersajax