From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/request/cache/index.html | 143 ++++++++++++++++++++ files/ja/web/api/request/clone/index.html | 123 +++++++++++++++++ files/ja/web/api/request/credentials/index.html | 123 +++++++++++++++++ files/ja/web/api/request/headers/index.html | 131 ++++++++++++++++++ files/ja/web/api/request/index.html | 172 ++++++++++++++++++++++++ files/ja/web/api/request/integrity/index.html | 64 +++++++++ files/ja/web/api/request/method/index.html | 116 ++++++++++++++++ files/ja/web/api/request/mode/index.html | 80 +++++++++++ files/ja/web/api/request/redirect/index.html | 70 ++++++++++ files/ja/web/api/request/referrer/index.html | 121 +++++++++++++++++ files/ja/web/api/request/request/index.html | 162 ++++++++++++++++++++++ files/ja/web/api/request/url/index.html | 117 ++++++++++++++++ 12 files changed, 1422 insertions(+) create mode 100644 files/ja/web/api/request/cache/index.html create mode 100644 files/ja/web/api/request/clone/index.html create mode 100644 files/ja/web/api/request/credentials/index.html create mode 100644 files/ja/web/api/request/headers/index.html create mode 100644 files/ja/web/api/request/index.html create mode 100644 files/ja/web/api/request/integrity/index.html create mode 100644 files/ja/web/api/request/method/index.html create mode 100644 files/ja/web/api/request/mode/index.html create mode 100644 files/ja/web/api/request/redirect/index.html create mode 100644 files/ja/web/api/request/referrer/index.html create mode 100644 files/ja/web/api/request/request/index.html create mode 100644 files/ja/web/api/request/url/index.html (limited to 'files/ja/web/api/request') diff --git a/files/ja/web/api/request/cache/index.html b/files/ja/web/api/request/cache/index.html new file mode 100644 index 0000000000..be3a255989 --- /dev/null +++ b/files/ja/web/api/request/cache/index.html @@ -0,0 +1,143 @@ +--- +title: Request.cache +slug: Web/API/Request/cache +tags: + - API + - Cache + - Experimental + - Fetch + - Property + - Reference + - requesut +translation_of: Web/API/Request/cache +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} インターフェースの cache 読み取り専用プロパティには、リクエストのキャッシュモードが含まれています。リクエストがブラウザの HTTP キャッシュ とどのように相互作用するかを制御します。

+ +

構文

+ +
var currentCacheMode = request.cache;
+ +

値

+ +

RequestCache 使用可能な値は次のとおりです。

+ + + +

例

