PHP Include durch AJAX Code ersetzen?


Carrear

Erfahrenes Mitglied
#1
Hi Leute,

ich benutze auf einer Webseite,welche ich für ein paar Hobbymusiker programmiere ganz einfaches php include. D.h. ich hab ne hauptseit. die kann man (vereinfacht) in navi und content unterteilen.

In der navi habe ich nur links mit "index.php?site=xxx" - das xxx ist dann stellvertretend für eine datei. Gebe ich dort z.B. home ein wird die datei ./inc/home.inc.php im content Bereich eingebunden, gebe ich crew ein wird die datei ./inc/crew.inc.php im content bereich eingebunden.

In den .inc.php Dateien hab ich dann nur das PHP und HTML dass im Content Bereich genutzt wird drin, denn der <head> Bereich und so weiter ist ja schon alles in der index.php definiert. Dieses Include findet immer in einem bestimmten <div> Tag in der index,php statt.

Ich würde das ganze jetzt gerne aus praktischen Gründen ersetzen. Anstatt dem PHP Include würde ich das gerne mit AJAX lösen. Ich habe gehört, dass dann kein Refresh nötig ist. Es wäre klasse, wenn ich dafür nur die Links und den Content <div> tag anpassen müsste. ISt das so ohne weiteres möglich?

LG
Fatih
 
#2
Moin Fatih,

jo, sowas ist ohne weiteres möglich und unter Nutzung eines Frameworks in wenigen Augenblicken getan :)

Hier mal ein jQuery-Beispiel:
Code:
<a href="index.php?site=home" onclick="$('#content').load('inc/home.inc.php');return false;">
  Home
</a>
<div id="content"><?php /* php-Code zum includen */?></div>
Ich würde deine bisherige Variante aber nicht ersetzen, sondern erweitern...sonst bekommen Leute mit deaktiviertem JS nichts zu Sehen.
 

Carrear

Erfahrenes Mitglied
#3
Okay, von Frameworks hab ich schon gehört :D

Das sind doch sowas wie vorgefertigte Funktionen oder? Welches Framework müsste ich da einbinden (macht man doch so oder :D ?) um diese Art von Link nutzen zu können? Oder geht das so ohne weiteres?

Wenn ich das richtig verstehe ist das da hinter der Raute die ID des <div> Tags in dem dann der Inhalt der Datei geladen wird welche in deinem Beispiel in Klammern steht? Und der kann auch mit PHP Dateien umehen? Habe mal gelesen, dass der irgendwie PHP dann nicht mehr parsen kann.

Danke für deine schnelle und unkomplizierte Hilfe.

LG Fatih

EDIT: Ich sehe gerade das jQuery an sich so ein Framework ist, richtig? Sorry für diese Frage falls das stimmt :D Sehe dann allerdings noch ein kleines Problem. Manchmal sind die Include-Dateien die ich aufrufe abhängig von $_GET Variabeln, die ich ja über den Link weitergebe. Da ich kein Refresh habe wird sich ja auch der Link dann nicht mehr ändern. Welche Möglichkeit hat man denn da um die entsprechenden $_GET Werte doch noch mit zu übergeben (Für Datenbankabfragen).
 
Zuletzt bearbeitet:
#4
Hi,

möglich ist das durchaus, wobei ich persönlich finde, dass das kein besonders sinnvoller Einsatz von Ajax ist. Was spricht denn dagegen, die Seite komplett neu zu laden? Logisch gesehen ruft man ja eine neue Seite auf.

Wenn Du das trotzdem so machen willst, würde ich zumindest sicherstellen, dass die Seite auch ohne Javascript noch funktioniert. Das könnte z.B. so aussehen, dass Du den Navigationslinks onload jeweils einen onclick-Handler verpasst, der sich den site-Parameter aus der URL pult, per Ajax das Content-Div aktualisiert und false zurückgibt, damit der Browser nicht die URL im href-Attribut anfordert.

Eine ganz gute Einführung zum Thema Ajax findest Du im Kapitel 18 des openBooks "Javascript und Ajax" auf Galileo Computing.

Wenn Du noch weitere Javascript-Anwendungen wie z.B. Bildergalerien in einer Lightbox oder ähnliches verwenden möchtest, würde es sich auch lohnen, sich mal ein Framework wie JQuery anzuschauen. Damit kannst Du das ziemlich kurz und schmerzlos realisieren.

LG

Edit// Ups, das war jetzt sehr langsam... :-(
 

