fbpx

Javascript Ajax.

Was es ist, wie es funktioniert und wofür es verwendet wird.

Joomla Joomla! CMS Content Management System

Während Sie sich auf den Weg machen, den Tech-Jargon zu beherrschen, werden Sie irgendwann auf den Begriff AJAX stoßen.

Technisch gesehen hat AJAX nichts mit Reinigungsmitteln oder übermäßig muskulösen Trojanischen Kriegsveteranen zu tun (was wahrscheinlich offensichtlich ist), aber worauf bezieht es sich? Ist es eine Programmiersprache? Eine Softwareplattform? Eine Webanwendung? Die Antwort ist eigentlich keine der oben genannten.

Was ist AJAX?

AJAX ist ein Akronym, das für Asynchronous JavaScript and XML steht, und beschreibt eine Reihe von Entwicklungstechniken, die zum Erstellen von Websites und Webanwendungen verwendet werden.

Der beste Weg, AJAX zu verstehen, ist mit der Identifizierung seines spezifischen Zwecks im Web-Entwicklungsprozess zu beginnen. Die Kernfunktion von AJAX besteht darin, Webinhalte asynchron zu aktualisieren (das „A“ von AJAX), was bedeutet, dass der Webbrowser eines Benutzers nicht eine ganze Webseite neu laden muss, wenn sich nur ein kleiner Teil der Inhalte auf der Seite ändern muss.

Eines der allgegenwärtigsten Beispiele für asynchrone Aktualisierung ist die Google-Funktion „Google Suggest“. Wenn Sie eine Suchanfrage in die Suchleiste von Google eingeben und die Google-Website automatisch mit der automatischen Vervollständigung beginnt, während Sie eingeben, ist AJAX in Aktion.

Der Inhalt der Seite ändert sich (in diesem Fall die Autovervollständigungsoptionen in der Suchleiste), ohne die Seite manuell aktualisieren zu müssen (was Google Suggest unpraktisch machen würde). Funktionen wie Google Suggest sind ein wesentlicher Bestandteil des modernen Webbrowsings, was darauf hinweist, wie wichtig AJAX in der Webentwicklung ist.

Zusätzlich zu Google Suggest, wird AJAX häufig verwendet, um Funktionen wie Status- und Benachrichtigungsleisten, Online-Formulare, Kommentarabschnitte sowie Umfragen und Befragungen zu aktualisieren. Aber was genau sind die „J“ und „X“ von AJAX und wie ermöglichen sie eine asynchrone Aktualisierung?

 

JavaScript und XML

Wie bereits erwähnt, steht das „J“ in AJAX für JavaScript. JavaScript ist eine Art von Skriptsprache, die die Programmierung von Webseitenprozessen ermöglicht, so dass Webentwickler nicht jede Instanz des Prozesses, die auf einer Seite erscheint, einzeln programmieren müssen.

Im Falle von JavaScript wird es speziell zum Erstellen, Hinzufügen und Verwalten von dynamischen Webseiteninhalten verwendet. Mit anderen Worten, nachdem Markup-Sprachen wie HTML und CSS verwendet werden, um statische Web-Features (Header, Schriften, Absätze usw.) zu erstellen und anzuzeigen, wird JavaScript dann verwendet, um Funktionen zu steuern, die Echtzeit-Updates erfordern, während ein Besucher eine Seite betrachtet (denken Sie an interaktive Karten, animierte Grafiken, scrollende Videos, Jukeboxen usw.).

Da JavaScript im Bereich der Aktualisierung von Seiteninhalten tätig ist, ohne dass der Betrachter ganze Seiten manuell neu laden muss, ist es eine wichtige Komponente für die asynchrone Aktualisierung von AJAX.

Das „X“ in AJAX ist XML (Extensible Markup Language). Wie der Name schon sagt, ist XML eine Markup-Sprache, was bedeutet, dass es sich in der gleichen Familie wie Sprachen wie HTML und CSS befindet.

Markup-Sprachen sind Programmiersprachen, die verwendet werden, um Teile eines Webdokuments zu beschreiben, die dazu bestimmt sind, Webbrowsern Anweisungen zum Verstehen, Verarbeiten und Anzeigen einer Webseite zu geben, im Gegensatz zu dem eigentlichen Text, der auf der Seite angezeigt werden soll.

Während HTML und CSS sich darauf konzentrieren, anzuweisen, wie Seiteninhalte angezeigt werden (Absätze, Überschriften, Schriften, Farben usw.), wird XML verwendet, um auf der Seite gespeicherte Daten an die Browser zu übertragen, die sie anzeigen. Einzelne Computersysteme sind oft nicht miteinander kompatibel und können Daten, die von einem anderen System formatiert wurden, nicht verstehen oder mit ihnen interagieren.