+ +
// Download a resource with cache busting, to bypass the cache
+// completely.
+fetch("some.json", {cache: "no-store"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting, but update the HTTP
+// cache with the downloaded resource.
+fetch("some.json", {cache: "reload"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with cache busting when dealing with a
+// properly configured server that will send the correct ETag
+// and Date headers and properly handle If-Modified-Since and
+// If-None-Match request headers, therefore we can rely on the
+// validation to guarantee a fresh response.
+fetch("some.json", {cache: "no-cache"})
+  .then(function(response) { /* consume the response */ });
+
+// Download a resource with economics in mind!  Prefer a cached
+// albeit stale response to conserve as much bandwidth as possible.
+fetch("some.json", {cache: "force-cache"})
+  .then(function(response) { /* consume the response */ });
+
+// Naive stale-while-revalidate client-level implementation.
+// Prefer a cached albeit stale response; but update if it's too old.
+// AbortController and signal to allow better memory cleaning.
+// In reality; this would be a function that takes a path and a
+// reference to the controller since it would need to change the value
+let controller = new AbortController();
+fetch("some.json", {cache: "only-if-cached", mode: "same-origin", signal: controller.signal})
+  .catch(e => e instanceof TypeError && e.message === "Failed to fetch" ?
+    ({status: 504}) : // Workaround for chrome; which simply fails with a typeerror
+    Promise.reject(e))
+  .then(res => {
+    if (res.status === 504) {
+      controller.abort()
+      controller = new AbortController();
+      return fetch("some.json", {cache: "force-cache", mode: "same-origin", signal: controller.signal})
+    }
+    const date = res.headers.get("date"), dt = date ? new Date(date).getTime() : 0
+    if (dt < (Date.now() - 86400000)) {
+      // if older than 24 hours
+      controller.abort()
+      controller = new AbortController();
+      return fetch("some.json", {cache: "reload", mode: "same-origin", signal: controller.signal})
+    }
+
+    // Other possible conditions
+    if (dt < (Date.now() - 300000)) // If it's older than 5 minutes
+      fetch("some.json", {cache: "no-cache", mode: "same-origin"}) // no cancellation or return value.
+    return res
+  })
+  .then(function(response) { /* consume the (possibly stale) response */ })
+  .catch(error => { /* Can be an AbortError/DOMError or a TypeError */ });
+ +

Specifications

+ + + + + + + + + + + + + + +
仕様書状態コメント
{{SpecName('Fetch','#dom-request-cache','cache')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザの互換性

+ + + +

{{Compat("api.Request.cache")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/request/clone/index.html b/files/ja/web/api/request/clone/index.html new file mode 100644 index 0000000000..4bd0afd359 --- /dev/null +++ b/files/ja/web/api/request/clone/index.html @@ -0,0 +1,123 @@ +--- +title: Request.clone() +slug: Web/API/Request/clone +tags: + - API + - Experimenal + - Fetch + - Method + - Reference + - clone + - request +translation_of: Web/API/Request/clone +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの clone() メソッドは、現在の Request オブジェクトのコピーを生成します。

+ +

レスポンス {{domxref("Body")}} が既に使用されていた場合、clone() は {{jsxref("TypeError")}} をスローします。はっきりと言えば、clone() が存在する主な理由は、{{domxref("Body")}} オブジェクトを（それらが 1 回しか使用できない時に）複数回使用するためです。

+ +

構文

+ +
var newRequest = request.clone();
+ +

パラメータ

+ +

なし。

+ +

戻り値

+ +

clone( ) が呼び出された Request の精密なコピーである {{domxref("Request")}} オブジェクト。

+ +

例

+ +

次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストをコピーしています。

+ +
var myRequest = new Request('flowers.jpg');
+var newRequest = myRequest.clone(); // リクエストのコピーが newRequest に保存されます。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-clone','clone')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は選択によって使えるようになります。

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/credentials/index.html b/files/ja/web/api/request/credentials/index.html new file mode 100644 index 0000000000..f9890d00dc --- /dev/null +++ b/files/ja/web/api/request/credentials/index.html @@ -0,0 +1,123 @@ +--- +title: Request.credentials +slug: Web/API/Request/credentials +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - credentials + - request +translation_of: Web/API/Request/credentials +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの credentials 読み取り専用プロパティは、クロスオリジンリクエストの場合、ユーザーエージェントが ほかのドメインからクッキーを送信すべきかどうかを示します。これは XHR の withCredentials フラグと似ていますが、（2 つではなく）3 つの値があります：

+ + + +

構文

+ +
var myCred = request.credentials;
+ +

値

+ +

{{domxref("RequestCredentials")}} 値。

+ +

例

+ +

次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストの credentials を変数に保存しています：

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.credentials; // 既定では "omit" を返す。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-credentials','credentials')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は設定によって使えるようになります。

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/headers/index.html b/files/ja/web/api/request/headers/index.html new file mode 100644 index 0000000000..d5760737fc --- /dev/null +++ b/files/ja/web/api/request/headers/index.html @@ -0,0 +1,131 @@ +--- +title: Request.headers +slug: Web/API/Request/headers +tags: + - API + - Experimental + - Fetch + - Headers + - Property + - Reference + - request +translation_of: Web/API/Request/headers +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} のインターフェースの headers 読み取り専用プロパティは、リクエストに関連する {{domxref("Headers")}} オブジェクトを含みます。

+ +

構文

+ +
var myHeaders = request.headers;
+ +

値

+ +

{{domxref("Headers")}} オブジェクト。

+ +

例

+ +

次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストの headersを変数に保存しています：

+ +
var myRequest = new Request('flowers.jpg');
+var myHeaders = myRequest.headers; // Headers {}
+ +

{{domxref("Headers")}} オブジェクトにヘッダを追加するためには、{{domxref("Headers.append")}} を使用します。初期化オプションとしてのヘッダを渡し、 2番目の初期化パラメータと一緒に新しい request を生成ます：

+ +
var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+                   headers: myHeaders,
+                   mode: 'cors',
+                   cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+myContentType = myRequest.headers.get('Content-Type'); // 'image/jpeg' を返す。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-headers','headers')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は設定によって使えるようになります。

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/index.html b/files/ja/web/api/request/index.html new file mode 100644 index 0000000000..e44da70c13 --- /dev/null +++ b/files/ja/web/api/request/index.html @@ -0,0 +1,172 @@ +--- +title: Request +slug: Web/API/Request +tags: + - API + - Fetch + - Fetch API + - Interface + - Networking + - Reference + - request +translation_of: Web/API/Request +--- +
{{APIRef("Fetch API")}}
+ +

Fetch API の Request インターフェイスは、リソースのリクエストを表します。

+ +

新しい Request オブジェクトは {{domxref("Request.Request()")}} コンストラクターを用いて生成することができますが、 Request オブジェクトは他の API 操作、例えばサービスワーカーの {{domxref("FetchEvent.request")}} などの結果として返されたものに遭遇することの方が多いでしょう。

+ +

コンストラクター

+ +
+
{{domxref("Request.Request","Request()")}}
+
新しい Request オブジェクトを生成します。
+
+ +

プロパティ

+ +
+
{{domxref("Request.cache")}} {{readonlyInline}}
+
リクエストのキャッシュモード (default, reload, no-cache など) が入ります。
+
{{domxref("Request.context")}} {{readonlyInline}} {{deprecated_inline()}}
+
リクエストのコンテキスト (audio, image, iframe など) が入ります。
+
{{domxref("Request.credentials")}} {{readonlyInline}}
+
リクエストの認証情報 (omit, same-origin, include など) が入ります。既定値は same-origin です。
+
{{domxref("Request.destination")}} {{ReadOnlyInline}}
+
{{domxref("RequestDestination")}} 列挙型の文字列で、リクエストの方向を示します。これはその種類のコンテンツがリクエストされることを示す文字列です。
+
{{domxref("Request.headers")}} {{readonlyInline}}
+
リクエストに関連付けられた {{domxref("Headers")}} オブジェクトが入ります。
+
{{domxref("Request.integrity")}} {{readonlyInline}}
+
リクエストの subresource integrity 値 (例えば sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=) が入ります。
+
{{domxref("Request.method")}} {{readonlyInline}}
+
リクエストメソッド (GET, POST など) が入ります。
+
{{domxref("Request.mode")}} {{readonlyInline}}
+
リクエストのモード ( cors, no-cors, same-origin, navigate など) が入ります。
+
{{domxref("Request.redirect")}} {{readonlyinline}}
+
リダイレクトをどう扱うかのモードが入ります。 follow, error, manual のいずれかです。
+
{{domxref("Request.referrer")}} {{readonlyInline}}
+
リクエストのリファラー (client など) が入ります。
+
{{domxref("Request.referrerPolicy")}} {{readonlyInline}}
+
リファラに関するポリシー (no-referrer など) が入ります。
+
{{domxref("Request.url")}} {{readonlyInline}}
+
リクエストの URL が入ります。
+
+ +

Request は {{domxref("Body")}} を実装しているため、以下のプロパティを継承しています。

+ +
+
{{domxref("Body.body", "body")}} {{readonlyInline}}
+
body の中身を {{domxref("ReadableStream")}} として取り出すために使用されるシンプルなゲッターです。
+
{{domxref("Body.bodyUsed", "bodyUsed")}} {{readonlyInline}}
+
{{domxref("Boolean")}} であり、レスポンス中で本文が既に使用されたかどうかを示します。
+
+ +

メソッド

+ +
+
{{domxref("Request.clone()")}}
+
現在の Request オブジェクトのコピーを生成します。
+
+ +

Request は {{domxref("Body")}} を実装しているため、以下のメソッドも利用できます。

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
リクエスト本体を表す {{domxref("ArrayBuffer")}} で解決する Promise が返ります。
+
{{domxref("Body.blob()")}}
+
リクエスト本体を表す {{domxref("Blob")}} で解決する Promise が返ります。
+
{{domxref("Body.formData()")}}
+
リクエスト本体を表す {{domxref("FormData")}} で解決する Promise が返ります。
+
{{domxref("Body.json()")}}
+
リクエスト本体を表す {{domxref("JSON")}} で解決する Promise が返ります。
+
{{domxref("Body.text()")}}
+
リクエスト本体を表す {{domxref("USVString")}} (テキスト) で解決する Promise が返ります。
+
+ +
+

メモ: {{domxref("Body")}} の関数は 1 度しか呼び出せません。 2 回目以降は空の文字列または ArrayBuffer で解決します。

+
+ +

例

+ +

次のスニペットでは、Request() コンストラクターを使用して (スクリプトと同じディレクトリーにある画像ファイルのために) 新しい request を生成し、いくつかリクエストのプロパティ値を返しています。

+ +
const request = new Request('https://www.mozilla.org/favicon.ico');
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+
+ +

このリクエストは、下記のように Request オブジェクトを引数として {{domxref("WindowOrWorkerGlobalScope.fetch()")}} に渡すことで読み取ることができます。

+ +
fetch(request)
+  .then(response => response.blob())
+  .then(blob => {
+    image.src = URL.createObjectURL(blob);
+  });
+ +

以下のスニペットでは、 Request() コンストラクターにいくつかの初期化データと本文コンテンツを付けて、本文ペイロードを必要とする API リクエストのための新しいリクエストを生成します。

+ +
const request = new Request('https://example.com', {method: 'POST', body: '{"foo": "bar"}'});
+
+const URL = request.url;
+const method = request.method;
+const credentials = request.credentials;
+const bodyUsed = request.bodyUsed;
+
+ +
+

メモ: body の型は {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}} {{domxref("ReadableStream")}} のいずれかで、ペイロードにそのオブジェクトを文字列化するのに必要な JSON オブジェクトでも同様です。

+
+ +

すると Request オブジェクトを、例えば {{domxref("GlobalFetch.fetch()")}} 呼び出しの引数として渡すことで API リクエストを取得できて、レスポンスを取得できます。

+ +
fetch(request)
+  .then(response => {
+    if (response.status === 200) {
+      return response.json();
+    } else {
+      throw new Error('Something went wrong on api server!');
+    }
+  })
+  .then(response => {
+    console.debug(response);
+    // ...
+  }).catch(error => {
+    console.error(error);
+  });
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fetch','#request-class','Request')}}{{Spec2('Fetch')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Request")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/request/integrity/index.html b/files/ja/web/api/request/integrity/index.html new file mode 100644 index 0000000000..61d5bfe118 --- /dev/null +++ b/files/ja/web/api/request/integrity/index.html @@ -0,0 +1,64 @@ +--- +title: Request.integrity +slug: Web/API/Request/integrity +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - integrity + - request +translation_of: Web/API/Request/integrity +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} インターフェイスの integrity 読み取り専用プロパティには、リクエストの サブリソース完全性 値が含まれています。

+ +

構文

+ +
var myIntegrity = request.integrity;
+ +

値

+ +

リクエストの サブリソース完全性 値 (例, sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

+ +

完全性が指定されていない場合、 '' を返します。

+ +

例

+ +

次のスニペットでは {{domxref("Request.Request()")}} コンストラクタを使用して新しい request を作成し ( script と同じディレクトリにある画像ファイルの場合)、 request の integrity 値を変数に保存します:

+ +
var myRequest = new Request('flowers.jpg');
+var myIntegrity = myRequest.integrity;
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-integrity','integrity')}}{{Spec2('Fetch')}}初回定義。
+ +

ブラウザーの実装状況

+ + + +

{{Compat("api.Request.integrity")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/method/index.html b/files/ja/web/api/request/method/index.html new file mode 100644 index 0000000000..45f4b65ba4 --- /dev/null +++ b/files/ja/web/api/request/method/index.html @@ -0,0 +1,116 @@ +--- +title: Request.method +slug: Web/API/Request/method +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - request +translation_of: Web/API/Request/method +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの method 読み取り専用プロパティには、リクエストメソッド（GET、POST など）を含みます。

+ +

構文

+ +
var myMode = request.mode;
+ +

値

+ +

リクエストメソッドを示す {{domxref("ByteString")}}。

+ +

例

+ +

次のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストメソッドを変数に保存しています：

+ +
var myRequest = new Request('flowers.jpg');
+var myMethod = myRequest.method; // GET
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-method','method')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は設定によって使えるようになります。

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/mode/index.html b/files/ja/web/api/request/mode/index.html new file mode 100644 index 0000000000..455cde143c --- /dev/null +++ b/files/ja/web/api/request/mode/index.html @@ -0,0 +1,80 @@ +--- +title: Request.mode +slug: Web/API/Request/mode +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - mode + - request +translation_of: Web/API/Request/mode +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの mode 読み取り専用プロパティは、リクエストのモード（たとえば、cors、no-cors、cors-with-forced-preflight、same-origin）を含みます。これは、クロスオリジンリクエストに対して有効なレスポンスができるか、またレスポンスのプロパティが読み取り可能かどうかを判定するために使用されます。

+ +

構文

+ +
var myMode = request.mode;
+ +

値

+ +

{{domxref("RequestMode")}} の値は以下のいずれかです。

+ + + +

デフォルトのmode

+ +

リクエストは様々な方法で初期化されますが、modeの値はその方法によって変わります。

+ +

たとえば、Requestオブジェクトが{{domxref("Request.Request")}}コンストラクタで生成された場合、modeの値はcorsにセットされます。

+ +

しかし、リクエストが{{domxref("Request.Request")}}コンストラクタ以外で生成された場合はmodeとして通常no-corsがセットされます。たとえばマークアップから生成された埋め込みリソースのようなリクエストは、crossoriginアトリビュートが設定されていない限り、no-corsを利用します。そのようなものの例として、{{HTMLElement("link")}} や {{HTMLElement("script")}} エレメント（ただしモジュールを除く）、{{HTMLElement("img")}}、{{HTMLElement("audio")}}、{{HTMLElement("video")}}、{{HTMLElement("object")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}} エレメントなどが存在します。

+ +

例

+ +

以下のスニペットは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、リクエストモードを変数に保存しています：

+ +
var myRequest = new Request('flowers.jpg');
+var myMode = myRequest.mode; // 既定で "cors" を返す。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-mode','mode')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ + + +


+ {{Compat("api.Request.mode")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/redirect/index.html b/files/ja/web/api/request/redirect/index.html new file mode 100644 index 0000000000..0ee4d69901 --- /dev/null +++ b/files/ja/web/api/request/redirect/index.html @@ -0,0 +1,70 @@ +--- +title: Request.redirect +slug: Web/API/Request/redirect +tags: + - API + - Experimental + - Fetch + - Property + - Redirect + - Reference + - request +translation_of: Web/API/Request/redirect +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Request")}} インターフェイスの redirect 読み取り専用プロパティには、リダイレクトの処理方法モードが含まれています。

+ +

構文

+ +
var myRedirect = request.redirect;
+ +

値

+ +

RequestRedirect 列挙値、次の文字列のいずれかになります:

+ + + +

request の作成時に指定されない場合、デフォルト値の follow になります。

+ +

例

+ +

次のスニペットでは、 {{domxref("Request.Request()")}} コンストラクタを使用して新しい request を作成し ( script と同じディレクトリにある画像ファイルの場合)、 request の redirect 値を変数に保存します:

+ +
var myRequest = new Request('flowers.jpg');
+var myCred = myRequest.redirect;
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-redirect','redirect')}}{{Spec2('Fetch')}}初回定義。
+ +

ブラウザーの実装状況

+ + + +

{{Compat("api.Request.redirect")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/referrer/index.html b/files/ja/web/api/request/referrer/index.html new file mode 100644 index 0000000000..c93461339c --- /dev/null +++ b/files/ja/web/api/request/referrer/index.html @@ -0,0 +1,121 @@ +--- +title: Request.referrer +slug: Web/API/Request/referrer +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - referrer + - request +translation_of: Web/API/Request/referrer +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの referrer 読み取り専用プロパティには、ユーザーエージェントによってリクエストのリファラが設定されます（たとえば、about:client や no-referrer、URL）。

+ +
+

ノート： リファラの値が no-referrer だった場合、空文字が返されます。

+
+ +

構文

+ +
var myReferrer = request.referrer;
+ +

値

+ +

リクエストのリファラを表す {{domxref("DOMString")}}。

+ +

例

+ +

次のスニペットでは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、変数にリクエストのリファラを変数に保存しています。

+ +
var myRequest = new Request('flowers.jpg');
+var myReferrer = myRequest.referrer; // 既定で "about:client" を返す。
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-referrer','referrer')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は選択によって使えるようになります。

+ +

関連項目

+ + diff --git a/files/ja/web/api/request/request/index.html b/files/ja/web/api/request/request/index.html new file mode 100644 index 0000000000..93de6b7366 --- /dev/null +++ b/files/ja/web/api/request/request/index.html @@ -0,0 +1,162 @@ +--- +title: Request() +slug: Web/API/Request/Request +tags: + - API + - Experimental + - Fetch + - request + - コンストラクター + - リファレンス +translation_of: Web/API/Request/Request +--- +
{{APIRef("Fetch")}}
+ +

Request() コンストラクターは、新しい {{domxref("Request")}} オブジェクトを生成します。

+ +

構文

+ +
var myRequest = new Request(input[, init]);
+ +

引数

+ +
+
input
+
取得したいリソースを定義します。次のいずれかの値を取ります。 +
    +
  • 取得したいリソースの直接の URL を含む {{domxref("USVString")}}。
    • +
  • 効率的にコピーを作成するための {{domxref("Request")}} オブジェクト。なお、コンストラクターが例外をスローする可能性を下げるため、セキュリティーを保持するための以下の動作上の更新に注意してください。 +
      +
    • このオブジェクトがコンストラクターの呼び出しとは別のオリジンに存在する場合、 {{domxref("Request.referrer")}} が削除されます。
      • +
    • このオブジェクトの {{domxref("Request.mode")}} が navigate である場合、 mode の値が same-origin に変換されます。
      • +
    +
    • +
+
+
init {{optional_inline}}
+
リクエストに適用するカスタム設定を含むオプションオブジェクトです。設定可能なオプションは次の通りです。 +
    +
  • method: リクエストメソッド、 GET, POST など。
    • +
  • headers: {{domxref("Headers")}} オブジェクトか {{domxref("ByteString")}} を含む、リクエストに追加するヘッダー。
    • +
  • body: リクエストに追加する本文で、 {{domxref("Blob")}}, {{domxref("BufferSource")}}, {{domxref("FormData")}}, {{domxref("URLSearchParams")}}, {{domxref("USVString")}}, {{domxref("ReadableStream")}} オブジェクトが使用できます。なお、リクエストが GET 又は HEAD メソッドを使用している場合、本文を持てません。
    • +
  • mode: リクエストで使用するモード。例えば、 cors, no-cors, same-origin, navigate です。既定値は cors です。 Chrome では、既定値は 47 以前は no-cors でしたが、 47 から same-origin になりました。
    • +
  • credentials: リクエストで使用するリクエストの資格情報です。 omit, same-origin, include の何れかです。既定値は omit です。 Chrome では、既定値は 47 以前は same-origin でしたが、 47 から include になりました。
    • +
  • cache: リクエストで使用する cache モードです。
    • +
  • redirect: 使用するリダイレクトモードです。 follow, error, manual の何れかです。 Chrome では、既定値は 47 以前は follow でしたが、 47 から manual になりました。
    • +
  • referrer: no-referrer, client 又は URL を示す {{domxref("USVString")}} です。既定値は client です。
    • +
  • integrity: リクエストの subresource integrity の値です (例えば、 sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。
    • +
+
+
+ +

エラー

+ + + + + + + + + + + + + + +
型説明
TypeErrorFirefox 43 以降、http://user:password@example.com のような認証情報を含む URL だった場合、Request() は TypeError をスローします。
+ +

例

+ +

Fetch Request example (Fetch Request live を参照) では、コンストラクターを使用して新しいリクエストオブジェクトを生成してから、 {{domxref("GlobalFetch.fetch")}} 呼び出しを使用して取得しています。画像を取得してから、それを適切に処理できるように MIME タイプを設定するため、レスポンスの {{domxref("Body.blob")}} を実行しています。それから、オブジェクト URL を生成して、 {{htmlelement("img")}} 要素に表示しています。

+ +
var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(response) {
+  var objectURL = URL.createObjectURL(response);
+  myImage.src = objectURL;
+});
+ +

Fetch Request with init example (Fetch Request init live を参照) では、 fetch() を呼び出すときに init オブジェクトを渡している以外は同じです。

+ +
var myImage = document.querySelector('img');
+
+var myHeaders = new Headers();
+myHeaders.append('Content-Type', 'image/jpeg');
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg',myInit);
+
+fetch(myRequest).then(function(response) {
+  ...
+});
+ +

同様の効果を得るために、 fetch 呼び出しに init オブジェクトを渡せることにも注目してください。例えば次の通りです。

+ +
fetch(myRequest,myInit).then(function(response) {
+  ...
+});
+ +

init の中の headers としてオブジェクトリテラルを使用することもできます。

+ +
var myInit = { method: 'GET',
+               headers: {
+                   'Content-Type': 'image/jpeg'
+               },
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+ +

リクエストのコピーを作成するために、 Request() コンストラクターに {{domxref("Request")}} オブジェクトを渡すこともできます (これは {{domxref("Request.clone","clone()")}} メソッドを呼び出すのと似ています)。

+ +
+
var copy = new Request(myRequest);
+
+
+ +
+

メモ: 最後の使い方はサービスワーカー内でのみ使用できます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Fetch','#dom-request','Request()')}}{{Spec2('Fetch')}} 
+ +

ブラウザーの対応

+ + + +

{{Compat("api.Request.Request")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/request/url/index.html b/files/ja/web/api/request/url/index.html new file mode 100644 index 0000000000..fda3789b82 --- /dev/null +++ b/files/ja/web/api/request/url/index.html @@ -0,0 +1,117 @@ +--- +title: Request.url +slug: Web/API/Request/url +tags: + - API + - Experimental + - Fetch + - Property + - Reference + - URL + - request +translation_of: Web/API/Request/url +--- +
{{APIRef("Fetch")}}{{SeeCompatTable}}
+ +

{{domxref("Request")}} インターフェースの url 読み取り専用プロパティは、 リクエストの URL を含みます。

+ +

構文

+ +
var myURL = request.url;
+ +

値

+ +

リクエストの url を示す {{domxref("USVString")}}。

+ +

例

+ +

次のスニペットでは、{{domxref("Request.Request()")}} コンストラクタを使って（スクリプトと同じディレクトリにある画像ファイルのために）新しいリクエストを生成してから、変数にリクエストの url を保存しています：

+ +
var myRequest = new Request('flowers.jpg');
+var myURL = myRequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg"
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Fetch','#dom-request-url','url')}}{{Spec2('Fetch')}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(42)}}
+ {{CompatChrome(41)}}[1]		{{CompatGeckoDesktop(39)}}
+ 34[1]		{{CompatNo}} +

29
+ 28[1]

+ 		{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
基本サポート{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] この機能は選択によって使えるようになります。

+ +

関連項目

+ + -- cgit v1.2.3-54-g00ecf