Carrear

Erfahrenes Mitglied
#5
Das könnte z.B. so aussehen, dass Du den Navigationslinks onload jeweils einen onclick-Handler verpasst, der sich den site-Parameter aus der URL pult, per Ajax das Content-Div aktualisiert und false zurückgibt, damit der Browser nicht die URL im href-Attribut anfordert.
Danke für die Antwort. Ich habe mich soeben schonmal ein bisschen schlau gemacht um überhaupt mal zu verstehen, was da so ungefähr passiert. Ich finde diese Einleitung zu jQuery gut gelungen und für mich verständlich: http://www.ajaxschmiede.de/jquery/jquery-ein-machtiges-und-effizientes-werkzeug/

Da ich ja die Seite ohnehin schon so gut wie fertig habe ist es kein Problem (sobald ich es verstanden habe) die Sache so laufen zu lassen, dass auch JS averse Nutzer die Seite noch gut benutzen können. Gründe hat das folgende. Bestimmte Sachen wie z.B. die Hintergrundmusik oder laufende Videos werden durch ein Reload im Prinzip nur gestört. Diese laufen außerhalb des Content Bereiches.
Außerdem ist der Betreiber der Seite wie gesagt eine Privatperson. Das ständige laden von Musik und Videos verbraucht ohnehin schon sehr viel Traffic. Da will ich versuchen an anderen Stellen zu sparen, auch wenn das am Ende nur der Tropfen auf dem heißen Stein ist.

Außerdem ist es ja vielleicht auch mal interessant für zukünftige Vorhaben. Da kann es mir nur recht sein ,dass ich mich jetzt "schon" damit beschäftige :)

Den oben zitierten Satz habe ich noch nicht verstanden. Aber ich denke wenn ich mir die Begriffe mal ansehe werd ichs schon peilen. Was sich jetzt für mich noch nicht geklärt hat sind die Fragen die ich oben in meinem EDIT gestellt habe. Also was ist mit den $_GET Variabeln und wie sieht es mit dem Parsen von PHP aus?

LG
Fatih
 
#6
Was das Parsen betrifft:
Das Dokument(bspw. home.inc.php) , welches dort angefordert wird, kommt schon geparst an, es enthält also keinen PHP-Code mehr.
Es wird genau das ausgeliefert, was du auch bekommen würdest, wenn du die home.inc.php direkt im Browser aufrufst.

Die $_GET-Variablen kannst du am besten per PHP für Javascript bereitstellen:


Code:
<script type="text/javascript">
var GET=<?php echo json_encode($_GET);?>;
</script>
Du hast da jetzt in JS eine Variable namens GET, welche den Inhalt des PHP-$_GET beinhaltet(allerdings als Objekt und nicht als Array)

Diese JS-Variable kannst du direkt beim Aufruf von load() in der URL verwenden:

Code:
<a href="index.php?site=home" onclick="$('#content').load('inc/home.inc.php?'+jQuery.param(GET));return false;">
Und die home.inc.php kann diese GET-Variable mit der Antwort auch ändern, bspw:
Code:
<pre>
<strong>sichtbarer HTML-Code:</strong>

<?php
print_r($_GET);
?>
</strong>
</pre>


<script type="text/javascript">
GET=<?php echo json_encode(array('andereVariable'=>'andererWert'));?>;
</script>
Bei der nächsten Betätigung wird derselbe Link die neu gesetzte GET-Variable übergeben :)
 

Carrear

Erfahrenes Mitglied
#7
Bei der nächsten Betätigung wird derselbe Link die neu gesetzte GET-Variable übergeben :)
Das ist ja echt interessant. Das heißt in deinem Beispiel oben wird der GET Parameter dann direkt aus dem Link genommen, den ich vorne im Tag eingebe und nicht aus der Adressleiste? Bei mir läuft Programmierung immernoch visuell ab - wenn ich GET Parameter nutze, dann ist das für mich das Ding da oben in der Adresszeile, davon muss ich mich jetzt wohl verabschieden :D

Okay, und die Möglichkeit mit der Veränderung des GET Parameters ist ja wirklich interessant. Hört sich an, als ob man das mal nutzen könnte, ich weiß zwar noch nicht wofür, aber da fällt mir sicher was ein :D

Und die neue Festsetzung des Parameters würde ich dann am Ende der Includeten Datei einsetzen oder?

