Ein Leitfaden zu Vanilla ajax ohne jQuery

Key Takeaways

• AJAX, kurz für asynchrone JavaScript und XML, ermöglicht teilweise Seitenaktualisierungen, wodurch die Notwendigkeit einer vollständigen Aktualisierung von Seiten verringert und mehr flüssige Benutzererfahrungen ermöglicht werden können. Die grundlegende Anatomie einer AJAX -Anfrage besteht darin, eine Instanz der erforderlichen Klasse für eine HTTP -Anforderung zu erstellen, die HTTP -Anforderungsmethode und die URL der Seite anzugeben und die Anforderung zu senden.
• Während JQuery Ajax -Anforderungen vereinfachen kann, ist dies nicht immer erforderlich. Die AJAX -API in Vanille -JavaScript hat signifikante Verbesserungen durchlaufen, und die XMLHTTPrequest -Spezifikation wird nun aus Sicht der Standards als einzelne Entität behandelt, was auf eine Verpflichtung der Community hinweist, sich an einen Standard zu halten.
• Vanille Ajax bietet eine flexible und moderne Front-End-API. Es ermöglicht das Einstellen von Anforderungsheadern, die Angabe der vom Server erwarteten Antwort und das Bustieren des Browser -Cache. Während Ajax einst ein komplexer Prozess war, ist es einfacher und benutzerfreundlicher geworden.

Kurz gesagt, AJAX für asynchrone JavaScript und XML ist ein Mechanismus für teilweise Seitenaktualisierungen. Es ermöglicht Ihnen, die Abschnitte einer Seite mit Daten zu aktualisieren, die vom Server stammen, und vermeiden gleichzeitig die Notwendigkeit einer vollständigen Aktualisierung. Auf diese Weise teilweise Updates zu erstellen, kann bei der Erstellung von Flüssigkeitsnutzererfahrungen wirksam sein und die auf dem Server gesetzte Last verringern.

Dies ist die Anatomie einer grundlegenden AJAX -Anfrage:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Hier erstellen wir eine Instanz der erforderlichen Klasse, um eine HTTP -Anforderung an den Server zu stellen. Wir rufen dann seine offene Methode auf und geben die HTTP -Anforderungsmethode als erste Parameter und die URL der Seite an, die wir als zweites anfordern. Schließlich nennen wir seine Send -Methode, die Null als Parameter übergeben wird. Wenn die Anforderung nach dem Abbau der Anfrage (hier verwenden wir GET), sollte dieser Parameter alle Daten enthalten, die wir mit der Anfrage senden möchten.

Und so würden wir mit der Antwort vom Server umgehen:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

Die OnReadyStatechange ist asynchron, was bedeutet, dass er jederzeit aufgerufen wird. Diese Art von Funktionen sind Rückrufe - eine, die aufgerufen wird, sobald einige Verarbeitungen beendet sind. In diesem Fall findet die Verarbeitung auf dem Server statt.

Für diejenigen, die mehr über die Grundlagen von Ajax erfahren möchten, hat das MDN -Netzwerk einen guten Leitfaden.

zu jQuery oder nicht zu jQuery?

Die gute Nachricht ist also, dass der obige Code in den neuesten großen Browsern funktioniert. Die schlechte Nachricht ist, dass es ziemlich verworren ist. Yuck! Ich stecke bereits eine elegante Lösung.

Mit JQuery könnte man den gesamten Ausschnitt kondensieren, um:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

was schön ist. Und in der Tat ist JQuery für viele, einschließlich Ihrer wirklich, zum De -facto -Standard geworden, wenn es um Ajax geht. Aber weißt du was? Dies muss nicht der Fall sein. JQuery existiert, um die hässliche Dom -API zu umgehen. Aber ist es wirklich so hässlich? Oder unverständlich?

Im Rest dieses Artikels möchte ich Verbesserungen an der Ajax -API in Vanille -JavaScript untersuchen. Die gesamte Spezifikation finden Sie im W3C. Was mir an dieser Spezifikation auffällt, ist der Name. Es handelt sich nicht mehr um "xmlHttprequest Level 2", sondern "XMLHTTPrequest Level 1" - ein Ergebnis einer 2011er Fusion zwischen den beiden Spezifikationen. In Zukunft wird es aus Sicht der Standards als einzelne Einheit behandelt und der lebende Standard wird XMLHTTPREquest genannt. Dies zeigt, dass die Community Engagement gibt, sich an einen Standard zu halten, und dies kann nur gute Nachrichten für Entwickler bedeuten, die sich von JQuery befreien möchten.

