Wie erstelle ich einen AJAX-Aufruf mit JavaScript ohne jQuery?
javascript
ajax
discky
quelle
quelle
Antworten:
Mit "Vanille" JavaScript:
Mit jQuery:
quelle
Mit dem folgenden Snippet können Sie ähnliche Aufgaben ganz einfach ausführen:
Hier ist der Ausschnitt:
quelle
return x.responseText;
- und dann jeden derajax.send
Aufrufe zurückgegeben.ajax.get('/test.php', {foo: 'bar'}, function(responseText) { alert(responseText); });
query.join('&').replace(/%20/g, '+')
stattdessen sein?Ich weiß, dass dies eine ziemlich alte Frage ist, aber es gibt jetzt eine schönere API, die in neueren Browsern nativ verfügbar ist . Mit dieser
fetch()
Methode können Sie Webanfragen stellen. Zum Beispiel, um etwas json anzufordern von/get-data
:Sehen Sie hier für weitere Details.
quelle
<script src="https://cdn.rawgit.com/github/fetch/master/fetch.js"></script>
Fetch hinzu und verwenden Sie es wie einen Champion.Sie können die folgende Funktion verwenden:
Sie können ähnliche Lösungen online über diese Links ausprobieren:
quelle
GET
, können Sie sie einfach zur Anfrage hinzufügen, aber um allgemeiner zu sein, ich bin bei Ihnen, ich habe wirklich darüber nachgedacht, die Antwort zu aktualisieren, um Anforderungsparameter als Parameter für die Funktion hier zu akzeptieren , & auch um die Methode (GET
oderPOST
) zu bestehen, aber was mich daran gehindert hat, ist, dass ich die Antwort hier so einfach wie möglich halten möchte, damit die Leute sie so schnell wie möglich ausprobieren können. Eigentlich hasste ich einige andere Antworten, weil sie zu lang waren, weil sie versuchen, perfekt zu sein :)Wie wäre es mit dieser Version in einfachem ES6 / ES2015 ?
Die Funktion gibt ein Versprechen zurück . Hier ist ein Beispiel für die Verwendung der Funktion und den Umgang mit dem zurückgegebenen Versprechen :
Wenn Sie eine JSON-Datei laden müssen, können Sie
JSON.parse()
die geladenen Daten in ein JS-Objekt konvertieren.Sie können sich auch
req.responseType='json'
in die Funktion integrieren, aber leider gibt es keine IE-Unterstützung dafür , also würde ich dabei bleibenJSON.parse()
.quelle
XMLHttpRequest
machen Sie einen asynchronen Versuch, eine Datei zu laden. Das bedeutet, dass Ihre Codeausführung fortgesetzt wird, während Ihre Datei im Hintergrund geladen wird. Um den Inhalt der Datei in Ihrem Skript verwenden zu können, benötigen Sie einen Mechanismus, der Ihrem Skript mitteilt, wann die Datei vollständig geladen wurde oder nicht geladen wurde. Hier kommen Versprechen zum Tragen. Es gibt andere Möglichkeiten, dieses Problem zu lösen, aber ich denke, Versprechen sind am bequemsten.quelle
Verwenden Sie XMLHttpRequest .
Einfache GET-Anfrage
Einfache POST-Anfrage
Wir können angeben, dass die Anforderung asynchron (true), standardmäßig oder synchron (false) mit einem optionalen dritten Argument sein soll.
Wir können vor dem Aufruf Header setzen
httpRequest.send()
Wir können die Antwort verarbeiten, indem wir
httpRequest.onreadystatechange
vor dem Aufruf eine Funktion festlegenhttpRequest.send()
quelle
Sie können das richtige Objekt je nach Browser mit erhalten
Mit dem richtigen Objekt kann ein GET abstrahiert werden zu:
Und ein POST an:
quelle
Ich suchte nach einer Möglichkeit, Versprechen mit Ajax aufzunehmen und jQuery auszuschließen. Es gibt einen Artikel über HTML5 Rocks , in dem es um ES6-Versprechen geht. (Sie könnten eine Versprechensbibliothek wie Q polyfillieren. ) Sie können das Code-Snippet verwenden, das ich aus dem Artikel kopiert habe.
Hinweis: Ich habe auch einen Artikel darüber geschrieben .
quelle
Eine kleine Kombination aus einigen der folgenden Beispiele und erstellt dieses einfache Stück:
ODER wenn Ihre Parameter Objekte sind - geringfügige zusätzliche Code-Anpassung:
Beide sollten vollständig mit Browser + Version kompatibel sein.
quelle
Wenn Sie JQuery nicht einschließen möchten, würde ich einige leichtgewichtige AJAX-Bibliotheken ausprobieren.
Mein Favorit ist reqwest. Es ist nur 3,4 KB groß und sehr gut ausgebaut: https://github.com/ded/Reqwest
Hier ist ein Beispiel für eine GET-Anfrage mit reqwest:
Wenn Sie etwas noch Leichteres wollen, würde ich microAjax mit nur 0,4 KB ausprobieren: https://code.google.com/p/microajax/
Dies ist der gesamte Code hier:
Und hier ist ein Beispielaufruf:
quelle
Alt, aber ich werde es versuchen, vielleicht findet jemand diese Informationen nützlich.
Dies ist die minimale Menge an Code, die Sie benötigen, um eine
GET
Anforderung auszuführen und einigeJSON
formatierte Daten abzurufen . Dies gilt nur für moderne Browser wie die neuesten Versionen von Chrome , FF , Safari , Opera und Microsoft Edge .Schauen Sie sich auch die neue Fetch-API an, die einen vielversprechenden Ersatz für die XMLHttpRequest-API darstellt .
quelle
XMLHttpRequest ()
Mit dem
XMLHttpRequest()
Konstruktor können Sie ein neuesXMLHttpRequest
(XHR) Objekt erstellen , mit dem Sie mithilfe von Standard-HTTP-Anforderungsmethoden (wieGET
undPOST
) mit einem Server interagieren können :holen()
Sie können die
fetch()
Methode auch verwenden , um eine zu erhaltenPromise
, die in dasResponse
Objekt aufgelöst wird, das die Antwort auf Ihre Anfrage darstellt:navigator.sendBeacon ()
Wenn Sie jedoch lediglich versuchen,
POST
Daten abzurufen, und keine Antwort vom Server benötigen, ist die kürzeste Lösung die Verwendung vonnavigator.sendBeacon()
:quelle
Von youMightNotNeedJquery.com +
JSON.stringify
quelle
Dies kann helfen:
quelle
quelle
Ich hoffe, es hilft
Step 1.
Speichern Sie den Verweis auf das XMLHttpRequest-ObjektStep 2.
Rufen Sie das XMLHttpRequest-Objekt abStep 3.
Stellen Sie eine asynchrone HTTP-Anforderung mit dem XMLHttpRequest-ObjektStep 4.
Wird automatisch ausgeführt, wenn eine Nachricht vom Server empfangen wirdquelle
in einfachem JavaScript im Browser:
Oder wenn Sie Browserify verwenden möchten, um Ihre Module mithilfe von node.js zu bündeln. Sie können superagent verwenden :
quelle
Hier ist ein JSFiffle ohne JQuery
http://jsfiddle.net/rimian/jurwre07/
quelle
Mein Ajax-Anruf
für den Abbruch früherer Anfragen
quelle
HTML:
PHP:
quelle
Eine sehr gute Lösung mit reinem Javascript ist hier
quelle