PHP Ajax Tutorial, XMLHttpRequest einfach erklärt | Deutsch
Вставка
- Опубліковано 19 вер 2024
- In diesem Video erkläre ich wie Ajax Funktioniert, dabei zeige ich dir wie man eine normale HTML Datei lädt, ein JSON Objekt nachlädt, ein JSON Objekt mit PHP erzeugt und ein POST Request auf eine Form absendet. Auch werde ich ein Ajaxloader erstellen und diesen Zeigen.
** Links zum Video **
Ajax: de.wikipedia.o...)
XMLHttpRequest: developer.mozi...
Bubbling: www.w3.org/TR/...
Code zum Video:
github.com/Bla...
Weitere Themenvorschläge und/oder Kooperationen in die Kommentare.
#php #ajax #XMLHttpRequest
Das beste einsteiger Video das ich gefunden habe, vielen dank, der Daumen hoch ist dir sicher, dass ABO auch.
Dankeschön
Wieder mal ein tolltes Tutorial. Ich hab anfangs und auch heute noch viel mit jQuery gecodet, mittlerweile mag ich auch Vanilla JS / JavaScript.
dankeschön, ja das einzige was ich noch von jQuery UI vermisse ist der Drag und Drop. Den gibt es leider noch nicht in native und denn muss man programieren oder via npm nachinstallieren. ansonsten ist jquery wirklich nicht mehr notwendig heut zu tage
Ein sehr informatives Video zu ajax php css javascript. Gut finde ich dass du mehrere Varianten erläuterst, indem du ein mal JSON (für alle großes Thema), sowie normale Ressource als HTML Fragment lädst, und dabei noch auf das Header Element verweist, da ohne dem nichts läuft, sowie Hintergrundprozese im Browser zeigst, um dies nochmal verständlicher zu verankern. Das Ding ist, wenn man herausgefunden hat was man alles braucht um dies so lauffähig zu machen, wird man entweder ein Tutorial zu einem oder anderem Thema finden, jedoch nicht in dieser. Sehr gut komposiert ! Ablauf und Inhalt des Tutorials sollte von Allen als Standard angenommen werden. Vielen Dank.
Dankeschön, vielen dank bin sprachlos dass ich jemanden Begeistern konnte :D jetzt kann man voll motiviert das nächste Video machen
@@VitalijMik Nun bin ich am überlegen, wie ich das Konstrukt in mein MVC implementiere. Die Seiten werden bei mir nämlich so geladen: ich klicke etwas an, es liefert mir einen neuen Teil für die URL. Unter dem neuen Pfad liegt die Zielressource die ich dann quasi anzeigen möchte( nächste seite z.B). Aber wenn ich hier ein HTML Fragment per ajax nachlade, und das über POST oder GET, berührt es in erster Linie den normalen MVC Ablauf, und sucht nach einer Ressource die mir schon Ajax liefert. Damit hat Ajax mir die Ressource geliefert, jedoch wird es nicht angezeigt, weil der Controller nach dieser Ressource sucht... nun überlege ich wie ich Einzelne Teile der Anwendung per Ajax nachlade, ohne POST und GET zu berühren... bzw großartige Ausnahmen im Controller implementiere. Vielleicht hast du schon mal darüber nachgedacht ob es bei MVC sinn macht und wie man es am besten implementiert damit REST und AJAX bei get/post nicht kollidieren?
Übrigens denke ich, du solltest Kurse geben. :D hätten wir dich als Dozent gehabt, dann würden mehr als 3 Leute aus der Gruppe die Prüfung bestehen. Ich komme aus Hamburg, vielleicht wäre ja eine Vermittlung was für dich? :) Ich kann dir jedenfalls sagen, dass du zur Spitze von guten Dozenten gehörst. Von den drei Dozenten im unseren Kurs haben wir zwei abgewählt, und waren nur mit einem zufrieden( dieser war jedoch schon von der Handelskammer). Oft musste ich hier nach Tutorials suchen und bin so auf dich gestoßen. Was die Dozenten schlecht und oberflächlich angerissen hatten, musste ich selbst nachrecherchieren. Unter anderem haben mir deine Tutorials geholfen, z.b. über das singleton und pattern usw... Das sage ich dir, damit du aus der Sicht eines Weiterbildenden erfährst, mit wem du dich messen und gleichstellen kannst.
@@justmusic567 vielen dank für den Lob.
Zu deinem Problem bzw die Lösung dafür wäre HMVC als Hiearchiche mit MVC. Ich habe dazu auch ein Video gemacht.
Du musst deinen Router vom MVC Konstrukt entkoppeln und eine Schicht einbringen die die Route findet. (Front Controller Pattern ist das Stichwort)
Der Hauptcontroller lädt deine MVC Route und die wiederum lädt entweder unterrouten direkt rein oder eben die einzelfragmente via Ajax.
Prinzipiell sollte es egal sein ob du teile via Ajax nachlädst oder nicht, der einzige Unterschied ist es ja dass diem Ajax Request eben im Template kein header usw mitsenden willst sondern nur den einen Schnipsel und wenn die Anfrage ohne Ajax kommt dann eben das komplette Template zurückgegeben wird.
Dir Fehlt einfach eine Striktere Trennung zwischen definierten URLs und Controller.
Ich habe ein Beispielprojekt und ich denke dir Fehlt einfahc nur das hier
github.com/BlackScorpGames/webrpg/blob/master/source/map/functions.php#L57-L64
Ich küss dein Augen. Das ist exakt das, was ich jetzt gebraucht habe. Sub ist da. 👌👌
Dankeschön, such mal auf meinem Kanal nach dem Chat Tutorial da gibt's ne Alternative. Auch habe ich die fetch API
danke, dass du auf meinen/den Wunsch eingegangen bist. gutes Video - vorallem die Einleitung :-D - ich nenne (in diesem Zusammenhang) AJAX sowieso immer "digitales Putzmittel". :-D
Gerne doch, wenn du weitere Wünsche hast, immer her damit
Geil mit dem Ajax Putzmittel XD
Ajax Amsterdam hätte ich ja schlecht zeigen können:D
Besser als Udemy, weil näher an der Praxis!
Dankeschön, ich empfehle dir auch das Video zur Lesbaren URLs und dann darauf MVC ;)
Sehr schön erklärt, danke
Dankeschön
Also gibt AJAX nur die Variablen an die PHP ? Und kann man dann in der PHP ganz normal Validierung o.ä. machen ?
Genau. Ajax ist im Grunde das gleiche als ob man eine url im neuen Tab aufmachen würde. Und die Ausgabe des HTML Codes würde man in die originale url Einbinden
Also kann man dann auch über den POST die Ausgabe auf der Seite ändern ? Über die PHP oder muss man dazu noch was speziell beachten ?
@@rebundorebundo4779 ja kann man. Weiter im Video habe ich ja diesen extendet Beispiel github.com/BlackScorp/ajax/blob/master/ajax-extended.php#L114 hier wird der parameter "method" aus der Form geladen und verwendet um einen ajax request abzuschicken. in diesem Beispiel lade ich im ersten Ajax die ajax-form.php um die Form anzuzeigen und aschließend sende ich das Formular als Ajax Request ab und das Ergebnis davon zeige ich dann an.
Auf der PHP Seite sieht man keinen unterschied, ob das Formular normal oder über Ajax verschickt wurde, nur die Ausgabe ist bei Ajax anders. Im Ajax muss man eben entweder einen JSON Objekt ausgben oder einen HTML Code ohne header und body usw also NUR den Inhalt der angezeigt werden soll. Und weiterleitungen im Ajax funktionieren nicht.
Hallo Vitalij , ich hätte eine Frage bezüglich vendor und composer da ich phpmailer nur in einer Seite verwende möchte ich wissen, ob der wegen autoload.php trozdem in allen Seiten aufgerufen wird. Wenn ja ob das eine Belastung ist oder nicht, da ich mehrere Module durch composer installiert habe und die viele Datein inhalten.
Vielen Dank
Hi nein, der Autoloader wird aufgerufen sobald du irgendwo eine klasse via new oder über die statischen methoden Foo::bar aufrufst, dabei wird beim ersten mal geschaut wo sich die Datei zu der Klasse befindet und diese wird eingebunden.
Das heißt nur die Klassen werden eingebunden, die du Tatsächlich brauchst. Zudem geschieht der require einmalig. Sprich wenn du bereits eine Klasse eingebunden hast, ist der Dateipfad bekannt und der PHP script muss nicht noch mal suchen.
Du kannst das ganze noch mal optimieren indem du composer install -o aufrufst, damit legt composer eine liste an mit allen Klassen und den dateipfaden zu den klassen an. Für das Produktsystem ist es dann sehr gut weil die Ordner nicht mehr durchsucht werden müssen. Zum Entwickeln ist das nicht optimal da sich ja die Pfade auch mal verändern können.
Wenn du also composer install -o --nod-dev auf deinem produktivsystem ausführst, wird alles schnell und sauber funktionieren
@@VitalijMik Schade, dass man Like nur einmal geben kann, sonst hätte ich dir 1000 Like gegeben.
Tausend Dank
Verwendet ihr eigentlich eine Ajax Library oder schreibt ihr alles mit nativem JavaScript?
Also ich habe es mit jquery gemacht, weil es finde ich den Code nicht so aufbläst. Aber nativ sieht man halt mehr. Gerade zum verstehen finde ich es besser so wie du es gemacht hast, aber wenn du Lust hast, kannst du das ganze ja nochmal mit jQuery zeigen. Ganz schrecklich finde ich es bei uns in der Firma, egal auf welchen Button man drückt in dem ERP System, die Seite oder das wird komplett neu geladen und alles was man vorher wo anders in ein Textfeld oder ähnliches geschrieben hat, ist dann weg. Weil nicht mit JavaScript sondern nur mit PHP und POST, GET gearbeitet wird. Ich finde das ganz schrecklich und würde mir lieber Ajax für alle Formulare etc. wünschen.
Aber ajax arbeitet ja auch im Hintergrund mit POST und GET in PHP. Der unterschied zwischen AJax und Iframe ist, bei einem iFrame hast du ein HTML DOkument mit Header und styles und JS und bei ajax. Serverseitig spielt es keine Rolle ob ich eine HTTP Anfrage über Browser/Iframe schicke oder Ajax.
Übrigens zu viel Ajax ist auch nicht einfach zu handlen weil du das Testen davon sehr schwer ist. Du kannst nur über Front End Tests automatsiert testen ob ein Inhalt nachgeladen wurde und Front End Tests sind immer langsam
@@VitalijMik Aber dafür lädt die Seite nicht Neu. Ajax schiebt eine Schicht zwischen Server und Clien. Server -> Ajax Control -> Client. Neuladen in der heutigen Zeit egal ob oder die ganze Seite ist nicht mehr Zeitgemäß in meinen Augen.
Dann sind aus deiner Sicht Apps wie Facebook, UA-cam, Amazon veraltet ;)
Nein, früher natives Javascript mittlerweile aber axios (sehr zu empfehlen). Ansonsten arbeite ich bei größeren Applikationen im Frontend mit Angular und dort erfolgen die Ajax Request via HttpClient
.
Wenn man via Ajax eine PHP Datei requested, wie würde man die PHP Datei prinzipiell aufbauen? Wäre es dann wie ein Model oder würde man hier einfach nur prozeduran Code nutzen? Weil wenn man die Datei ja direkt aufruft, wird die index.php nicht geladen und somit kann es auch keinen Router geben.
Doch du kannst auch eine Route erstellen extra nur für Dateien.
github.com/BlackScorp/funci/blob/master/source/Core/routes.php#L7-L46
Ich habe diese Route erstellt damit man bei der Anfrage auf assets/js/jquery.min.js die eigentliche Datei im Vendor Ordner lädt. Also du kannst eine Assets route definieren. Im htaccess steht dann wenn eine Datei da ist, lade die normal, wenn die nicht existiert, leite die Anfrage weiter an index.php
Warum mögen viele das Wort jQuery nicht?
jQuery ist gerade am aussterben, selbst Bootstrap distanziert sich in Zukunft davon, die ganzen jQuery selectoren sind seit einiger Zeit obsolete geworden weil natives Javascript das auch alles anbietet. Mittlerweile lässt sich ein Großteil von jQuery nativ umsetzen und die modernen JavaScript Frameworks wie Vue, Angular,React haben eh ihre eigene bessere Lösungen.
jQuery erlaubt entwicklern zu viele dirty hacks
@@VitalijMik Dirty Hacks was denn zum Beispiel? Ich finde es persönlich bescheuert, dass man sagt wir nutzen jQuery nicht mehr. Wofür hat man es denn entwickelt? Jquery ist doch auch viel kürzer von der Syntax her als document.querySelector() als Beispiel.
Auch ist ein Ajax mit jQery kürzer und auch übersichtlicher.
jquery hat man entwickelt weil es zu Zeiten von IE 6,7 usw der Microsoft Browser eigene JavaScript Funktionen zur Verfügung gestellt hatte. Früher muste man im JavaScript schreiben, wenn IE dann mach das und das und wenn Chrome/Firefox dann mach was anderes.
Jquery hat die gesammte Logik gekappselt gehabt und ist dadurch berühmt geworden, weil du jetzt dich nicht mehr drum kümmern musstest. Siet jquery version 3 wurden einige Veraltete Browser nicht mehr unterstützt und somit sind die JavaScript Aufrufe eh einheitlich. Weil auch irgendwann Microsoft sich an ein Standard gehalten hat.
Zu den dirty hacks. Weil es ganz einfach ist $() zu verwenden, nutzten es viele überall. Das ist aber ein Globaler Zugriff und da werden Variablen global definiert. Jeder $() Aufruf, durchsucht den HTML Code nach dem selector. Kaum einer stellt eine Variable und arbietet damit weiter.
Nur weil etwas kürzer geschrieben wird, ist es nicht gleich übersichtlicher. Wir hatten in den Zeiten von C++ die Ungarische Notation verwendet, da waren variablen ganz kurz geschrieben, dennoch war alles unübersichtlich.
Ich behaupte, je einfacher eine Sache ist, desto einfacher ist es die Sache falsch zu benutzen. Ja jquery ist einfach, aber wenn man gerade erst mit Programmierung angefangen hat, stellt man zeimlich viel Unsinn damit an.
"Wofür hat man es denn entwickelt?" Das ist kein Argument ;-) Viele Bibliotheken, Frameworks sogar ganze Sprachen wurden mal entwickelt und werden heutzutage so gut wie nicht mehr genutzt.
jQuery mag zwar einfach (bzw. auch komfortabel sein), aber ich habe schon an der ein oder anderen Applikation mitgewirkt wo ich dann doch froh war das ein richtiges Framework wie Angular im Einsatz kam und man sich nicht wild was jQuery zusammen mixen will.
Selbst bei vielen simplen Webseiten fliegt jQuery raus und wird durch natives Javascript wieder ersetzt oder durch vue.js (ebenfalls ein interessantes Framework)
Weblio Problem: Jedes größere Framework macht alles komplexer und auch negativ wenn viel Arbeit abgenommen wird, dann geht auch Kreativität verloren.
man warum muss die scheisse so kompliziert sein?!
So ist das es halt. Es ist aber nicht kompliziert wenn man es verstanden hat ;)
@@VitalijMik Das Prinzip verstehe ich ja schon. Aber diese dutzenden Unterschritte hauen mich dann raus. Das alles für so eine simple Funktion, das ist doch einfach ineffizient
@@matze0402 da hast du recht und deshalb gibt es die fetchApi, die erkläre ich in einem anderen Video allerdings funktioniert die Fetchapi nicht in jedem Browser