Also lass uns loslegen…

Setup

Für diesen Artikel verwende ich Node.js im Back-End. Ja, es gibt JavaScript im Browser und auf dem Server. Das Back-End von Node.js ist schlank. Ich ermutige Sie, die gesamte Demo auf GitHub herunterzuladen und mitzumachen. Hier ist das Fleisch und die Kartoffeln des Servers:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Dies überprüft die Anforderungs -URL, um festzustellen, wie die App reagieren soll. Wenn die Anfrage aus dem Skriptverzeichnis stammte, wird die entsprechende Datei mit dem Inhaltstyp der Anwendung/JavaScript bedient. Andernfalls wissen wir, dass wir mit einer AJAX-Anfrage zu tun haben und angemessen reagieren können. Und wenn keiner davon der Fall ist, wird die Dateiansichten/index.html bedient.

Ich werde den kommentierten Abschnitt erweitern, während wir vom Server in Ajax -Antworten eintauchen. In Node.js musste ich mit dem Render und Httphandler ein schweres Leben machen:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

Die Renderfunktion liest asynchron den Inhalt der angeforderten Datei. Es wird ein Hinweis auf die HTTPHandler -Funktion übergeben, die es dann als Rückruf ausführt. Die Funktion HTTPHandler prüft nach Vorhandensein eines Fehlerobjekts (das beispielsweise vorhanden wäre, wenn die angeforderte Datei nicht geöffnet werden kann). Das Bereitstellen von allem ist gut, dient dann dem Inhalt der Datei mit dem entsprechenden HTTP -Statuscode und Inhaltstyp.

Testen Sie die API

Schreiben wir wie bei jeder Sound-Back-End-API einige Einheiten-Tests, um sicherzustellen, dass sie funktioniert. Für diese Tests rufe ich Supertest und Mokka um Hilfe:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Diese stellen sicher, dass unsere App mit dem richtigen Inhaltstyp und dem HTTP -Statuscode auf verschiedene Anforderungen antwortet. Sobald Sie die Abhängigkeiten installiert haben, können Sie diese Tests über den Befehl mit dem NPM -Test ausführen.

Die Schnittstelle

Schauen wir uns nun die Benutzeroberfläche an, die wir in HTML erstellen:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

Die HTML sieht gut und ordentlich aus. Wie Sie sehen können, geschieht die gesamte Aufregung in JavaScript.

OnreadyState gegen Onload

Wenn Sie ein kanonisches Ajax -Buch durchlaufen, finden Sie möglicherweise überall Onreadystate. Diese Rückruffunktion ist komplett mit verschachtelten IFs und viel Flusen, die es schwierig machen, sich von der Spitze Ihres Kopfes zu erinnern. Lassen Sie uns den Onreadystate- und Onload -Ereignissen von Kopf an Kopf setzen.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Dies ist die Ausgabe in der Konsole:

Das Onreadystate -Ereignis feuert überall. Es feuert zu Beginn jeder Anfrage am Ende und manchmal, nur weil es wirklich gern gefeuert wird. Laut der Spezifikation feuert das Onload -Ereignis nur dann aus, wenn die Anfrage erfolgreich ist. Das Onload -Ereignis ist also eine moderne API, die Sie in Sekunden lang gut genutzt werden können. Das Onreadystate -Ereignis ist für rückwärts kompatibel. Das Onload -Ereignis sollte jedoch Ihr Tool der Wahl sein. Das Onload -Ereignis sieht aus wie der Erfolg auf JQuery, nicht?

Es ist Zeit, die 5 -lb -Hanteln beiseite zu legen und zu Arm Curls weiterzugehen.

Anforderungsheader

einstellen

jQuery setzt Anforderungsheader unter den Cover, sodass Ihre Back-End-Technologie weiß, dass es sich um eine AJAX-Anfrage handelt. Im Allgemeinen ist es dem Back-End egal, woher die Get-Anfrage stammt, solange er die richtige Antwort sendet. Dies ist praktisch, wenn Sie Ajax und HTML mit derselben Web -API unterstützen möchten. Schauen wir uns also an, wie Sie Anforderungsheader in Vanille Ajax festlegen:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

