Meta tags:
description=XMLHttpRequest (XHR) in JavaScript: open und send, readyState, load/error/timeout-Events, JSON parsen, POST-Daten, Anfragen abbrechen und Vergleich mit der…;

Headings (most frequently used words):

xmlhttprequest, das, event, eine, anfrage, antworten, die, methode, verstehen, http, stellen, server, verarbeiten, fehlerbehandlung, json, parsen, daten, mit, post, senden, abbrechen, vs, fetch, fazit, übungen, ein, objekt, erstellen, open, send, onreadystatechange, load, progress,

Text of the page (most frequently used words):
xhr (75), und (73), die (46), xmlhttprequest (30), #anfrage (26), ist (24), javascript (23), api (23), json (21), das (21), mit (21), der (21), eine (20), event (20), wird (20), dom (19), open (18), send (17), lernen (16), #server (15), fetch (14), werden (13), http (12), man (12), objekt (12), status (12), function (12), für (11), den (11), console (11), true (11), ein (11), events (10), readystate (10), von (10), oder (10), https (10), einen (10), kopieren (10), log (10), get (10), new (10), const (10), post (9), url (9), upload (9), methoden (9), html (8), web (8), daten (8), senden (8), methode (8), wenn (8), wie (8), load (8), com (8), async (8), über (7), code (7), antworten (7), kann (7), bei (7), onreadystatechange (7), ausgelöst (7), fehler (7), jsonplaceholder (7), typicode (7), posts (7), beispiel (7), nicht (7), responsetext (7), onload (7), tools (6), sendet (6), immer (6), fortschritt (6), timeout (6), error (6), auf (6), muss (6), browser (6), 200 (6), w3docs (5), alle (5), übungen (5), parsen (5), einer (5), dann (5), verwendet (5), anfragen (5), einem (5), als (5), dem (5), abort (5), content (5), title (5), data (5), funktionen (5), string (5), formatter (5), color (5), password (4), generator (4), css (4), abbrechen (4), fehlerbehandlung (4), objekte (4), was (4), prüfen (4), nur (4), sind (4), handler (4), promise (4), responsetype (4), sollte (4), promises (4), await (4), seite (4), setrequestheader (4), type (4), body (4), header (4), document (4), run (4), editable (4), onerror (4), sie (4), antwort (4), and (4), eigenschaften (4), shadow (4), einführung (4), encoder (3), editor (3), quizze (3), php (3), verarbeiten (3), stellen (3), verstehen (3), this (3), page (3), sich (3), eigenschaft (3), ermöglicht (3), erstellt (3), selbst (3), verwenden (3), neuen (3), aber (3), noch (3), nein (3), geprüft (3), response (3), progress (3), request (3), aufgerufen (3), gesetzt (3), object (3), vor (3), hat (3), done (3), zur (3), ohne (3), method (3), interaktive (3), flag (3), operatoren (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), python (2), java (2), git (2), bücher (2), snippets (2), fazit (2), sent (2), ändert (2), welche (2), folgenden (2), aussagen (2), korrekt (2), hintergrund (2), auch (2), meisten (2), projekte (2), bessere (2), wahl (2), älteren (2), codebasen (2), detaillierte (2), fortschrittsberichte (2), alte (2), abortcontroller (2), streams (2), download (2), funktioniert (2), callbacks (2), abbricht (2), nach (2), abbruch (2), stattdessen (2), gesendet (2), automatisch (2), daher (2), formdata (2), stringify (2), created (2), 201 (2), application (2), arraybuffer (2), blob (2), text (2), parst (2), wert (2), parse (2), aus (2), ontimeout (2), standard (2), kein (2), erreicht (2), weiterhin (2), 500 (2), 404 (2), angehängt (2), vollständig (2), onprogress (2), percent (2), math (2), lengthcomputable (2), length (2), sobald (2), hauptsächlich (2), müssen (2), loading (2), des (2), form (2), warnung (2), authentifizierung (2), user (2), asynchron (2), parameter (2), konfiguriert (2), instanz (2), erstellen (2), laden (2), xml (2), diese (2), fähigkeit (2), kommunizieren (2), vergleich (2), eingebaute (2), dynamische (2), workers (2), file (2), suche (2), muster (2), quantoren (2), anker (2), flags (2), components (2), animationen (2), the (2), microtasks (2), formulare (2), benutzerdefinierte (2), ereignisse (2), styles (2), klassen (2), arrays (2), generatoren (2), advanced (2), chaining (2), erweitern (2), handling (2), class (2), prototypes (2), elemente (2), property (2), arrow (2), syntax (2), variablen (2), functions (2), objects (2), hash (2), 2026, rechte, vorbehalten, entwickler, gemacht, sprache, datenschutzrichtlinie, kontakt, uns, unternehmen, probier, üben, kostenlose, tutorials, beispiele, seit, 2014, next, previous, yes, helpful, enthalten, format, webserver, übung, auszutauschen, hängt, wichtig, sowohl, veraltete, abzubrechen, basierte, verständnis, hält, szenarien, überlegen, handlungsfähig, zurückgreifen, benötigt, sehr, umgebung, unterstützt, mehr, programmiermodell, äquivalent, later, cancel, cancelled, onabort, laufende, zum, benutzer, verlässt, neue, suchanfrage, eingibt, anstelle, herkömmliche, formularübermittlungen, setzt, korrekten, multipart, dafür, userid, bar, foo, serialisiert, akzeptiert, nutzdaten, already, alternativ, geparste, verfügbar, meistens, einfachste, ansatz, rohtext, lesen, ihn, invalid, 5000, seconds, timed, out, failed, länger, millisekunden, dauert, bedeutet, limit, netzwerkebene, nie, dns, fehlgeschlagen, cors, blockiert, usw, beachte, dass, netzwerkfehler, löst, robuster, behandeln, zwei, decken, fehlerfälle, verfolgen, fortschrittsobjekt, funktion, replizieren, downloaded, 100, total, loaded, round, großen, downloads, gemeldet, prozentsatz, berechnet, determiniert, eingegangen, einfacher, phase, prüft, echten, erfolg, unterscheiden, obwohl, bevorzugt, moderner, allgemeinen, einfachere, besser, lesbare, anfragenverarbeitung, zwischenzustände, verfolgt, empfangene, hinweis, abgeschlossen, erfolgreich, erfolgsbereich, liegt, typischerweise, häufiger, geantwortet, haben, könnte, headers_received, opened, unsent, enthält, verarbeitung, können, verschiedene, listener, fügt, ausgehenden, hinzu, param1, value1, param2, value2, www, urlencoded, kodierten, aufruf, argumente, argument, übergeben, synchrone, frieren, bis, eintrifft, haupt, thread, veraltet, bleiben, false, optionales, passwort, optionaler, benutzername, boolean, angibt, standardmäßig, fast, belassen, siehe, unten, verwendende, initialisiert, nimmt, mehrere, entgegen, existiert, anschließend, abgeschickt, einzelne, verwaltet, zweite, neues, zunächst, lebenszyklus, gleich, konfigurieren, anhängen, ergebnis, reagieren, öffnen, eingebautes, empfangen, neu, namen, historisch, bedingt, jedes, binärformat, übertragen, heute, weitem, gebräuchlichste, bildet, grundlage, dessen, früher, asynchronous, bezeichnet, wurde, ajax, behandelt, liest, per, abschneidet, arbeitet, callback, greift, üblicherweise, basiert, sauber, zusammenarbeitet, lohnt, dennoch, begegnet, ihm, einzige, liefert, info, unverzichtbare, programmiersprache, webentwicklung, benutzererlebnisse, wichtigsten, servern, abzurufen, webseiten, aktualisieren, dies, durch, einsatz, dieser, artikel, bietet, tiefen, einblick, einschließlich, seiner, praktischen, anwendungen, mehreren, codebeispielen, unterstützung, lernens, intl, vibration, notifications, audio, webrtc, geolocation, websockets, service, midi, storage, validation, fullscreen, history, screen, orientation, push, webgl, battery, animations, apis, regexp, sticky, position, katastrophales, backtracking, lookahead, lookbehind, alternation, rückwärtsreferenzen, name, erfassungsgruppen, gierige, faule, sets, ranges, escaping, sonderzeichen, wortgrenze, mehrzeiliger, modus, anfang, ende, unicode, klasse, zeichenklassen, regex, regular, expressions, styling, slots, komposition, template, element, custom, elements, animation, indexeddb, localstorage, sessionstorage, cookies, cookie, storing, wiederaufnehmbarer, dateiupload, ursprungsübergreifende, network, requests, canvas, references, loop, macrotasks, selection, range, resizeobserver, intersectionobserver, mutation, observer, various, ressourcen, scripts, defer, domcontentloaded, beforeunload, unload, resource, ereignis, submit, clipboard, change, input, cut, copy, paste, fokussierung, focus, blur, formulareigenschaften, forms, controls, scrolling, tastatur, keydown, keyup, drag, drop, mausbewegungen, mausereignisse, grundlagen, auslösen, browseraktionen, delegation, bubbling, capturing, introduction, koordinaten, fenstergrößen, scrollen, dokument, verändern, attribute, knoteneigenschaften, typ, tag, inhalt, getelement, queryselector, browserumgebung, spezifikationen, filereader, textdecoder, textencoder, binäre, binary, files, fensterübergreifende, kommunikation, popups, window, frames, windows, polyfills, transpiler, bigint, currying, eval, proxy, reflect, miscellaneous, imports, export, import, module, modules, iteratoren, generators, iteration, promisification, try, catch, mixins, checking, instanceof, private, geschützte, statische, klassenvererbung, grundsyntax, classes, prototyp, __proto__, native, prototypale, vererbung, inheritance, widgets, performance, optimierung, debugging, barrierefreiheit, kompatibilität, manipulationsbibliotheken, fortgeschrittene, techniken, manipulationstechniken, traversieren, arbeiten, manipulieren, auswählen, knoten, getter, setter, deskriptoren, properties, configuration, closures, vertieft, binding, debounce, throttle, dekoratoren, weiterleitung, call, apply, settimeout, setinterval, nfe, globales, var, scope, rest, spread, rekursion, stack, tojson, datum, uhrzeit, destructuring, assignment, keys, values, entries, weakmap, weakset, map, set, iterables, array, strings, zahlen, primitiven, types, optional, konstruktor, operator, primitiv, konvertierung, symbol, typen, garbage, collection, objektmethoden, basics, es6, funktionsausdrücke, schleifen, switch, bedingte, nullish, coalescing, logische, vergleichsoperatoren, typkonvertierungen, datentypen, use, strict, kommentare, basic, anmelden, durchsuchen, formatters, reverse, sha256, md5, calculator, colors, hsl, hex, mixer, converter, picker, general, kurse,