Danke, für diese Antworten an dieser Stelle. Ihr habt innerhalb einer halben Stunde eine Menge Licht ins Dunkel gebracht.

LG
Fatih

EDIT:

Wo müsste ich denn das hier hinsetzen?

Code:
<script type="text/javascript">
var GET=<?php echo json_encode($_GET,false);?>;
</script>
 
#8
Das ist ja echt interessant. Das heißt in deinem Beispiel oben wird der GET Parameter dann direkt aus dem Link genommen, den ich vorne im Tag eingebe und nicht aus der Adressleiste? Bei mir läuft Programmierung immernoch visuell ab - wenn ich GET Parameter nutze, dann ist das für mich das Ding da oben in der Adresszeile, davon muss ich mich jetzt wohl verabschieden :D
Ja, für Javascript existiert $_GET nicht als Variable, für Javascript ist die URL in der Adresszeile des Browsers nur eine lange Zeichenkette, mehr nicht.

Du kannst diese JS-Variable GET dort also nach gutdünken füllen, entweder per PHP mit dem "echten" $_GET, oder mit irgendetwas anderem(allerdings in Form eines Objektes, sonst kann JQuery.param() nicht damit umgehen ).

Es ist halt deine Variable und keine vom User gesetzte Variable wie in PHP.
 

Carrear

Erfahrenes Mitglied
#10
Das musst/kannst du überall dort hinsetzen, wo du willst, dass diese JS-Variable verfügbar gemacht wird...es ist eigentlich egal, wo in der Seite du es hinschreibst, solange es dort steht, wo ein <script> -Element zugelassen ist.
Okay, also nur mal angenommen man ordnet es so an:

Code:
<script type="text/javascript">
var GET=<?php echo json_encode($_GET,false);?>;
</script>
<a href="index.php?site=home" onclick="$('#content').load('inc/home.inc.php?'+jQuery.param(GET));return false;">
Wie kann denn da oben schon der $_GET Parameter in GET eingelesen werden, wenn der Link erst danach komm. Oder interpretiere ich das richtig, wenn ich sage, dass der obere Teil so eine Art Funktion ist, die immer dann wenn ich den Ausdruck GET nutze das $_GET ausliest? Dementsprechende reicht es ja, wenn ich den oberen Teil ein einziges mal in eine JS Datei auslagere und diese im <head> Bereich einbinde, oder?

LG
Fatih
 
#12
Jo, das reicht. :)

dieses hier:
Code:
$('#content').load('inc/home.inc.php?'+jQuery.param(GET));return false;
....wird immer dann abgearbeitet, wenn der Link angeklickt wird.
Es holt sich den aktuellen Wert von GET...und GET ist global verfügbar.
Und wenn du GET zwischen 2 Klicks änderst, wird sich auch die aufegrufene URL ändern.
 

Carrear

Erfahrenes Mitglied
#13
Kann es sein, dass Du von zusätzlichen URL-Parametern in Deinen Navigationslinks redest? Die könntest Du doch einfach an die URL, die geladen werden soll, anhängen.

LG
Okay. Also kann ich die einfach mit angeben? Das wusste ich ja nicht. Dann ist es ja wieder ganz easy.Okay, ich will eure Freundlichkeit auch nicht überstrapazieren. Ich versuche morgen erstmal das vorhandene umzusetzen und dann mal sehen was auf mich zukommt :)

Auf jeden Fall ein echt großes Dankeschön an euch, für die Antworten und die Geduld die ihr sicher aufbringen musstet um meine bohrenden Fragen zu beantworten.

Ich lasse den Thread erstmal noch als unerledigt, wer weiß was morgen kommt. Aber bis dahin erstmal eine gute Nacht euch beiden.

LG
Fatih
 

Carrear

Erfahrenes Mitglied
#14
Ich habe es jetzt so gemacht. jQuery normal eingebunden im <head> Bereich und dann nutze ich folgenden Link:

Code:
<a href="index.php?site=crew&id=5" onclick="$('#outer2').load('inc/crew.inc.php?id=5');return false;"> Home </a>
Da kommt leider ein kleines Problem auf. In der Datei, die ich hier über den Link aufrufe nutze ich ein JS Script. Ihr werdet es wahrscheinlich kennen. Es nennt sich ImageFlow. Das wird dann einfach gar nicht angezeigt. Wie kommt das zu Stande?

Wenn ich SvenMitels Art nutzen möchte klappt irgendwie gar nichts mehr. Ich habe das versucht folgendes im <head> Bereich zu positionieren:

Code:
<script type="text/javascript"> var GET=<?php echo json_encode($_GET);?>; </script>
Aber dann wird komischerweise gar nichts mehr angezeigt außer meinem <body> Backgroundpicture. Okay, ist aber nicht weiter schlimm, weil die andere Version ja funktioniert. Bis auf das oben genannte Problem.
 
#15
Wenn ich SvenMitels Art nutzen möchte klappt irgendwie gar nichts mehr.
Dann hast du etwas falsch gemacht-ich hätte es nicht gepostet, wenn es nicht funktionieren würde.

In der Datei, die ich hier über den Link aufrufe nutze ich ein JS Script. Ihr werdet es wahrscheinlich kennen. Es nennt sich ImageFlow. Das wird dann einfach gar nicht angezeigt. Wie kommt das zu Stande?.
Dieses ImageFlow wird beim onload initialisiert.
Wenn du neuen Inhalt abholst, feuert dieser Event nicht erneut...es wird also nichts initialisiert.
Du müsstest daher die Funktion, die die Initialisierung vornimmt, als callback der load()-Methode aufrufen.

Code dazu kann ich aus Lizenzgründen nicht posten....diese Funktion steht in der imageflow.js als allerletztes.
 
#16
Hi,

Dann hast du etwas falsch gemacht-ich hätte es nicht gepostet, wenn es nicht funktionieren würde.
ich glaube, er möchte gar keine GET-Parameter durchschleppen, sondern nur die weiteren URL-Parameter (ausser "site") aus dem jeweiligen Navigationslink übergeben. Er wusste wohl nur nicht, dass er sie einfach nur hinter die URL tippen muss, die er load() übergibt. Seine index.php ist jetzt vermutlich so aufgebaut, dass sie ohne Parameter aufgerufen wird und initial einfach home.inc.php oder so inkludiert. Dann hat's natürlich keine $_GET-Parameter.

LG
 

Carrear

Erfahrenes Mitglied
#17
Dieses ImageFlow wird beim onload initialisiert.
Wenn du neuen Inhalt abholst, feuert dieser Event nicht erneut...es wird also nichts initialisiert.
Du müsstest daher die Funktion, die die Initialisierung vornimmt, als callback der load()-Methode aufrufen.

Code dazu kann ich aus Lizenzgründen nicht posten....diese Funktion steht in der imageflow.js als allerletztes.
Ja, ich denke zu wissen welche Passage du meinst. Das ist ja der Bereich in dem man dann auch verschiedene Parameter umstellen / einfügen kann um das Aussehen der Gallerie zu beeinflussen. Aber diese JS Datei rufe ich doch ohnehin im <head> Bereich der index.php aus, also müsste es doch eigentlich geladen werden oder? Aber das mit dem Callback / load verstehe ich nicht. habe versucht es zu googeln, da kommt aber nicht veil bei rum. Habe das hier gefunden: http://community.devexpress.com/forums/p/68526/233105.aspx Da wird halt gesagt dass man JS nicht als callback loaden kann.

Achso und das war keine Unterstellung, dass du mir falschen Code gesendet hast :D Ich denke da hab ich wohl irgendwas falsch gemacht.

LG
Fatih
 
#18
Ja, ich denke zu wissen welche Passage du meinst. Das ist ja der Bereich in dem man dann auch verschiedene Parameter umstellen / einfügen kann um das Aussehen der Gallerie zu beeinflussen. Aber diese JS Datei rufe ich doch ohnehin im <head> Bereich der index.php aus, also müsste es doch eigentlich geladen werden oder?
Es geht nicht darum, ob die Datei geladen wird, sondern ob/wann sie etwas macht...und das steht in den letzten 5 Zeilen des Skriptes.

Das, was du dort gefunden hast, hat nichts mit dem hier zu Tun, dort geht es um serverseitiges JScript mit ASP.
Hier wird ausschliesslich clientseitiges(also vom Browser verarbeitetes) Javascript eingesetzt.
 
#20
Wenn du genau zählst, wirst du sehen, dass in der 1. der letzten 5 Zeilen(Zeile 1186) jenes steht:
Code:
domReady(function()
Das ist der Funktionsaufruf, von dem ich rede...alles was danach folgt, kommt nur zum Tragen, wenn der domReady-Event eintritt.

Und wenn dieser Event nicht eintritt, machen die 1185 Zeilen davor....garnichts.
 

Neue Beiträge