Damit können wir Node.js einchecken:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Wie Sie sehen, ist Vanille Ajax eine flexible und moderne Front-End-API. Es gibt eine Menge Ideen, für die Sie Anforderungsheader verwenden können, und eine davon ist die Versionierung. Nehmen wir zum Beispiel an, ich möchte mehr als eine Version dieser Web -API unterstützen. Dies ist nützlich, wenn ich keine URLs brechen und stattdessen einen Mechanismus bereitstellen möchte, in dem Kunden die gewünschte Version auswählen können. Wir können den Anforderungsheader so festlegen wie SO:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

und im Back-End versuchen Sie:

// app.js
function render(path, contentType, fn) {
  fs.readFile(__dirname + '/' + path, 'utf-8', function (err, str) {
    fn(err, str, contentType);
  });
}
var httpHandler = function (err, str, contentType) {
  if (err) {
    res.writeHead(500, {'Content-Type': 'text/plain'});
    res.end('An error has occured: ' + err.message);
  } else {
    res.writeHead(200, {'Content-Type': contentType});
    res.end(str);
  }
};

node.js gibt Ihnen ein Header -Objekt, mit dem Sie nach Anforderungsüberschriften überprüfen können. Der einzige Trick ist, dass es sie in Kleinbuchstaben liest.

Wir sind am Haus und haben sich nicht schwitzen lassen! Sie fragen sich vielleicht, was gibt es noch zu wissen über Ajax? Nun, wie wäre es mit ein paar ordentlichen Tricks.

Antworttypen

Sie fragen sich vielleicht, warum ResponText die Serverantwort enthält, wenn alles, mit dem ich arbeite, einfach alte JSON ist. Es stellt sich heraus, dass ich nicht den richtigen Reponsetype eingestellt habe. Dieses AJAX-Attribut ist großartig, um der Front-End-API zu sagen, welche Art von Antwort vom Server zu erwarten ist. Lassen Sie uns dies also gut nutzen:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'send-ajax-data.php');
xhr.send(null);

Fantastisch, anstatt einen einfachen Text zurückzuschicken, den ich dann in JSON analysieren muss, kann ich der API sagen, was sie erwarten soll. Diese Funktion ist in fast den neuesten großen Browsern erhältlich. JQuery führt diese Art von Konvertierung natürlich automatisch durch. Aber ist es nicht großartig, dass wir jetzt eine bequeme Möglichkeit haben, dasselbe in einfachem JavaScript zu tun? Vanilla Ajax unterstützt viele andere Antworttypen, einschließlich XML.

Leider ist im Internet Explorer die Geschichte nicht ganz so großartig. Ab dem IE 11 muss das Team noch Unterstützung für xhr.responsetype = ‘JSON’ unterstützen. Diese Funktion soll auf Microsoft Edge ankommen. Der Fehler ist jedoch seit fast zwei Jahren zum Zeitpunkt des Schreibens hervorragend. Ich vermute, dass die Leute von Microsoft hart gearbeitet haben, um den Browser zu überarbeiten. Hoffen wir, dass Microsoft Edge, auch bekannt als Project Spartan, seine Versprechen eingibt.

leider, wenn Sie dieses Problem umgehen müssen:

xhr.onreadystatechange = function () {
  var DONE = 4; // readyState 4 means the request is done.
  var OK = 200; // status 200 is a successful return.
  if (xhr.readyState === DONE) {
    if (xhr.status === OK) {
      console.log(xhr.responseText); // 'This is the returned text.'
    } else {
      console.log('Error: ' + xhr.status); // An error occurred during the request.
    }
  }
};

Cache Busting

Ein Browser -Feature -Feature, die Menschen neigen, ist die Fähigkeit, Ajax -Anfragen zu zwischenstrichen. Internet Explorer macht dies beispielsweise standardmäßig. Ich hatte einmal stundenlang Probleme, herauszufinden, warum mein Ajax deswegen nicht funktioniert. Glücklicherweise bastet Jquery den Browser -Cache standardmäßig. Nun, Sie können in einfachem Ajax zu und ist ziemlich einfach:

$.ajax({
  url: 'send-ajax-data.php',
})
.done(function(res) {
  console.log(res);
})
.fail(function(err) {
  console.log('Error: ' + err.status);
});

