Alternative "Inhalte mit AJAX & PHP nachladen"

  • Alternative "Inhalte mit AJAX & PHP nachladen"

    Hallo Leute ;)

    erstmal ein dickes Lob an alle! Das forum is imho mit eines der besten in Sachen Coden. Hab hier schon viele nützliche Sachen gefunden die ich bei meinen Projekten dann auch erfolgreich realisieren konnte!

    Hab mir natürlich alle How-To´s im Wiki angeschaut. Dabei ist mir aufgefallen das einige dinge anders gemacht werden. Ich will natürlich nicht sagen das sie schlecht gemacht wurden, im gegenteil. Aber ich vermute mal das es auch Leute geben wird die nach einer Art "Universal" lösung suchen... Zumindest was die AJAX funktionen betrifft.

    Ich meine dabei konkret die
    - function sendRequest(digit)
    - function handleResponse()


    Ich persönlich mag es überhaupt nicht "Content" und "Code" zu mischen. Deshalb lager ich alles in externe Dateien aus und includiere die je nach bedarf. Ob das nun Klassen sind, header oder footer, JS oder PHP Files.

    Deshalb möcht ich hier mal "meine" Lösung vorstellen, vlt kennt der eine oder andere das schon, oder sucht eben genau danach.

    Mir ist natürlich klar das die da gezeigten beispiele für die How-To´s geschrieben wurden, mit bedacht auf größe und überschaubarkeit. Damit die Sache auch für "Neulinge" etwas leichter erlernbar ist bzw wird :)

    Hier ein kleiens beispiel...

    Als erstes die aufrufende php datei (html geht auch;)

    Quellcode

    1. Datei: main.php
    4. <?PHP
    5. echo<<<txt
    6. <html>
    7. <head>
    8. <title>titel der seite</title>
    9. <script language="javascript" src="action.js"></script>
    10. </head>
    11. <body>
    12. <a href="javascript:test1()">Zeige Test an</a> <br><br>
    13. <a href="javascript:test2(129756462346)">Zeige Test2 an</a> <br><br>
    14. <hr noshade="1">
    16. <div id="ajax"></div>
    17. </body>
    18. </html>
    19. txt;
    20. ?>
    Alles anzeigen


    Der wert in klammern bei dem aufruf

    Quellcode

    1. <a href="javascript:test2(129756462346)">Zeige Test2 an</a>


    kann frei geändert werden, um zu sehen das tatsächlich dieser wert übergeben wird. wer strings übergebn möchte muss den wert im aufruf in ' ' setzen. z.b.

    Quellcode

    1. <a href="javascript:test2('ajaxtest')">Zeige Test2 an</a>


    Quellcode

    1. Datei: action.js
    2. function createRequestObject() {
    4. var ro;
    5. //man könnte hier natürlich auch mit try..catch arbeiten, aber bis jetzt hatte ich
    6. // noch keine Probleme mit dem Code. Läuft vorzüglich im FF genauso wie im IE
    7. if(navigator.appName.search("Microsoft") > -1) {
    8. if(ro = new ActiveXObject("Microsoft.XMLHTTP"));
    9. else if (ro = new ActiveXObject("MSXML2.XMLHTTP"));
    11. } else {
    13. ro = new XMLHttpRequest();
    14. }
    16. return ro;
    17. }
    19. var http = createRequestObject();
    23. function handleResponse() {
    25. if((http.readyState == 4) && (req.status == 200)){
    27. var response = http.responseText;
    28. var update = new Array();
    30. if(response.indexOf('|' != -1)) {
    32. update = response.split('|');
    33. //alert(update); //für debuging
    34. document.getElementById(update[0]).innerHTML = update[1];
    35. }
    36. }
    37. }
    Alles anzeigen


    mit folgendem aufruf ( welcher auch in der action.js Datei stehen muss ) kann man
    dann die gewünschten aktion ausführen lassen. Dabei entsteht der effekt, das das eben dargestellte bei nochmaligen ausführen wieder verschwindet. manchmal nützlich, machmal auch störend ;)


    Quellcode

    1. function test1() {
    2. if (document.getElementById('ajax').innerHTML != '') { // Prüfen ob Inhalt vorhanden
    3. document.getElementById('ajax').innerHTML = ''; // wenn vorhanden, inhalt entfernen
    4. } else { // wenn nicht, lade daten nach
    5. http.open('get', 'rpc.php?act=test1');
    6. http.onreadystatechange = handleResponse;
    7. http.send(null);
    8. }
    9. }
    11. // hier ein beispiel mit parameterübergabe an die funktion
    14. function test2(uid) {
    15. if(document.getElementById('ajax').innerHTML != '') {
    16. document.getElementById('ajax').innerHTML = '';
    17. } else {
    18. http.open('get', 'rpc.php?act=test2&uid='+uid);
    19. http.onreadystatechange = handleResponse;
    20. http.send(null);
    21. }
    22. }
    Alles anzeigen



    Quellcode

    1. Datei: rpc.php
    3. <?PHP
    4. if($_REQUEST['act'] == "test1") echo "ajax|".test();
    5. if($_REQUEST['act'] == "test2") echo "ajax|".test2($_REQUEST['uid']);
    8. function test()
    9. {
    10. $out.= "<h3>Ich bin die TEST Funktion. Ich wurde per AJAX und PHP erstellt!</h3><br>";
    11. $out.= "<p>Eine Mehrzeilige ausgabe ist absolut kein Problem.Allerdings<br>";
    12. $out.= "besteht mit dieser variante, das von mir verhasste problem der vermischung<br>";
    13. $out.= "von Content und Code</p>";
    14. $out.= "<center><b>ich kann aber dafür PHP benutzen </b></center><br><br>z.B.:";
    15. $out.= 'Deine IP ist: '. $_SERVER['REMOTE_ADDR'].' usw.';
    16. return $out;
    17. }
    19. function test2($id)
    20. {
    21. $out.= "<h3>Ich bin die 2. TEST Funktion. !</h3><br>";
    22. $out.= "<p>Mir wurde ein wert(zahl in dem fall, string würde aber auch gehen mit einer kleinen änderung) als variable übergeben.<br>";
    23. $out.= "mit dem kann ich natürlich arbeiten und darauf zugreifen.";
    24. $out.= "</p><br>";
    25. $out.= "Der Wert lautet: ". $id.'<br>';
    26. $out.= 'Have a nice day';
    27. return $out;
    28. }
    30. ?>
    Alles anzeigen




    Der Code ist getestet und funzt einwandfrei.

    bei fragen einfach fragen ;)

    hoffe es hilft falls jemand danach suchen sollte....
    habe bis jetzt noch keine schlechten erfahrungen mit dieser vorgehensweise gemacht und kann es daher auch für größere projekte ohne weiteres empfehlen...

    natürlich lässt sich das ganze ohne weiteres anpassen ;)


    mfg der BendIt
    Dateien

    • ajax.zip

      (1,86 kB, 330 mal heruntergeladen, zuletzt: )
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • Hi,

    erstmal danke fürs Lob und deinen "alternativen" Code.
    Das mit den HowTos hast du richtig verstanden. Kurz und effizient. Für kleine Sachen lohnt es sich auch nicht auf die großen Klassen zurückzugreifen.

    Denke dennoch, dass ich in Zukunft mehr auf Klassen wie Prototype bzw. script.aculo.us eingehen werde, weil dort eben schon die coolen Sachen wie Queue und Stack implementiert sind.

  • Hi

    gern geschehen, ist meine ehrliche meinung ;)


    Vermutlich wird der trend in die richtung gehen. Allerdings hoffe ich irendwie trotzdem das es auch in zukunft keine WYSIWYG-Anwendungen für AJAX / PHP / CGI / PERL / etc geben wird. Ich find solche frameworks zwar nicht schlecht, aber ich selber finde es besser solche sachen selber zu coden... schon weil ich dann weis was, wie, wo und wann passiert... Old School hätt ich beinahe gesagt ;)


    Zu meinem Code: Mit klassen wollt ich in dem beispiel nicht grade arbeiten, zumal es ja keine große änderung zu dem ist, was eh schon im wiki steht... nur halt ein wenig "universeller" :P


    so long

    der BendIt
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • servus,

    ich habe mir deine datei mal runtergeladen und ein bischen mit getestet. funktioniert wunderbar.

    jetzt hab ich nur eine frage..

    ich wollte in der rpc.php in einer function ein php include einbauen.
    nur funktioniert dann garnix mehr.

    Quellcode

    1. function test()
    2. {
    3. $foo = include 'time.php';
    4. $out.= "Die Uhrzeit ist: ". $foo.'<br>';
    5. return $out;
    6. }



    muss dazu sagen, das ich im ajax bzw. javascript bereich nicht wirklich fit bin

  • Hi,


    das prinzipielle problem bei der sache ist, das jeglicher content nur per return anweisung ausgegeben wird bzw werden kann. wenn du also in deiner 'time.php' nur echo anweisungen mit output hast, müsstest du

    Quellcode

    1. function test()
    2. {
    3. $out.= include 'time.php';
    4. $out.= "Die Uhrzeit ist: ". $foo.'<br>';
    5. return $out;
    6. }


    benutzen. bin mir jetzt aber nicht ganz sicher ob es funzt.

    zumal mir auch der aufruf

    Quellcode

    1. $foo = include'irgendwas.php';


    nicht geläufig ist und ich irgendwie auch bezweifel das dass so funzt^^

    aber ich lass mich gern eines besseren belehren ;)

    in wie weit es zu problemen kommt wenn in deiner 'time.php' auch andere anweisungen stehen als echo bzw print... also z.b. ob es mit funktionen innerhalb der inlcudierten datei geht.

    kannst es ja mal testen, bei mir ist es bisher nicht nötig gewesen den content auch noch auszulagern, obwohl ich immer versuche content vom code zu trennen

    [edit]

    Du kannst allerdings außerhalb ohne probleme php files includen... sprich alles was außerhalb jeglicher steuerungsfunktion steht kann php üblich benutzt werden ;) am besten direkt unter <?PHP

    [/edit]

    mfg BendIt
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!

  • in den dateien die inlcude werden sollen, sind noch andere funktionen und echos.

    mein ziel war es, den inhalt durch des divs einfach mit verschiedenen includes zu ädern ohne die ganze seite neu zu laden.

    daher dachte ich man könnte einfach in die function test nur ein include time.php
    einzufügen. das hat er aber auch nicht gemacht. aber ich werd da nochmal gucken, wie das läuft wenn die includes ausserhalb der function test sind

  • hm also ich hab es selber noch nicht probiert

    aber es sollte eigentlich mit

    Quellcode

    1. <?PHP
    2. include 'foo.php';
    4. //oder mit dem include in der funktion.
    6. function foo()
    7. {
    8. include 'foo.php';
    10. $out.= $foo;
    11. return $out;
    12. }
    13. ?>
    Alles anzeigen


    funktioieren

    aber auch nur, wenn du in der includierten datei einen output z.b. in der form

    Quellcode

    1. Datei: foo.php
    3. <?PHP
    4. $bar=<<<text
    6. <html>
    7. <head></head>
    8. <body>
    9. .
    10. .
    11. .
    12. etc.
    13. </body>
    14. </html>
    15. text;
    16. ?>
    Alles anzeigen


    hast kannst du in der function foo auf die variable $bar zugreifen und die dann ausgeben...
    .:Reden Ist Schweigen und Silber Ist Gold:.

    real programmers don't comment their code: if it was hard to write, it should be hard to read!