Inhalte mit AJAX & PHP nachladen

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Dieses Tutorial soll ihnen zeigen, wie sie mit Hilfe von AJAX Inhalte nachladen können, die mit PHP verarbeitet wurden.
    Je nachdem, wie der User interagiert, verarbeitet PHP die Seite und liefert unterschiedliche Inhalte.

    Das Beispiel wurde bewusst praxisfern erstellt.
    Ich denke aber, dass man den Code so leichter nachvollziehen kann. Durch den spielenden Einsatz von PHP hoffe ich euch die Angst vor AJAX nehmen zu können, so dass ihr eure eigenen Experimente mit AJAX starten könnt.

    Hier nun die zwei Dateien:

    Quellcode

    1. <html><head>
    3. <script type="text/javascript">
    4. <!--
    5. function sendRequest(digit) {
    6. var req;
    7. try {
    8. req = window.XMLHttpRequest?new XMLHttpRequest():
    9. new ActiveXObject("Microsoft.XMLHTTP");
    10. } catch (e) {
    11. //Kein AJAX Support
    12. }
    14. req.onreadystatechange = function() {
    15. if ((req.readyState == 4) && (req.status == 200)) {
    16. var update = new Array();
    17. var response = req.responseText;
    18. if(response.indexOf('||' != -1)) {
    19. update = response.split('||');
    20. for(i=0; i<update.length; i+=2)
    21. document.getElementById(update[i]).innerHTML = update[i+1];
    22. }
    23. }
    24. };
    25. req.open('POST', 'func.php');
    26. req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    27. req.send('s='+digit);
    29. // damit links nicht an den browser durchgeleitet werden
    30. return false;
    31. }
    32. //-->
    33. </script>
    35. <style type="text/css">
    36. <!--
    37. div {
    38. float:left;
    39. width:25%;
    40. font-size:6px;
    41. background-color:#e5e5e5;
    42. margin:10px;
    43. height:200px;
    44. width:175px;
    45. }
    46. //-->
    47. </style>
    48. </head>
    49. <body>
    51. <p /><a href="#" onclick="return sendRequest('x')">Alle Felder mit Beispielinhalten füllen</a>
    53. <p />Klicken Sie auf die Boxen um einen neuen Inhalt nachzuladen
    55. <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" class="example">
    57. <div id="content0" onclick="sendRequest(0)">
    58. </div>
    60. <div id="content1" onclick="sendRequest(1)">
    61. </div>
    63. <div id="content2" onclick="sendRequest(2)">
    64. </div>
    66. </form>
    68. </body></html>
    Alles anzeigen


    Quellcode

    1. <?
    2. function dummyOutput($beispiel, $i, $htmlID)
    3. {
    4. echo $htmlID.$i.'||';
    5. foreach($beispiel as $word) {
    6. echo $word." ".$i." ";
    7. }
    8. echo '||';
    9. }
    11. $htmlID = 'content';
    13. $beispiel = explode(' ', 'Herzlich Willkommen im Coder Wiki Dieses Projekt ist in Kooperation mit dem Easy-Coding Forum entstanden und soll als Anlaufstelle für Anfänger und Fortgeschrittene dienen Ihr seid herzlichst Willkommen eigene Beiträge zu veröffentlichen denn nur so kann ein Wiki existieren Wir hoffen die Datenbank in den nächsten Tagen mit zahlreichen How Tos Tutorials und Algorithmen füttern zu können Das Wiki soll lange existieren und zwar länger als einige Gratis-Hoster benutzt daher bitte die Upload Funktionen für Bilder und Dateien. Aus Sicherheitsgründen ist der Upload jedoch passwortgeschützt Schreibt mir einfach eine E-Mail wenn Ihr Uploads habt. Ich schicke euch dann schnellstmöglichst das aktuelle Passwort');
    15. shuffle($beispiel);
    17. if($_POST['s'] == 'x') {
    19. for($i=0; $i<3; $i++) {
    20. dummyOutput($beispiel, $i, $htmlID);
    21. }
    23. } else {
    25. dummyOutput($beispiel, $_POST['s'], $htmlID);
    26. }
    27. ?>
    Alles anzeigen



    Wenn ihr die func.php auf eurem Webserver folgendermaßen mit '''func.php?s=2''' aufruft, dann solltet ihr in etwa folgenden Inhalt sehen

    Quellcode

    1. content2||ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst 2 so 2 den 2 Tagen 2 Upload 2 Wir 2 Beiträge 2 dem 2 soll 2 Anfänger 2 der 2 Gratis-Hoster 2 Willkommen 2 in 2 und 2 Schreibt 2 Tos 2 W


    Vor den doppelten Tabulatorsymbolen steht hier content2.. danach ein Text.

    Da ihr bestimmt schon ein bisschen mit den AJAX Funktionen auf der formular.php gespielt habt, wisst ihr sicherlich, dass, wenn ihr auf die 2te Box klickt, diese mit dem Inhalt der Ausgabe gefüllt wird.

    Jetzt kommt JavaScript zum Einsatz. Betrachtet Zeile 40...

    Quellcode

    1. update = response.split('||');
    2. for(i=0; i<update.length; i+=2) {
    3. document.getElementById(update[i]).innerHTML = update[i+1];
    4. }


    Der gelesene Inhalt wird erst in ein Array gesplittet und dann wird dem HTML Element "content2" der Inhalt des nächsten Array Elements zugeordnet

    Das Array würde im genannten Beispiel folgendermaßen aussehen

    Quellcode

    1. array[0] = content2
    2. array[1] = ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst 2....

    38.389 mal gelesen