#16: Intro To Ajax

Ajax gehört zu den wichtigsten Gründen für die Nutzung von jQuery. jQuery behebt nicht nur plattformübergreifende Probleme, sondern macht die Syntax auch sehr einfach zu verwenden und zu verstehen.

In diesem Video versuchen wir zu erklären, was Ajax überhaupt ist. Wir betrachten ein Formularelement, das beim Absenden eine GET- oder POST-Anfrage (wie durch das `method`-Attribut bestimmt) an die von Ihnen angegebene URL (wie durch das `action`-Attribut bestimmt) sendet. Das ist nur HTML, ohne Backend-Code oder JavaScript. Aber diese Übermittlung führt dazu, dass sich die Seite ändert, buchstäblich unter der neuen URL neu geladen wird, genau wie beim Klicken auf einen Link.

Ajax ermöglicht es uns, diese GET- oder POST-Anfrage im Hintergrund zu stellen, ohne die Seite neu zu laden. Im Grunde ist das der gesamte Sinn von Ajax. Und es ist sehr mächtig. Es ist weitgehend dafür verantwortlich, warum moderne Websites so funktionieren und sich so anfühlen, wie sie es tun.

Ajax stand früher für "Asynchronous JavaScript and XML", aber das wird heutzutage weitgehend ignoriert, da es nicht viel bedeutet. Daher auch die Kleinschreibung. Manchmal sehen Sie vielleicht auch "XHR", was eine Abkürzung für XMLHttpRequest ist, die native Kerntechnologie von Ajax.

Der Unterschied zwischen GET und POST ist im Wesentlichen: GET dient dem Abrufen von Informationen und sollte nicht für die Änderung von Daten verantwortlich sein, und POST dient speziell der Änderung von Daten. Lesen Sie dazu gerne mehr in diesem StackOverflow-Thread.

Eine GET-Anfrage in jQuery zu stellen ist erstaunlich einfach

$.get(
  "URL", 
  function(data) {
    // do something with data
  });
});

Die URL ist der Ort, von dem Sie die Daten hoffen zu erhalten. Der zweite Parameter ist die Callback-Funktion, die ausgeführt wird, wenn die Ajax-Anfrage erfolgreich war. Der wichtigste Parameter dort ist der erste, `data`, der die Informationen enthält, die von der Anfrage abgerufen wurden.

Ajax-Anfragen können manchmal fehlschlagen. Ein Grund für diesen Fehler kann der Browser selbst und seine Sicherheitspolicies sein. In die Browser selbst sind Regeln eingebaut, von wo Inhalte angefordert werden dürfen. Anfragen können immer an dieselbe Domain gestellt werden, von der die Anfrage kommt. Wenn jedoch eine andere Domain beteiligt ist, muss diese andere Domain dies explizit zulassen.

Sie können alles darüber unter enable-cors.org lesen. CORS steht für "Cross-Origin Resource Sharing". Wir betrachten ein Beispiel, bei dem CORS nicht aktiviert ist und die Ajax-Anfrage fehlschlägt. Eine gängige und einfache Möglichkeit, dies zu beheben, vorausgesetzt, der Server ist Apache, besteht darin, einen Header zu setzen, der CORS explizit über die .htaccess-Datei erlaubt.

Header set Access-Control-Allow-Origin "*"

Im Video verschieben wir die Ajax-Anfrage einfach zu CodePen, was Ajax standardmäßig gut handhabt.

Kinderleicht

Siehe den Pen fBInl von Chris Coyier (@chriscoyier) auf CodePen