Laut der JQuery -Dokumentation ist nur eine Zeitstempelabfrage an das Ende der Anfrage angehängt. Dies macht die Anfrage etwas einzigartig und pleite den Browser -Cache. Sie können sehen, wie dies aussieht, wenn Sie HTTP AJAX -Anfragen feuern:

tada! Alles ohne Drama.

Schlussfolgerung

Ich hoffe, Sie haben die 300 -Pfund -Bankpresse Vanille Ajax früher genossen. Einer zu einer Zeit war Ajax ein schreckliches Tier, aber nicht mehr. Tatsächlich haben wir alle Grundlagen von Ajax ohne die Krücken, ähm Fesseln, von JQuery abgelegt.

Ich werde Sie mit einer prägnanten Möglichkeit lassen, Ajax -Anrufe zu tätigen:

// app.js
var app = http.createServer(function (req, res) {
  if (req.url.indexOf('/scripts/') >= 0) {
    render(req.url.slice(1), 'application/javascript', httpHandler);
  } else if (req.headers['x-requested-with'] === 'XMLHttpRequest') {
    // Send Ajax response
  } else {
    render('views/index.html', 'text/html', httpHandler);
  }
});

Und so sieht die Antwort aus:

Vergessen Sie nicht, Sie können die gesamte Demo auf GitHub finden. Ich würde gerne Ihre Gedanken mit und ohne jQuery in den Kommentaren hören.

häufig gestellte Fragen (FAQs) auf Vanille Ajax ohne jQuery

Was ist Vanilla ajax und wie unterscheidet es sich von JQuery Ajax? Während JQuery AJAX eine vereinfachte, kreuzbrowserkompatible Methode zum Umgang mit AJAX bietet, bietet Vanilla Ajax Ihnen mehr Kontrolle und Verständnis der zugrunde liegenden Prozesse. Es ist auch eine großartige Option, wenn Sie Abhängigkeiten von externen Bibliotheken wie JQuery reduzieren möchten.

Wie erstelle ich eine grundlegende AJAX -Anforderung mit Vanilla javaScript? Mit diesem Objekt können Sie HTTP- oder HTTPS -Anforderungen an einen Webserver senden und die Server -Antwortdaten in Ihr Skript zurückladen. Hier ist ein einfaches Beispiel:

var xhr = new xmlhttprequest (); xhr.onreadyStatechange = function () {
if (xhr.readystate == 4 && xhr.status == 200)
console.log (json.parse (xhr.responSetext)); 🎜>
Fehlerbehandlung in Vanille -Ajax kann mit dem Onerror -Ereignishandler des XMLHTTPrequest -Objekts durchgeführt werden. Dieses Ereignis wird ausgelöst, wenn bei der AJAX -Anforderung ein Fehler auftritt. Hier ist ein Beispiel:

var xhr = new xmlhttprequest (); .onError = function () {
console.log ("anfordern fehlgeschlagen ");
}; Die offene Methode des XMLHTTPrequest -Objekts akzeptiert die HTTP -Methode als erstes Argument. Sie können also "Get" durch "Post" ersetzen. Denken Sie daran, den Header vom Typ des Inhalts mit der SetRequestHeader-Methode vor dem Senden der Anforderung einzustellen. Anfrage, Sie müssen das JSON -Objekt ansprechen und als Körper der Anfrage senden. Setzen Sie den Inhaltsheader auch auf Anwendung/JSON. Hier ist ein Beispiel:

var xhr = new xmlhttprequest (); .setRequestheader ("Content-Typ", "application/json"); > Sie können eine AJAX -Anforderung stornieren, indem Sie die ABORT -Methode des XMLHTTPrequest -Objekts aufrufen. Dadurch wird die Anfrage sofort beendet. . Um eine synchrone Anfrage zu stellen, geben Sie falsch als drittes Argument an die offene Methode weiter.

Wie kann ich den Fortschritt einer AJAX -Anforderung überwachen? Der On -Progress -Ereignishandler des XMLHTTPrequest -Objekts. Dieses Ereignis wird mehrfach ausgelöst und liefert die aktuellen Fortschrittsinformationen . Es handelt sich um eine native JavaScript -Funktion und hängt nicht von einer externen Bibliothek ab.

wird Vanilla ajax von allen Browsern unterstützt? Ältere Versionen von Internet Explorer (dh 6 und früher) verwenden jedoch ein ActiveX -Objekt für Ajax.

Das obige ist der detaillierte Inhalt vonEin Leitfaden zu Vanilla ajax ohne jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!