diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/idbrequest | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/ja/web/api/idbrequest')
-rw-r--r-- | files/ja/web/api/idbrequest/index.html | 134 | ||||
-rw-r--r-- | files/ja/web/api/idbrequest/onsuccess/index.html | 102 | ||||
-rw-r--r-- | files/ja/web/api/idbrequest/success_event/index.html | 101 |
3 files changed, 337 insertions, 0 deletions
diff --git a/files/ja/web/api/idbrequest/index.html b/files/ja/web/api/idbrequest/index.html new file mode 100644 index 0000000000..f4cab5a01b --- /dev/null +++ b/files/ja/web/api/idbrequest/index.html @@ -0,0 +1,134 @@ +--- +title: IDBRequest +slug: Web/API/IDBRequest +tags: + - API + - Database + - IDBRequest + - IndexedDB + - Interface + - NeedsTranslation + - Reference + - Storage + - TopicStub +translation_of: Web/API/IDBRequest +--- +<p>{{APIRef("IndexedDB")}}</p> + +<div> +<p>The <strong><code>IDBRequest</code></strong> interface of the IndexedDB API provides access to results of asynchronous requests to databases and database objects using event handler attributes. Each reading and writing operation on a database is done using a request.</p> +</div> + +<p>The request object does not initially contain any information about the result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the <code>IDBRequest</code> instance.</p> + +<p>All asynchronous operations immediately return an {{domxref("IDBRequest")}} instance. Each request has a <code>readyState</code> that is set to the <code>'pending'</code> state; this changes to <code>'done'</code> when the request is completed or fails. When the state is set to <code>done</code>, every request returns a <code>result</code> and an <code>error</code>, and an event is fired on the request. When the state is still <code>pending</code>, any attempt to access the <code>result</code> or <code>error</code> raises an <code>InvalidStateError</code> exception.</p> + +<p>In plain words, all asynchronous methods return a request object. If the request has been completed successfully, the result is made available through the <code>result</code> property and an event indicating success is fired at the request ({{domxref("IDBRequest.onsuccess")}}). If an error occurs while performing the operation, the exception is made available through the <code>result</code> property and an error event is fired ({{domxref("IDBRequest.onerror")}}).</p> + +<p>The interface {{domxref("IDBOpenDBRequest")}} is derived from <code>IDBRequest</code>.</p> + +<p>{{AvailableInWorkers}}</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Properties">Properties</h2> + +<p><em>Also inherits properties from {{domxref("EventTarget")}}.</em></p> + +<dl> + <dt>{{domxref("IDBRequest.error")}} {{readonlyInline}}</dt> + <dd>Returns a {{domxref("DOMException")}} in the event of an unsuccessful request, indicating what went wrong.</dd> + <dt>{{domxref("IDBRequest.result")}} {{readonlyInline}}</dt> + <dd> + <p>Returns the result of the request. If the the request failed and the result is not available, an InvalidStateError exception is thrown.</p> + </dd> + <dt>{{domxref("IDBRequest.source")}} {{readonlyInline}}</dt> + <dd>The source of the request, such as an {{domxref("IDBIndex")}} or an {{domxref("IDBObjectStore")}}. If no source exists (such as when calling {{domxref("IDBFactory.open")}}), it returns null.</dd> + <dt>{{domxref("IDBRequest.readyState")}} {{readonlyInline}}</dt> + <dd>The state of the request. Every request starts in the <code>pending</code> state. The state changes to <code>done</code> when the request completes successfully or when an error occurs.</dd> + <dt>{{domxref("IDBRequest.transaction")}} {{readonlyInline}}</dt> + <dd>The transaction for the request. This property can be null for certain requests, for example those returned from {{domxref("IDBFactory.open")}} unless an upgrade is needed. (You're just connecting to a database, so there is no transaction to return).</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>No methods, but inherits methods from {{domxref("EventTarget")}}.</em></p> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt><a href="/en-US/docs/Web/API/IDBRequest/error_event"><code>error</code></a></dt> + <dd>Fired when an error caused a request to fail.<br> + Also available via the <code><a href="/en-US/docs/Web/API/IDBRequest/onerror">onerror</a></code> property.</dd> + <dt><a href="/en-US/docs/Web/API/IDBRequest/success_event"><code>success</code></a></dt> + <dd>Fired when an <code>IDBRequest</code> succeeds.<br> + Also available via the <code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> property.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>In the following code snippet, we open a database asynchronously and make a request; <code>onerror</code> and <code>onsuccess</code> functions are included to handle the success and error cases. For a full working example, see our <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> app (<a href="http://chrisdavidmills.github.io/to-do-notifications/">view example live</a>.)</p> + +<pre class="brush: js">var db; + +// Let us open our database +var DBOpenRequest = window.indexedDB.open("toDoList", 4); + +// these two event handlers act on the database being +// opened successfully, or not +DBOpenRequest.onerror = function(event) { + note.innerHTML += '<li>Error loading database.</li>'; +}; + +DBOpenRequest.onsuccess = function(event) { + note.innerHTML += '<li>Database initialised.</li>'; + + // store the result of opening the database. + db = DBOpenRequest.result; +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#idl-def-IDBRequest', 'IDBRequest')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName("IndexedDB 2", "#request-api", "IDBRequest")}}</td> + <td>{{Spec2("IndexedDB 2")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> +<div> + + +<p>{{Compat("api.IDBRequest")}}</p> +</div> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li>Starting transactions: {{domxref("IDBDatabase")}}</li> + <li>Using transactions: {{domxref("IDBTransaction")}}</li> + <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> + <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> + <li>Using cursors: {{domxref("IDBCursor")}}</li> + <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> +</ul> diff --git a/files/ja/web/api/idbrequest/onsuccess/index.html b/files/ja/web/api/idbrequest/onsuccess/index.html new file mode 100644 index 0000000000..536aa9ab81 --- /dev/null +++ b/files/ja/web/api/idbrequest/onsuccess/index.html @@ -0,0 +1,102 @@ +--- +title: IDBRequest.onsuccess +slug: Web/API/IDBRequest/onsuccess +tags: + - API + - Database + - IDBRequest + - IndexedDB + - Property + - Reference + - Storage + - onsuccess +translation_of: Web/API/IDBRequest/onsuccess +--- +<p>{{ APIRef("IndexedDB") }}</p> + +<div> +<p>{{domxref("IDBRequest")}} インターフェースの<strong><code>onsuccess</code></strong>イベントハンドラはリクエストの結果が正常に帰ってきた時に着火される<code><a href="/ja/docs/Web/API/IDBRequest/success_event">success</a></code>イベントをハンドリングします。</p> + +<p>イベントハンドラは、type="success"の成功<a dir="ltr" href="/ja/docs/Web/Events/success">イベント</a>をパラメータとして受け取ります。</p> + +<p>{{AvailableInWorkers}}</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox" style="font-size: 14px;">request.onsuccess = function(event) { ... };</pre> + +<h2 id="例">例</h2> + +<p>下記の例は、指定されたレコードタイトルをリクエストします。リクエストの<code>onsuccess</code>イベントハンドラは{{domxref("IDBObjectStore")}} (<code>objectStoreTitleRequest.result</code>として利用可能)からレコードを取得し、そのプロパティを更新してオブジェクトストアに書き戻します。</p> + +<p>完全な例は<span style="line-height: 1.5;"> </span><a href="https://github.com/mdn/to-do-notifications/" style="line-height: 1.5;">To-do Notifications</a><span style="line-height: 1.5;"> app (</span><a href="http://mdn.github.io/to-do-notifications/" style="line-height: 1.5;">example live</a>)を参照してください。</p> + +<pre class="brush: js;highlight:[11]" style="font-size: 14px;">var title = "Walk dog"; + +// いつものようにトランザクションをオープンする +var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + +// title変数の値をタイトルとして持つTo-Doリストオブジェクトを取得する +var objectStoreTitleRequest = objectStore.get(title); + +objectStoreTitleRequest.onsuccess = function() { +<code> // resultとして返却されたデータオブジェクトを取得 + var data = objectStoreTitleRequest.result; + + // データオブジェクトのnotifiedプロパティ値を"yes"に更新する + data.notified = "yes";</code> + + // データベースにアイテムを書き戻す別のリクエストを作成する + var updateTitleRequest = objectStore.put(data); + + // この新しいリクエストが成功すると、 + // 表示更新のためにdisplayData()が再度実行される + <span style="font-size: 1rem;">updateTitleRequest</span><span style="font-size: 1rem;">.onsuccess = function() {</span> + displayData(); + }; +};</pre> + +<h2 id="仕様書">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}}</td> + <td>{{Spec2('IndexedDB')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("IndexedDB 2", "#dom-idbrequest-onsuccess", "onsuccess")}}</td> + <td>{{Spec2("IndexedDB 2")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div> + + +<p>{{Compat("api.IDBRequest.onsuccess")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">Using IndexedDB</a></li> + <li><a href="/ja/docs/Web/Events/success">Success Event</a></li> + <li>Starting transactions: {{domxref("IDBDatabase")}}</li> + <li>Using transactions: {{domxref("IDBTransaction")}}</li> + <li>Setting a range of keys: {{domxref("IDBKeyRange")}}</li> + <li>Retrieving and making changes to your data: {{domxref("IDBObjectStore")}}</li> + <li>Using cursors: {{domxref("IDBCursor")}}</li> + <li>Reference example: <a class="external" href="https://github.com/mdn/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a class="external" href="http://mdn.github.io/to-do-notifications/">view example live</a>.)</li> + <li><code><a href="/ja/docs/Web/API/IDBRequest/success_event">success</a></code> event</li> +</ul> diff --git a/files/ja/web/api/idbrequest/success_event/index.html b/files/ja/web/api/idbrequest/success_event/index.html new file mode 100644 index 0000000000..21c49830e4 --- /dev/null +++ b/files/ja/web/api/idbrequest/success_event/index.html @@ -0,0 +1,101 @@ +--- +title: 'IDBRequest: success event' +slug: Web/API/IDBRequest/success_event +translation_of: Web/API/IDBRequest/success_event +--- +<div>{{ APIRef("IndexedDB") }}</div> + +<p><code>success</code>イベントは<code>IDBRequest</code>が成功すると着火します。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td><code><a href="/en-US/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code></td> + </tr> + </tbody> +</table> + +<h2 id="例">例</h2> + +<p>この例では、データベースをオープンします。その<code>success</code>イベントを<code>addEventListener()</code>でリスンします。</p> + +<pre class="brush: js">// データベースをオープンする +const openRequest = window.indexedDB.open('toDoList', 4); + +openRequest.onupgradeneeded = (event) => { + const db = event.target.result; + + db.onerror = () => { + console.log('Error creating database'); + }; + + // オブジェクトストアを作成する + var objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' }); + + // オブジェクトストアが保有するデータを定義する + objectStore.createIndex('hours', 'hours', { unique: false }); + objectStore.createIndex('minutes', 'minutes', { unique: false }); + objectStore.createIndex('day', 'day', { unique: false }); + objectStore.createIndex('month', 'month', { unique: false }); + objectStore.createIndex('year', 'year', { unique: false }); +}; + +openRequest.addEventListener('success', (event) => { + console.log('Database opened successfully!'); +}); + +</pre> + +<p>下記は同じことを<code>onsuccess</code>イベントハンドラープロパティを使用した例です。</p> + +<pre class="brush: js">// データベースをオープンする +const openRequest = window.indexedDB.open('toDoList', 4); + +openRequest.onupgradeneeded = (event) => { + const db = event.target.result; + + db.onerror = () => { + console.log('Error creating database'); + }; + + // オブジェクトストアを作成する + var objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' }); + + // オブジェクトストアが保有するデータを定義する + objectStore.createIndex('hours', 'hours', { unique: false }); + objectStore.createIndex('minutes', 'minutes', { unique: false }); + objectStore.createIndex('day', 'day', { unique: false }); + objectStore.createIndex('month', 'month', { unique: false }); + objectStore.createIndex('year', 'year', { unique: false }); +}; + +openRequest.onsuccess = (event) => { + console.log('Database opened successfully!'); +}; +</pre> + +<h2 id="ブラウザの対応">ブラウザの対応</h2> + + + +<p>{{Compat("api.IDBRequest.success_event")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li><a href="/ja/docs/IndexedDB/Using_IndexedDB">Using IndexedDB</a></li> + <li><code><a href="/ja/docs/Web/API/IDBRequest/onsuccess">onsuccess</a></code> event handler property</li> +</ul> |