Benötigen Sie Ajax ohne Abhängigkeiten?

Einer der Hauptgründe für die Verwendung von jQuery war lange Zeit, wie einfach es Ajax machte. Es bietet eine super saubere, flexible und browserübergreifend kompatible API für alle Ajax-Methoden. jQuery ist immer noch extrem beliebt, aber es wird immer üblicher, es wegzulassen, insbesondere da die Anteile älterer Browser sinken und neue Browser viele leistungsstarke Funktionen bieten, für die wir früher jQuery gelernt haben. Selbst `querySelectorAll` wird oft als Grund genannt, die jQuery-Abhängigkeit zu verlieren.

Wie steht es um Ajax?

Nehmen wir an, wir müssten eine GET-Anfrage stellen, um etwas HTML von einem URL-Endpunkt zu erhalten. Wir werden keine Fehlerbehandlung durchführen, um dies kurz zu halten.

Mit jQuery hätte es so ausgesehen

$.ajax({
  type: "GET",
  url: "/url/endpoint/",
}).done(function(data) {
  // We got the `data`!
});

Wenn wir jQuery weglassen und natives Browser-Ajax verwenden wollten, könnten wir es so machen

var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = ajaxDone;
httpRequest.open('GET', '/url/endpoint/');
httpRequest.send();

function ajaxDone() {
  if (httpRequest.readyState === XMLHttpRequest.DONE) {
    if (httpRequest.status === 200) {
      // We got the `httpRequest.responseText`! 
    }
  }
}

Die Browserunterstützung dafür ist etwas kompliziert. Die Grundlagen funktionieren bis zurück zu IE 7, aber erst ab IE 10 wurde es wirklich solide. Wenn Sie robuster werden wollen, aber trotzdem Abhängigkeiten überspringen möchten, können Sie sogar einen `window.ActiveXObject`-Fallback verwenden und bis zu IE 6 zurückgehen.

Kurz gesagt, es ist sicherlich möglich, Ajax ohne Abhängigkeiten durchzuführen und eine ziemlich tiefe Browserunterstützung zu erhalten. Denken Sie daran, dass jQuery nur JavaScript ist, also können Sie immer tun, was es im Hintergrund tut.

Aber es gibt noch eine weitere Sache, die jQuery seit einiger Zeit mit seinem Ajax macht: es basiert auf Promise. Eines der vielen coolen Dinge an Promises, besonders in Kombination mit einem "asynchronen" Ereignis wie Ajax, ist, dass es Ihnen erlaubt, mehrere Anfragen parallel auszuführen, was für die Leistung hervorragend ist.

Die nativen Ajax-Sachen, die ich gerade gepostet habe, basieren nicht auf Promises.

Wenn Sie eine starke und bequeme Promise-basierte Ajax-API mit ziemlich guter browserübergreifender Unterstützung (bis IE 8) wünschen, könnten Sie Axios in Betracht ziehen. Ja, es ist eine Abhängigkeit wie jQuery, es ist nur hyper-fokussiert auf Ajax, 11,8 KB vor GZip, und hat keine eigenen Abhängigkeiten.

Mit Axios würde der Code so aussehen

axios({
  method: 'GET',
  url: '/url/endpoint/'
}).then(function(response) {
  // We got the `response.data`!
});

Beachten Sie die `then`-Anweisung, was bedeutet, dass wir wieder im Promise-Land sind. Kleine Randbemerkung: Anscheinend sehen die Anfragen auf der Serverseite nicht identisch aus wie bei jQuery .

Aber die Browser sind noch nicht fertig! Es gibt eine ziemlich neue Fetch-API, die Promise-basiertes Ajax mit einer schönen und sauberen Syntax durchführt

fetch('/url/endpoint/')
  .then(function(response) {
    return response.text();
  })
  .then(function(text) {
    // We got the `text`!
  });

Die Browserunterstützung dafür wird auch ziemlich gut! Sie wird in allen stabilen Desktop-Browsern, einschließlich Edge, ausgeliefert. Die Gefahrenzone ist keinerlei IE-Unterstützung und nur iOS 10.1+.