Wie stelle ich AJAX -Anfragen mit JavaScript in HTML5?

So erstellen Sie AJAX -Anforderungen mit JavaScript in HTML5? Hier erfahren Sie, wie Sie es mit beiden Methoden machen:

Verwenden von xmlhttprequest :

 <code class="javaScript"> Funktion makeajaxRequest (URL, Methode, Methode) {const xhr = new xmlhtprequest (); xhr.open (Methode, URL); xhr.onload = function () {if (xhr.status & gt; = 200 & amp; & amp; xhr.status & lt; 300) {Callback (null, xhr.Response); // Erfolg, Antwort auf Callback} else {callback (xhr.status, null); // Fehler, den Statuscode an Callback übergeben}}; xhr.onerror = function () {callback (xhr.status, null); // Netzwerkfehler}}; xhr.send (); } // Beispiel Verwendung: makeajaxRequest ('Data.json', 'get', Funktion (Fehler, Antwort) {if (error) {console.Error ('Fehler:', error);} else {console.log ('Antwort:', json.parse (Antwort);}}}); <code> makeajaxRequest </code> mit der URL, der HTTP -Methode (get, post usw.) und einer Rückruffunktion als Argumente. Es erstellt ein <code> xmlhttpRequest </code> Objekt, die Ereignishörer für <code> Onload </code> (erfolgreiche Anforderung) und <code> onError </code> (Netzwerkfehler) eingerichtet und die Anforderung gesendet. Die Rückruffunktion übernimmt die Antwort oder Fehler. JSON.Stringify (Körper) // für Postanfragen mit JSON -Daten}; fetch (url, optionen) .then (response = & gt; {if (! response.ok) {Neuen Fehler werfen (`Http -Fehler! Status: $ {response.status}`);} return response.json (); // parse JSON -Antwort} .Then (Data = & gt; console.Error ('Fehler:', Fehler); } // Beispiel Verwendung: makefetchRequest ('Data.json', 'get') makefetchRequest ('submit_data.php', 'post', {name: & quot; John doe & quot; E -Mail: & quot; John@example.com"}); Es verwendet Versprechungen, wodurch asynchrone Operationen leichter zu verwalten sind. Das Beispiel zeigt, wie Sie Anfragen mit Get- und Post -Anfragen umgehen, einschließlich des Sendens von JSON -Daten in der Anforderungsbehörde. Denken Sie daran, den <code> -Typ </code> -Header für verschiedene Datentypen zu passen. Eine vollständige Seite neu laden. Dies führt zu einer schnelleren und reaktionsfähigeren Benutzererfahrung, da die Benutzer nach jeder Interaktion nicht auf die gesamte Seite aktualisieren müssen. Websites zur dynamischen Aktualisierung von Inhalten, ohne den Workflow des Benutzers zu unterbrechen. Dies ist entscheidend für Funktionen wie Live-Chat, Echtzeit-Updates und interaktive Formen. Benutzer können mit Elementen interagieren und sofortige Rückmeldungen ohne Seiten-Reloads erhalten. ist entscheidend für die Erstellung robuster und benutzerfreundlicher Webanwendungen. Hier finden Sie Schlüsselstrategien:  <ul> <li> <strong> HTTP -Statuscodes: </strong> Immer die <code> Status </code> Eigenschaft der <code> xmlhttpRequest </code> Objekt (oder die <code> Antwort </code> Eigenschaft in <code> fetch </code>) nach einer Anforderung abgeschlossen. Statuscodes außerhalb des Bereichs 200-299 geben einen Fehler an (z. B. 404 nicht gefunden, 500 interner Serverfehler). Hören Sie für das <code> onError </code> Ereignis in <code> xmlhttpRequest </code> oder verwenden Sie den <code> .Catch () </code> Block in <code> Fetch </code>. Dies hilft Benutzern, das Problem zu verstehen und angemessene Maßnahmen zu ergreifen. Erwägen Sie, einen zentralisierten Fehlerbehandlungsmechanismus für Debugging-Zwecke zu verwenden. kann das Problem beheben. Dies verbessert die allgemeine Benutzererfahrung. (Antwort. console.Error ('Fehler:', Fehler); Anwendungen:  <ul> <li> <strong> Ignorieren der Fehlerbehandlung: </strong> Die nicht korrekte Fehlerbehandlung kann zu unerwarteten Verhaltensweisen und schlechter Benutzererfahrung führen. Erwarten Sie immer potenzielle Fehler und behandeln Sie sie anmutig. Die Verwendung von AJAX für jede kleine Aufgabe kann zu unnötigem Overhead und Komplexität führen. Überlegen Sie, ob eine vollständige Aktualisierung einfacher und effizienter wäre. Verwenden Sie geeignete Sicherheitsmaßnahmen wie Eingabevalidierung und sichere serverseitige Bearbeitung. Verwenden Sie geeignete HTTP-Header (z. B. <code> Cache-Control </code>), um das Caching effektiv zu verwalten. Stellen Sie sicher, dass der Server so konfiguriert ist, dass Sie Anforderungen Ihrer Domäne zuzulassen. Führen Sie solche Operationen immer asynchron aus, um dieses Problem zu vermeiden. Verwenden Sie <code> async/wartet </code> oder verspricht, asynchrone Operationen effizient zu verwalten. </li> </ul>
</li>
</ul></code>

Das obige ist der detaillierte Inhalt vonWie stelle ich AJAX -Anfragen mit JavaScript in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!