XML ermöglicht es Entwicklern, dieses Hindernis zu umgehen, indem sie Daten im Klartextformat zwischen XML-Tags speichern. Auf diese Weise bietet XML eine Möglichkeit, Daten zu speichern, zu verschieben und zu teilen, die nicht von einem bestimmten Soft- oder Hardwaresystem abhängig sind (was für das Internet entscheidend ist, wo Daten über alle Soft- und Hardwareplattformen hinweg verfügbar und verständlich sein müssen).

Die RSS-Feeds, die es den Benutzern ermöglichen, auf Inhalte aus Blogs und Nachrichtenquellen zuzugreifen, während sie in Echtzeit aktualisiert werden, basieren auf XML und sind ein Beispiel für die praktischen Möglichkeiten der Sprache zum Datenaustausch. Aber wie lässt sich XML mit JavaScript unter Verwendung von AJAX kombinieren?

 

Wie funktioniert AJAX?

JavaScript und XML kombinieren, um asynchrone Aktualisierungen durch die Verwendung eines sogenannten XMLHttpRequest-Objekts zu ermöglichen.

Wenn ein Benutzer eine Webseite besucht, die für die Verwendung von AJAX konzipiert ist, und ein vorgeschriebenes Ereignis eintritt (der Benutzer lädt die Seite, klickt auf eine Schaltfläche, füllt ein Formular aus, usw.), erstellt JavaScript ein XMLHttpRequest-Objekt, das dann Daten in einem XML-Format zwischen einem Webbrowser (das Programm, mit dem die Webseite angezeigt wird) und einem Webserver (die Software oder Hardware, auf der die Daten einer Webseite gespeichert sind) überträgt.

Das XMLHttpRequest-Objekt sendet eine Anforderung für aktualisierte Seitendaten an den Webserver, der Server verarbeitet die Anforderung, eine Antwort wird serverseitig erstellt und an den Browser zurückgeschickt, der dann JavaScript verwendet, um die Antwort zu verarbeiten und als aktualisierten Inhalt auf dem Bildschirm anzuzeigen.

Um es kurz zusammenzufassen: JavaScript automatisiert den Aktualisierungsprozess, die Anfrage nach aktualisierten Inhalten wird in XML formatiert, um sie allgemein verständlich zu machen, und JavaScript setzt erneut ein, um die relevanten Inhalte für den Benutzer, der die Seite betrachtet, zu aktualisieren.

Es ist festzustellen, dass die AJAX-Technik externe Seitendaten ignoriert und nur Anfragen nach aktualisierten Informationen und den aktualisierten Informationen selbst bearbeitet. Dies ist wirklich das Herzstück der Effektivität von AJAX, da Websites und Anwendungen, die AJAX verwenden, schneller und reaktionsschneller für die Benutzer werden.

 

Wie können Sie AJAX lernen?

Während die Besonderheiten von JavaScript und Markup-Sprachen selbst wahrscheinlich am besten durch Online- oder persönliche Kurse erlernt werden können, so, dass die Zusammenstellung dieser Fähigkeiten und die Beherrschung der AJAX-Technik leicht durch Online-Tutorials erreicht werden können.

Webressourcen mit kostenlosem AJAX-Tutorial – aber nicht beschränkt auf – Udacity, jQuery, Webucator und Code School. Denken Sie daran, wenn Sie bereits JavaScript, HTML und XML gelernt haben, oder wenn Sie sich gerade im Lernprozess befinden, ist AJAX einfach eine Methode, um diese Fähigkeiten zusammenzubringen, die im Laufe der Stunden aufgenommen werden können, im Gegensatz zu einem völlig neuen Skillset.

Und wenn es darum geht, Webentwickler-Jobs zu bekommen, so, dass es sich lohnt, diese Stunden einzuteilen und sich mit der AJAX-Technik auf den neuesten Stand zu bringen. Obwohl AJAX keine eigenständige Fähigkeit ist, ist es eine Technik, die so universell und der Schlüssel zur Front-End-Entwicklung ist, dass jedes Mal, wenn Sie sich damit vertraut machen, es sich exponentiell auszahlen wird.

Zum Zeitpunkt dieses Schreibens gibt es fast 5.000 Jobangebote auf Glassdoor, die explizit AJAX-Wissen als Anforderung zitieren, und fast 93.000 Frontend-Entwickleraufträge im Allgemeinen, die alle Ihre AJAX-Fähigkeiten begrüßen werden.

CMS
Drupal
Joomla
Magento
ModX
Squarespace
TYPO3
Weebly
Wix
Wordpress

Tools
Ajax
Angular
CoffeeScript
CSS
Grunt
Gulp
JavaScript
NodeJS
Python
React
Sass
Vue.js

Datenbanken
MongoDB
MySQL
PostScript

E-Commerce
Konversions-Rate
WooCommerce

SEO
CRM
ERP
Google PageRank

Webdesign
Formfaktoren
Full Service Agentur
Gutes Webdesign
Screendesign

Sonstiges
Open Source

Bei Fragen schreiben Sie uns!