So tätigen Sie einen Ajax -Anruf in JavaScript?

JavaScript ist eine hochrangige Programmiersprache. Der Nachteil der synchronen Ausführung besteht darin, dass die nächsten Codezeilen auf die vollständige Ausführung der aktuellen Codezeile warten müssen. Die Antwort auf dieses Problem ist die asynchrone Ausführung, in einer asynchronen Anweisung oder einer Zeile muss nicht warten, bis der vorherige Code vollständig ausgeführt wird, sondern dass sie parallel ausgeführt werden können. Um eine asynchrone Ausführung von Code zu erreichen, wird Ajax ins Spiel kommen.

In diesem Beitrag werden wir sehen, was Ajax ist und wie Sie mit Hilfe eines Beispiels einen Ajax -Aufruf in JavaScript tätigen können.

Was ist Ajax?

Ajax wurde 2005 populär, als Google es in seinem Google -Vorschlag aufstellte und es für Asynchronous JavaScript und XML steht. Xml steht für Extensible Markup -Sprache, mit der Nachrichten verschlüsselt werden können, die von Menschen und Maschinen gelesen werden können. XML ähnelt HTML, aber Sie können Ihre eigenen Tags erstellen und anpassen. Die Funktion von AJAX besteht darin, Anforderungen an einen Server zu übertragen und dann auf asynchroner Weise Daten von diesem Server zu empfangen.

Der Vorteil von Ajax besteht darin, dass es seine Funktion ausführt, ohne die gesamte Seite zu aktualisieren. Wenn Sie beispielsweise in der Google -Suchleiste etwas eingeben, nach dem Sie suchen, macht bei jedem Taste die Suchleiste Ajax -Anrufe und der Benutzer empfängt Vorschläge, ohne die Seite tatsächlich zu aktualisieren.

Es ist zu beachten, dass der AJAX mit dem Server mithilfe des XMLHTTPrequest -Objekts, JavaScript/DOM kommuniziert, um Anforderungen und XML als Datenübertragungsmechanismus zu stellen.

Ajax wird mit einem Ereignis ausgelöst und führt dann seine Funktionalität durch, indem zuerst eine erstellt wird Xmlhttprequest Objekt und dann das Senden des Httprequest auf den Server, auf dem die Httprequest wird verarbeitet und eine Antwort erzeugt, die dann mit einigen Daten an den Browser zurückgesandt wird. Der Browser verarbeitet die zurückgegebenen Daten und aktualisiert den Seiteninhalt mit JavaScript.

Jetzt, da wir wissen, was Ajax ist und wie man einen Ajax -Anruf mit JavaScript tätigt.

Ajax -Anruf mit JavaScript

In diesem Beispiel werden wir zunächst das XMLHTTPrequest -Objekt initialisieren, das verwendet wird, um mit dem Server zu kommunizieren oder es einfach auszudrücken, einen Ajax -Anruf machen. Das XMLHTTPrequest verfügt über viele integrierte Methoden, mit denen wir den Server manipulieren oder mit dem Server spielen können. Wir werden eine Verbindung zu einer kostenlosen gefälschten API herstellen, um unseren Ajax -Anruf zu testen. Der Link der API, den wir verwenden werden, ist unten angegeben:

https: // json PlaceHolder.Typikode.com/

Der vollständige Code, um einen Ajax -Anruf zu tätigen, finden Sie unten:

functionMyfunc ()
// Initialisieren von XMLHTTPrequest -Objekt
varxhttp = newxmlHttpRequest ();
// Verbindung mit gefälschter API herstellen
varurl = 'https: // json PlaceHolder.Typikode.com/todos/1 ';
// API von URL holen
xhttp.offen ("Get", URL, wahr);
// Wenn die Anforderung erfolgreich ist, wird die folgende Funktion ausgeführt
xhttp.onReadyStatechange = function ()
// Wenn die Anfrage vollständig und erfolgreich ist
if (das.ReadyState == 4 && dies.Status == 200)
Konsole.Protokoll (dies.Responsext);


// Anfrage senden
xhttp.schicken();

// MyFunc -Funktion aufrufen
myfunc ();

Im obigen Code haben wir zunächst eine Funktion mit dem Namen von initialisiert myfunc (), und in dieser Funktion haben wir eine erstellt Xmlhttprequest Objekt. Als nächstes stellen wir die Verbindung mit einer API mit einer URL her. Um die API zu bekommen, verwenden wir die xhttp.offen() Methode und übergeben die HTTP -Methode ERHALTEN und das URL. Die GET -Methode wird verwendet, wenn wir einige Daten von einem Server und der erhalten POST Die Methode wird verwendet, wenn wir Daten auf dem Server schreiben oder aktualisieren.

Jetzt, wenn die Anfrage ausgeführt wird und wenn sie erfolgreich ist, ist die onreadyStatechange Das Ereignis wird ausgeführt, wo wir eine Bedingung verwenden, die nach Abschluss der Anforderung und der erfolgreichen Anforderung die Daten protokollieren, die Daten protokollieren. Der Statuscode 200 wird verwendet, was ok bedeutet. Der 400 Statuscode bedeutet Fehler und die 300 Statuscode bedeutet, auf eine Seite umzuleiten. Der nächste Schritt besteht darin, die Anforderung mit der Methode Send () zu senden.

Am Ende nennen wir die Funktion myfunc () und sehen die folgende Ausgabe im Konsolenprotokoll:

Der in den Entwickler -Tools zu sehene Statuscode ist 200, was bedeutet, dass er OK bedeutet:

Abschluss

Ajax steht für Asynchronous JavaScript und XML, wobei XML verwendet wird, um Nachrichten zu verschlüsseln, die in lesbarem Format für Menschen und Maschinen erstellt werden, außer dass Sie mit XML Ihre eigenen Tags anpassen können. Mit AJAX können Sie Daten an den Server übertragen, ohne die gesamte Seite aktualisieren zu müssen. Es führt seine Operation asynchron durch und verbessert die Geschwindigkeit, da der Code nicht auf den vorherigen Code warten muss, um seine Ausführung abzuschließen. In JavaScript wird das XMLHTTPrequest -Objekt verwendet, um einen Ajax -Aufruf zu tätigen.

In diesem Beitrag diskutierten wir zuerst, was Ajax ist, und diskutierten dann, wie man einen Ajax -Aufruf in JavaScript mit dem XMLHTTPREquest -Objekt tätigt.