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:
Alles anzeigen
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
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...
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
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
- <html><head>
- <script type="text/javascript">
- <!--
- function sendRequest(digit) {
- var req;
- try {
- req = window.XMLHttpRequest?new XMLHttpRequest():
- new ActiveXObject("Microsoft.XMLHTTP");
- } catch (e) {
- //Kein AJAX Support
- }
- req.onreadystatechange = function() {
- if ((req.readyState == 4) && (req.status == 200)) {
- var update = new Array();
- var response = req.responseText;
- if(response.indexOf('||' != -1)) {
- update = response.split('||');
- for(i=0; i<update.length; i+=2)
- document.getElementById(update[i]).innerHTML = update[i+1];
- }
- }
- };
- req.open('POST', 'func.php');
- req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- req.send('s='+digit);
- // damit links nicht an den browser durchgeleitet werden
- return false;
- }
- //-->
- </script>
- <style type="text/css">
- <!--
- div {
- float:left;
- width:25%;
- font-size:6px;
- background-color:#e5e5e5;
- margin:10px;
- height:200px;
- width:175px;
- }
- //-->
- </style>
- </head>
- <body>
- <p /><a href="#" onclick="return sendRequest('x')">Alle Felder mit Beispielinhalten füllen</a>
- <p />Klicken Sie auf die Boxen um einen neuen Inhalt nachzuladen
- <form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" class="example">
- <div id="content0" onclick="sendRequest(0)">
- </div>
- <div id="content1" onclick="sendRequest(1)">
- </div>
- <div id="content2" onclick="sendRequest(2)">
- </div>
- </form>
- </body></html>
Quellcode
- <?
- function dummyOutput($beispiel, $i, $htmlID)
- {
- echo $htmlID.$i.'||';
- foreach($beispiel as $word) {
- echo $word." ".$i." ";
- }
- echo '||';
- }
- $htmlID = 'content';
- $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');
- shuffle($beispiel);
- if($_POST['s'] == 'x') {
- for($i=0; $i<3; $i++) {
- dummyOutput($beispiel, $i, $htmlID);
- }
- } else {
- dummyOutput($beispiel, $_POST['s'], $htmlID);
- }
- ?>
Wenn ihr die func.php auf eurem Webserver folgendermaßen mit '''func.php?s=2''' aufruft, dann solltet ihr in etwa folgenden Inhalt sehen
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...
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
37.033 mal gelesen