aboutsummaryrefslogtreecommitdiff
path: root/files/de/web/api/body
diff options
context:
space:
mode:
Diffstat (limited to 'files/de/web/api/body')
-rw-r--r--files/de/web/api/body/arraybuffer/index.html87
-rw-r--r--files/de/web/api/body/blob/index.html73
-rw-r--r--files/de/web/api/body/body/index.html86
-rw-r--r--files/de/web/api/body/bodyused/index.html73
-rw-r--r--files/de/web/api/body/formdata/index.html62
-rw-r--r--files/de/web/api/body/index.html99
-rw-r--r--files/de/web/api/body/json/index.html73
-rw-r--r--files/de/web/api/body/text/index.html80
8 files changed, 633 insertions, 0 deletions
diff --git a/files/de/web/api/body/arraybuffer/index.html b/files/de/web/api/body/arraybuffer/index.html
new file mode 100644
index 0000000000..7550dfadc8
--- /dev/null
+++ b/files/de/web/api/body/arraybuffer/index.html
@@ -0,0 +1,87 @@
+---
+title: Body.arrayBuffer()
+slug: Web/API/Body/arrayBuffer
+translation_of: Web/API/Body/arrayBuffer
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>arrayBuffer()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.arrayBuffer().then(function(buffer) {
+ // mach etwas mit dem Buffer
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://mdn.github.io/fetch-examples/fetch-array-buffer/">Live-Beispiel zum Abruf eines Array Buffers</a> haben wir einen Wiedergabe-Knopf. Bei einem Klick darauf wird die Funktion <code>getData()</code> ausgeführt. Beachten Sie, dass vor der Wiedergabe die ganze Audio-Datei heruntergeladen wird. Benötigen Sie eine Wiedergabe noch während des Downloads (Streaming) ziehen Sie {{domxref("HTMLAudioElement")}} in Betracht:</p>
+
+<pre class="brush: js">new Audio(music.ogg).play()
+</pre>
+
+<p>In <code>getData()</code> erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor, um dann einen OGG Musik-Track abzurufen. Wir benutzen ebenfalls {{domxref("AudioContext.createBufferSource")}} um eine Audio-Puffer-Quelle zu erstellen. Ist der Abruf erfolgreich, lesen wir mit <code>arrayBuffer()</code> einen {{domxref("ArrayBuffer")}} aus der Antwort, dekodieren die Audiodaten mit {{domxref("AudioContext.decodeAudioData")}}, setzen die dekodierten Daten als Quelle für den Audio-Puffer fest und verbinden die Quelle mit {{domxref("AudioContext.destination")}}.</p>
+
+<p>Wenn <code>getData()</code> durchgelaufen ist, starten wir die Wiedergabe mit <code>start(0)</code> und deaktivieren den Wiedergabe-Knopf, damit er nicht erneut geklickt werden kann, während die Wiedergabe läuft (was zu einem Fehler führen würde).</p>
+
+<pre class="brush: js">function getData() {
+ source = audioCtx.createBufferSource();
+
+ var myRequest = new Request('viper.ogg');
+
+ fetch(myRequest).then(function(response) {
+ return response.arrayBuffer();
+ }).then(function(buffer) {
+ audioCtx.decodeAudioData(buffer, function(decodedData) {
+ source.buffer = decodedData;
+ source.connect(audioCtx.destination);
+ });
+ });
+};
+
+// Knöpfe zum Abspielen und Anhalten verknüpfen
+
+play.onclick = function() {
+ getData();
+ source.start(0);
+ play.setAttribute('disabled', 'disabled');
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.arrayBuffer")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/blob/index.html b/files/de/web/api/body/blob/index.html
new file mode 100644
index 0000000000..53595fdbda
--- /dev/null
+++ b/files/de/web/api/body/blob/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.blob()
+slug: Web/API/Body/blob
+translation_of: Web/API/Body/blob
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>blob()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.blob().then(function(myBlob) {
+ // mach etwas mit myBlob
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<div class="note"><strong>Hinweis:</strong> Wenn die {{domxref("Response")}} vom {{domxref("Response.type")}} her <code>"opaque"</code> ist, hat der resultierende {{domxref("Blob")}} eine {{domxref("Blob.size")}} von <code>0</code> und einen {{domxref("Blob.type")}} eines leeren Strings <code>""</code>, wodurch er für Methoden wie {{domxref("URL.createObjectURL")}} <em>unbrauchbar</em> wird.</div>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("Blob")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<pre class="brush: js">var myImage = document.querySelector('img');
+
+var myRequest = new Request('flowers.jpg');
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-blob','blob()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.blob")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/body/index.html b/files/de/web/api/body/body/index.html
new file mode 100644
index 0000000000..cbe7484d91
--- /dev/null
+++ b/files/de/web/api/body/body/index.html
@@ -0,0 +1,86 @@
+---
+title: Body.body
+slug: Web/API/Body/body
+translation_of: Web/API/Body/body
+---
+<div>{{APIRef("Fetch")}}{{seecompattable}}</div>
+
+<p>Die schreibgeschützte <strong><code>body</code></strong> Eigenschaft des {{domxref("Body")}} Mixin ist ein einfacher Getter, der dazu benutzt wird den Inhalt des Body als {{domxref("ReadableStream")}} bereitzustellen.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var stream = responseInstance.body;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("ReadableStream")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem einfachen <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">Stream-Pump-Beispiel</a> rufen wir ein Bild ab, machen den Antwort-Stream mit <code>response.body</code> sichtbar, erstellen einen Reader mit {{domxref("ReadableStream.getReader()")}} und reihen die Teile des Streams in einen zweiten, benutzerdefinierten, lesbaren Stream — wodurch wie eine exakte Kopie des Bilds erhalten.</p>
+
+<pre class="brush: js">const image = document.getElementById('target');
+
+// Bild holen
+fetch('./tortoise.png')
+// Body als ReadableStream abrufen
+.then(response =&gt; response.body)
+.then(body =&gt; {
+ const reader = body.getReader();
+
+ return new ReadableStream({
+ start(controller) {
+ return pump();
+
+ function pump() {
+ return reader.read().then(({ done, value }) =&gt; {
+ // Stream schließen, wenn keine weiteren Daten verarbeitet werden müssen
+ if (done) {
+ controller.close();
+ return;
+ }
+
+ // Das nächste Datenstück in unseren Ziel-Stream einreihen
+ controller.enqueue(value);
+ return pump();
+ });
+ }
+ }
+ })
+})
+.then(stream =&gt; new Response(stream))
+.then(response =&gt; response.blob())
+.then(blob =&gt; URL.createObjectURL(blob))
+.then(url =&gt; console.log(image.src = url))
+.catch(err =&gt; console.error(err));</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-body','body')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.body")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/Fetch_API">Fetch API</a></li>
+ <li><a href="/de/docs/Web/API/Streams_API">Streams API</a></li>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+</ul>
diff --git a/files/de/web/api/body/bodyused/index.html b/files/de/web/api/body/bodyused/index.html
new file mode 100644
index 0000000000..052e8fcc7c
--- /dev/null
+++ b/files/de/web/api/body/bodyused/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.bodyUsed
+slug: Web/API/Body/bodyUsed
+translation_of: Web/API/Body/bodyUsed
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die schreibgeschützte <strong><code>bodyUsed</code></strong> Eigenschaft des {{domxref("Body")}} Mixin enthält einen {{domxref("Boolean")}} der angibt, ob der Body schon eingelesen wurde.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre>
+
+<h3 id="Wert">Wert</h3>
+
+<p>Ein {{domxref("Boolean")}}.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-request">Beispiel für eine Fetch Anfrage</a> (<a href="http://mdn.github.io/fetch-examples/fetch-request/">live ausführen</a>) erstellen wir eine neue Anforderung mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann ein JPG ab. Wenn der Abruf erfolgreich ist, lesen wir mit <code>blob()</code> einen {{domxref("Blob")}} aus der Antwort, fügen ihn mit {{domxref("URL.createObjectURL")}} in eine Objekt-URL ein und legen diese URL als Quelle für das {{htmlelement("img")}} Element zum Anzeigen des Bildes fest.</p>
+
+<p>Beachten Sie, dass wir <code>response.bodyUsed</code> vor dem Aufruf von <code>response.blob ()</code> und einmal danach in der Konsole protokollieren. Dies gibt vorher <code>false</code> zurück und anschließend <code>true</code>, da der Body ab diesem Punkt gelesen wurde.</p>
+
+<h3 id="HTML_Inhalt">HTML Inhalt</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JavaScript_Inhalt">JavaScript Inhalt</h3>
+
+<pre class="brush: js">var myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) {
+ console.log(response.bodyUsed);
+ var res = response.blob();
+ console.log(response.bodyUsed);
+    return res;
+}).then(function(response) {
+    var objectURL = URL.createObjectURL(response);
+    myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-bodyused','bodyUsed')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.bodyUsed")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/formdata/index.html b/files/de/web/api/body/formdata/index.html
new file mode 100644
index 0000000000..4ceb02aeb4
--- /dev/null
+++ b/files/de/web/api/body/formdata/index.html
@@ -0,0 +1,62 @@
+---
+title: Body.formData()
+slug: Web/API/Body/formData
+translation_of: Web/API/Body/formData
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>formData()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<div class="note">
+<p><strong>Hinweis:</strong> Dies ist hauptsächlich für <a href="/de/docs/Web/API/ServiceWorker_API">Service Worker</a> relevant. Wenn ein Benutzer ein Formular absendet und ein Service Worker die Anfrage abfängt, könnten Sie bspw. <code>formData()</code> aufrufen, um eine Key-Value-Abbildung zu erhalten, einige Felder zu modifizieren und das Formular dann an den Server weiterzuschicken (oder lokal zu benutzen).</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">response.formData()
+.then(function(formdata) {
+ // machen Sie etwas mit Ihren Formulardaten
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in ein {{domxref("FormData")}} Objekt aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>Wird nachgereicht.</p>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-formdata','formData()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.formData")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/index.html b/files/de/web/api/body/index.html
new file mode 100644
index 0000000000..3693a73653
--- /dev/null
+++ b/files/de/web/api/body/index.html
@@ -0,0 +1,99 @@
+---
+title: Body
+slug: Web/API/Body
+tags:
+ - API
+ - BODY
+ - Experimental
+ - Fetch
+ - Fetch API
+ - Interface
+ - NeedsTranslation
+ - Reference
+ - TopicStub
+ - request
+translation_of: Web/API/Body
+---
+<div>{{ APIRef("Fetch") }}</div>
+
+<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p>
+
+<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p>
+
+<h2 id="Properties">Properties</h2>
+
+<dl>
+ <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt>
+ <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd>
+ <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt>
+ <dd>A {{domxref("Boolean")}} that indicates whether the body has been read.</dd>
+</dl>
+
+<h2 id="Methods">Methods</h2>
+
+<dl>
+ <dt>{{domxref("Body.arrayBuffer()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{domxref("ArrayBuffer")}}.</dd>
+ <dt>{{domxref("Body.blob()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd>
+ <dt>{{domxref("Body.formData()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd>
+ <dt>{{domxref("Body.json()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd>
+ <dt>{{domxref("Body.text()")}}</dt>
+ <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd>
+</dl>
+
+<h2 id="Examples">Examples</h2>
+
+<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p>
+
+<h3 id="HTML_Content">HTML Content</h3>
+
+<pre class="brush: html">&lt;img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"&gt;
+</pre>
+
+<h3 id="JS_Content">JS Content</h3>
+
+<pre class="brush: js">const myImage = document.querySelector('.my-image');
+fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
+ .then(res =&gt; res.blob())
+ .then(res =&gt; {
+ const objectURL = URL.createObjectURL(res);
+ myImage.src = objectURL;
+});</pre>
+
+<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p>
+
+<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('Fetch','#body-mixin','Body')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.Body")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
+</ul>
+
+<p> </p>
diff --git a/files/de/web/api/body/json/index.html b/files/de/web/api/body/json/index.html
new file mode 100644
index 0000000000..76271e680d
--- /dev/null
+++ b/files/de/web/api/body/json/index.html
@@ -0,0 +1,73 @@
+---
+title: Body.json()
+slug: Web/API/Body/json
+translation_of: Web/API/Body/json
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>json()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.json().then(function(data) {
+ // mach etwas mit data
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches den Inhalt des Body als {{jsxref("JSON")}} einliest. Dies kann alles sein, was als JSON abgebildet werden kann — ein Objekt, ein Array, ein String, eine Zahl...</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">Beispiel für den Abruf eines json</a> (<a href="https://mdn.github.io/fetch-examples/fetch-json/">live ausführen</a>) erstellen wir eine neue Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.json</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir die Daten ein und parsen sie mit <code>json()</code>, lesen die Werte erwartungsgemäß aus und fügen sie in eine Liste ein um unsere Produktdaten anzuzeigen.</p>
+
+<pre class="brush: js">var myList = document.querySelector('ul');
+
+var myRequest = new Request('products.json');
+
+fetch(myRequest)
+ .then(function(response) { return response.json(); })
+ .then(function(data) {
+ for (var i = 0; i &lt; data.products.length; i++) {
+ var listItem = document.createElement('li');
+ listItem.innerHTML = '&lt;strong&gt;' + data.products[i].Name + '&lt;/strong&gt; befindet sich in ' +
+ data.products[i].Location +
+ '. Preis: &lt;strong&gt;' + data.products[i].Price + '€&lt;/strong&gt;';
+ myList.appendChild(listItem);
+ }
+ });</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-json','json()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.json")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
diff --git a/files/de/web/api/body/text/index.html b/files/de/web/api/body/text/index.html
new file mode 100644
index 0000000000..8ccc5fb358
--- /dev/null
+++ b/files/de/web/api/body/text/index.html
@@ -0,0 +1,80 @@
+---
+title: Body.text()
+slug: Web/API/Body/text
+translation_of: Web/API/Body/text
+---
+<div>{{APIRef("Fetch")}}</div>
+
+<p>Die Methode <strong><code>text()</code></strong> des {{domxref("Body")}} Mixin nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Sie gibt ein Promise zurück, welches in ein {{domxref("USVString")}} Objekt (Text) aufgelöst wird. Die Antwort wird <em>immer</em> mit UTF-8 dekodiert.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: js">response.text().then(function (text) {
+ // do something with the text response
+});</pre>
+
+<h3 id="Parameter">Parameter</h3>
+
+<p>Keine.</p>
+
+<h3 id="Rückgabewert">Rückgabewert</h3>
+
+<p>Ein Promise, welches in einen {{domxref("USVString")}} aufgelöst wird.</p>
+
+<h2 id="Beispiel">Beispiel</h2>
+
+<p>In unserem <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-text">Beispiel für den Abruf von Text</a> (<a href="https://mdn.github.io/fetch-examples/fetch-text/">live ausführen</a>) haben wir ein {{htmlelement("article")}} Element und drei Links (im Array <code>myLinks</code> gespeichert). Zuerst durchlaufen wir all diese, damit alle einen <code>onclick</code> Event Handler bekommen, der die Funktion <code>getData()</code> ausführt — der Bezeichner <code>data-page</code> des Links wird dabei als Argument übergeben — wenn einer der Links geklickt wird.</p>
+
+<p>Wenn <code>getData()</code> ausgeführt wird erstellen wie eine Anfrage mit dem {{domxref("Request.Request")}} Konstruktor und rufen dann eine <code>.txt</code> Datei ab. Wenn der Abruf erfolgreich ist lesen wir das {{jsxref("USVString")}} (Text) Objekt aus der Antwort mit <code>text()</code> und setzen dann {{domxref("Element.innerHTML","innerHTML")}} des {{htmlelement("article")}} Elements auf den Wert des Text-Objekts.</p>
+
+<pre class="brush: js">var myArticle = document.querySelector('article');
+var myLinks = document.querySelectorAll('ul a');
+
+for(i = 0; i &lt;= myLinks.length-1; i++) {
+  myLinks[i].onclick = function(e) {
+    e.preventDefault();
+    var linkData = e.target.getAttribute('data-page');
+    getData(linkData);
+  }
+};
+
+function getData(pageId) {
+  console.log(pageId);
+  var myRequest = new Request(pageId + '.txt');
+  fetch(myRequest).then(function(response) {
+    return response.text().then(function(text) {
+      myArticle.innerHTML = text;
+    });
+  });
+}</pre>
+
+<h2 id="Spezifikationen">Spezifikationen</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('Fetch','#dom-body-text','text()')}}</td>
+ <td>{{Spec2('Fetch')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Browserkompatibilität">Browserkompatibilität</h2>
+
+
+
+<p>{{Compat("api.Body.text")}}</p>
+
+<h2 id="Siehe_auch">Siehe auch</h2>
+
+<ul>
+ <li><a href="/de/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
+ <li><a href="/de/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
+ <li><a href="/de/docs/Web/HTTP">HTTP</a></li>
+</ul>
generated by cgit v1.2.3-54-g00ecf (git 2.39.0) at 2025-01-22 08:35:23 +0000