Verwendung von Ajax mit JavaScript über PHP und Sajax

Seit Jahren wird das Ziel, wirklich reaktionsfähige Webanwendungen zu erstellen, durch eine einfache Tatsache der Webentwicklung vereitelt: Um Informationen in einem Teil der Seite zu ändern, muss der Benutzer die gesamte Seite neu laden. Aber das wird nicht mehr passieren. Dank asynchronem Javascript und XML (Ajax) können wir jetzt neue Inhalte serverseitig anfordern und nur einen Teil der Seite ändern. Dieses Tutorial erklärt die Verwendung von Ajax mit PHP und stellt das Simple Ajax Toolkit (Sajax) vor, ein in PHP geschriebenes Tool, das serverseitiges PHP mit JavaScript integriert.

Bevor Sie beginnen

Dieses Tutorial richtet sich an Personen, die daran interessiert sind, asynchrone JavaScript- und XML-Anwendungen (Ajax) mit PHP zu kombinieren Inhalte können dynamisch aktualisiert werden, ohne dass die gesamte Seite aktualisiert werden muss. In diesem Tutorial wird davon ausgegangen, dass der Leser grundlegende PHP-Konzepte versteht, einschließlich if- und switch-Anweisungen und der Verwendung von Funktionen.

Über dieses Tutorial

In diesem Tutorial erfahren Sie mehr über Ajax und die Probleme im Zusammenhang mit seiner Anwendung. Sie erstellen eine Ajax-Anwendung in PHP, die ein Panel aus einem Tutorial anzeigt, das Sie zuvor geschrieben haben. Durch Klicken auf einen Panel-Link wird einfach der Inhaltsbereich neu geladen und durch den Inhalt des ausgewählten Panels ersetzt, wodurch Bandbreite und Seitenladezeit gespart werden. Anschließend wird das Simple Ajax Toolkit (Sajax) in die Ajax-Anwendung integriert, das die Nutzung von Ajax synchronisieren und so die Entwicklung vereinfachen kann.

Überblick

Bevor wir eintauchen, werfen wir einen Blick auf Ajax, eine Beispiel-PHP-Anwendung, und Sajax. Ajax

Ajax ermöglicht Webentwicklern die Erstellung interaktiver Webseiten und vermeidet dabei den Engpass, auf das Laden der Seite warten zu müssen. Mit Ajax erstellte Anwendungen können Inhalte in einem Bereich einer Webseite auf Knopfdruck durch völlig neue Inhalte ersetzen. Das Tolle daran ist, dass Sie nicht auf das Laden der Seite warten müssen, sondern nur der Inhalt dieses Bereichs geladen werden muss. Nehmen Sie zum Beispiel Google Maps: Sie können auf die Karte klicken und sie verschieben, ohne auf das Laden der Seite warten zu müssen.

Probleme mit Ajax

Es gibt einige Dinge, auf die Sie bei der Verwendung von Ajax achten müssen. Wie andere Webseiten können auch Ajax-Seiten mit Lesezeichen versehen werden, was bei Anfragen mit GET und POST zu Problemen führen kann. Durch die Internationalisierung und die zunehmende Anzahl von Kodierungsschemata wird es immer wichtiger, diese Kodierungsschemata zu standardisieren. In diesem Tutorial erfahren Sie mehr über diese wichtigen Themen.

Beispiel-PHP-Anwendung

Eine Anwendung wird zuerst mit Ajax und dann mit Sajax erstellt, um die Vorteile der Verwendung dieses Toolkits zu demonstrieren. Die Bewerbung ist Teil eines zuvor verfassten Tutorials mit Link zum Panel. Es wird als Beispiel verwendet, um die Vorteile der Verwendung von Ajax zu demonstrieren. Denn wenn Sie auf einzelne Panels klicken, werden diese asynchron geladen, ohne dass Sie darauf warten müssen, dass der Rest der Seite erneut geladen wird. Diese Beispielanwendung zeigt auch, wie Sie Ihre eigene Ajax-Anwendung erstellen.

　 Sajax

Wenn Sie eine Ajax-Anwendung erstellen möchten, sich aber nicht mit den komplizierten Details von Ajax belasten möchten. Die Antwort ist Sajax. Sajax abstrahiert die High-Level-Details von Ajax für Webentwickler durch die Verwendung von Bibliotheken, die von den Leuten bei ModernMethod entwickelt wurden. Unter der Haube funktioniert Sajax genauso wie Ajax. Die technischen Details von Ajax können jedoch ignoriert werden, indem die von der Sajax-Bibliothek bereitgestellten High-Level-Funktionen verwendet werden.

　Was ist Ajax?

Dieser Abschnitt ist eine einführende Einführung und erläutert anhand von Beispielen die Konzepte von Ajax, einschließlich dessen, was passiert, wenn auf einen Link geklickt wird, und des HTML- und JavaScript-Codes, der erforderlich ist, wenn Ajax in PHP-Anwendungen verwendet wird. Im nächsten Abschnitt gehen wir etwas tiefer und erstellen tatsächlich eine PHP-Anwendung unter Verwendung der in diesem Abschnitt erlernten Ajax-Konzepte.

Hinter den Kulissen

Ajax ist eine Kombination aus asynchronem JavaScript und XML. Ich sage asynchron, weil Sie auf einen Link auf der Seite klicken können und dann nur der dem Klick entsprechende Inhalt geladen wird, während der Titel oder andere festgelegte Informationen intakt bleiben.

Wenn Sie auf einen Link klicken, arbeitet im Hintergrund eine JavaScript-Funktion. JavaScript erstellt Objekte, die mit dem Webbrowser kommunizieren und den Browser anweisen, eine bestimmte Seite zu laden. Sie können dann wie gewohnt andere Inhalte auf derselben Seite durchsuchen. Wenn der Browser die neue Seite vollständig lädt, zeigt der Browser den Inhalt an der durch das HTML-Div-Tag angegebenen Position an.

CSS-Stilcode wird zusammen mit Span-Tags verwendet, um Links zu erstellen.

CSS-Stilcode

Die Beispielanwendung erfordert CSS-Code, damit das Span-Tag wie ein normales Ankertag aussieht (　Liste 1. Geben Sie die Anzeigeinformationen des Span-Tags an

...
＜style type="text/css"＞
span:visited{ text -decoration:none; color:#293d6b; }
span:underline; color:#293d6b; ＞