Text of the page (random words):
javascript lernen javascript basic einführung javascript verwenden js kommentare js mit dom js use strict js variablen js datentypen js typkonvertierungen js interaktive funktionen js operatoren js vergleichsoperatoren js logische operatoren js nullish coalescing js bedingte operatoren js switch js schleifen js funktionen js funktionsausdrücke js arrow functions js es6 objects the basics js objects js objekte kopieren js objektmethoden this js garbage collection js symbol typen js objekt zu primitiv konvertierung js konstruktor operator new js optional chaining data types js methoden von primitiven js zahlen js math js strings js arrays js array methoden js iterables js map und set js weakmap und weakset js object keys values entries js destructuring assignment js datum und uhrzeit js json methoden tojson advanced functions js rekursion und stack js rest parameter und spread syntax js variablen scope js das alte var js globales objekt js function objekt nfe js die new function syntax js settimeout und setinterval js dekoratoren und weiterleitung call apply js debounce throttle js function binding js arrow funktionen vertieft js closures object properties configuration js property flags und deskriptoren js property getter und setter javascript html dom dom einführung die dom knoten dom elemente auswählen den dom manipulieren arbeiten mit styles im dom event handling im dom dom traversieren dom manipulationstechniken formulare im dom verwenden fortgeschrittene dom techniken dom manipulationsbibliotheken dom browser kompatibilität dom barrierefreiheit debugging und tools performance optimierung interaktive elemente und widgets prototypes inheritance js prototypale vererbung js native prototypes js prototyp methoden objekte ohne __proto__ classes js class grundsyntax js klassenvererbung statische eigenschaften und methoden private und geschützte eigenschaften in js js eingebaute klassen erweitern js class checking instanceof js mixins error handling js fehlerbehandlung try catch js benutzerdefinierte fehler error erweitern promises async await js einführung callbacks js promise js promise chaining js fehlerbehandlung mit promises promise api promisification microtasks async await generators advanced iteration generatoren async iteratoren und generatoren modules module export und import dynamische imports miscellaneous proxy und reflect eval currying bigint js polyfills transpiler frames and windows popups und window methoden fensterübergreifende kommunikation binary data files arraybuffer binäre arrays textdecoder und textencoder blob file und filereader js streams api document browserumgebung spezifikationen suche getelement queryselector knoteneigenschaften typ tag und inhalt attribute und eigenschaften das dokument verändern styles und klassen fenstergrößen und scrollen koordinaten introduction to events javascript einführung in browser ereignisse bubbling und capturing event delegation standard browseraktionen benutzerdefinierte ereignisse auslösen ui events mausereignisse grundlagen mausbewegungen drag and drop tastatur keydown und keyup scrolling forms controls formulareigenschaften und methoden fokussierung focus blur events change input cut copy paste js clipboard api formulare ereignis und methode submit document and resource loading page domcontentloaded load beforeunload unload scripts async defer ressourcen laden onload und onerror various mutation observer js intersectionobserver js resizeobserver selection und range event loop microtasks und macrotasks javascript references canvas network requests fetch api formdata fetch download fortschritt fetch abbruch fetch ursprungsübergreifende anfragen url objekte xmlhttprequest js server sent events wiederaufnehmbarer dateiupload storing data in the browser cookies document cookie localstorage sessionstorage indexeddb animation css animationen javascript animationen web components web components custom elements shadow dom template element shadow dom slots komposition shadow dom styling shadow dom und events regular expressions js regex muster und flags zeichenklassen unicode flag u und klasse p anker string anfang und ende mehrzeiliger modus der anker flag m wortgrenze b escaping sonderzeichen sets und ranges quantoren und n gierige und faule quantoren erfassungsgruppen rückwärtsreferenzen im muster n und k name javascript alternation or lookahead und lookbehind katastrophales backtracking sticky flag y suche an position methoden von regexp und string javascript apis web animations api file api battery api webgl push api screen orientation api history api console api fullscreen api validation api web storage api web midi api js web workers service workers websockets geolocation webrtc web audio api notifications api die vibration api js intl api xmlhttprequest xmlhttprequest xhr in javascript open und send readystate load error timeout events json parsen post daten anfragen abbrechen und vergleich mit der fetch api javascript ist eine unverzichtbare programmiersprache für die webentwicklung die dynamische und interaktive benutzererlebnisse ermöglicht eine der wichtigsten funktionen von javascript ist die fähigkeit mit servern zu kommunizieren daten abzurufen und webseiten asynchron zu aktualisieren dies wird hauptsächlich durch den einsatz von xmlhttprequest xhr erreicht dieser artikel bietet einen tiefen einblick in xmlhttprequest einschließlich seiner methoden eigenschaften und praktischen anwendungen mit mehreren codebeispielen zur unterstützung des lernens i info xmlhttprequest arbeitet mit callback funktionen für neuen code greift man üblicherweise zur fetch api die auf promises basiert und sauber mit async await zusammenarbeitet xhr lohnt sich dennoch zu verstehen man begegnet ihm in älteren codebasen und es ist die einzige eingebaute api die detaillierte upload fortschrittsberichte liefert diese seite behandelt was ein xhr objekt ist wie man eine anfrage mit open und send konfiguriert und sendet wie man die antwort über readystate und die load error timeout events liest wie man json parst wie man daten per post sendet wie man eine anfrage abbricht und wie xhr im vergleich zu fetch abschneidet xmlhttprequest verstehen xmlhttprequest xhr ist ein eingebautes browser objekt das javascript ermöglicht eine http oder https anfrage an einen server zu senden und die antwort zu empfangen ohne die seite neu zu laden das xml im namen ist historisch bedingt xhr kann jedes text oder binärformat übertragen und json ist heute bei weitem das gebräuchlichste diese fähigkeit im hintergrund mit einem server zu kommunizieren bildet die grundlage dessen was früher als ajax asynchronous javascript and xml bezeichnet wurde der lebenszyklus einer anfrage ist immer gleich objekt erstellen es öffnen methode und url konfigurieren event handler anhängen um auf das ergebnis zu reagieren und es dann senden ein xmlhttprequest objekt erstellen zunächst wird eine instanz erstellt const xhr new xmlhttprequest kopieren eine einzelne xmlhttprequest instanz verwaltet eine anfrage um eine zweite anfrage zu stellen muss ein neues objekt erstellt werden eine http anfrage stellen sobald das objekt existiert wird es mit open konfiguriert und anschließend mit send abgeschickt die open methode open initialisiert eine anfrage sendet sie aber noch nicht ab sie nimmt mehrere parameter entgegen xhr open method url async user password kopieren method die zu verwendende http methode z b get oder post url die url an die die anfrage gesendet wird async ein boolean der angibt ob die anfrage asynchron ist standardmäßig true und man sollte es fast immer so belassen siehe warnung unten user optionaler benutzername für die http authentifizierung password optionales passwort für die http authentifizierung beispiel xhr open get https jsonplaceholder typicode com posts 1 true kopieren warnung synchrone anfragen xhr open method url false frieren die seite ein bis die antwort eintrifft und sind im haupt thread veraltet async sollte immer auf true gesetzt bleiben die send methode send sendet die anfrage an den server alle event handler müssen vor dem aufruf angehängt werden bei einer get anfrage wird sie ohne argumente aufgerufen bei einem post wird der anfrage body als argument übergeben beispiel einer get anfrage xhr send kopieren beispiel einer post anfrage mit form kodierten daten xhr setrequestheader content type application x www form urlencoded xhr send param1 value1 param2 value2 kopieren die methode setrequestheader fügt der ausgehenden anfrage einen http header hinzu und muss nach open aber vor send aufgerufen werden server antworten verarbeiten zur verarbeitung von server antworten können verschiedene event listener verwendet werden das onreadystatechange event das onreadystatechange event wird immer dann ausgelöst wenn sich die readystate eigenschaft ändert die readystate eigenschaft enthält den status des xmlhttprequest 0 unsent 1 opened 2 headers_received 3 loading 4 done eine anfrage ist nur dann abgeschlossen und erfolgreich wenn readystate den wert 4 done hat und der http status im erfolgsbereich liegt typischerweise 200 nur auf readystate 4 zu prüfen ist ein häufiger fehler da der server mit 404 oder 500 geantwortet haben könnte beispiel javascript editable run const xhr new xmlhttprequest xhr open get https jsonplaceholder typicode com posts 1 true xhr onreadystatechange function if xhr readystate 4 xhr status 200 console log xhr responsetext xhr send hinweis obwohl onreadystatechange funktioniert bevorzugt moderner code im allgemeinen onload und onerror für eine einfachere und besser lesbare anfragenverarbeitung onreadystatechange wird hauptsächlich verwendet wenn zwischenzustände verfolgt werden müssen wie fortschritt oder empfangene header das load event das load event wird ausgelöst sobald die antwort vollständig eingegangen ist es ist einfacher als onreadystatechange da man readystate nicht selbst prüfen muss es wird nur in der done phase ausgelöst man prüft weiterhin status um einen echten erfolg von einem http fehler zu unterscheiden beispiel javascript editable run const xhr new xmlhttprequest xhr open get https jsonplaceholder typicode com posts 1 true xhr onload function if xhr status 200 console log xhr responsetext xhr send das progress event bei großen downloads kann der fortschritt mit dem progress event gemeldet werden wenn der server einen content length header sendet ist das event determiniert lengthcomputable ist true und ein prozentsatz kann berechnet werden xhr onprogress function event if event lengthcomputable const percent math round event loaded event total 100 console log downloaded percent kopieren um stattdessen einen upload zu verfolgen werden handler an xhr upload angehängt xhr upload onprogress das upload fortschrittsobjekt ist die eine funktion die fetch noch nicht vollständig replizieren kann fehlerbehandlung robuster code muss fehler behandeln zwei events decken die fehlerfälle ab onerror wird bei einem fehler auf netzwerkebene ausgelöst die anfrage hat den server nie erreicht dns ist fehlgeschlagen cors hat sie blockiert usw beachte dass ein http 404 oder 500 kein netzwerkfehler ist er löst load aus nicht error daher muss status weiterhin geprüft werden ontimeout wird ausgelöst wenn die anfrage länger als xhr timeout millisekunden dauert ein timeout von 0 der standard bedeutet kein limit beispiel javascript editable run const xhr new xmlhttprequest xhr open get https invalid url com true xhr timeout 5000 5 seconds xhr ontimeout function console log request timed out xhr onerror function console log request failed xhr onload function if xhr status 200 console log xhr responsetext xhr send json antworten parsen server antworten sind meistens json der einfachste ansatz ist den rohtext aus xhr responsetext zu lesen und ihn selbst mit json parse zu parsen javascript editable run const xhr new xmlhttprequest xhr open get https jsonplaceholder typicode com posts 1 true xhr onload function if xhr status 200 const data json parse xhr responsetext console log title data title xhr send alternativ kann xhr responsetype json vor dem senden gesetzt werden und der browser parst den body automatisch der geparste wert ist dann über xhr response verfügbar nicht xhr responsetext const xhr new xmlhttprequest xhr open get https jsonplaceholder typicode com posts 1 true xhr responsetype json xhr onload function if xhr status 200 console log title xhr response title already an object xhr send kopieren responsetype akzeptiert auch text blob arraybuffer und document für nicht json nutzdaten daten mit post senden um einen json body zu senden wird der content type header gesetzt und das objekt mit json stringify serialisiert const xhr new xmlhttprequest xhr open post https jsonplaceholder typicode com posts true xhr setrequestheader content type application json xhr onload function if xhr status 201 201 created console log created xhr responsetext xhr send json stringify title foo body bar userid 1 kopieren für herkömmliche formularübermittlungen wird stattdessen ein formdata objekt gesendet der browser setzt den korrekten multipart content type automatisch daher sollte setrequestheader dafür nicht aufgerufen werden eine anfrage abbrechen xhr abort abbricht eine laufende anfrage zum beispiel wenn der benutzer die seite verlässt oder eine neue suchanfrage eingibt nach dem abbruch wird das abort event anstelle von load ausgelöst const xhr new xmlhttprequest xhr open get https jsonplaceholder typicode com posts true xhr onabort console log request was cancelled xhr send later cancel it xhr abort kopieren das fetch äquivalent verwendet einen abortcontroller xmlhttprequest vs fetch xmlhttprequest fetch programmiermodell callbacks events promises funktioniert mit await upload fortschritt ja xhr upload nein download fortschritt ja progress event über streams mehr code abbrechen xhr abort abortcontroller fehler bei http fehler nein status wird geprüft nein response ok wird geprüft für die meisten neuen projekte ist fetch die bessere wahl auf xhr sollte man zurückgreifen wenn detaillierte upload fortschrittsberichte benötigt werden oder eine sehr alte umgebung unterstützt werden muss fazit xmlhttprequest ermöglicht es javascript im hintergrund daten mit einem server auszutauschen man erstellt das objekt open t es hängt load error timeout handler an und send et es wichtig ist sowohl readystate als auch status zu prüfen json selbst oder über responsetype zu parsen und abort zu verwenden um veraltete anfragen abzubrechen für die meisten neuen projekte ist die promise basierte fetch api die bessere wahl aber das verständnis von xhr hält einen in älteren codebasen und in szenarien wie dem upload fortschritt wo xhr noch immer überlegen ist handlungsfähig übungen übung welche der folgenden aussagen über xmlhttprequest sind korrekt welche der folgenden aussagen über xmlhttprequest sind korrekt xmlhttprequest wird verwendet um http oder https anfragen an einen webserver zu senden die open methode von xmlht...