Monday, October 17th 2011, 6:41pm
Tags
ajax inhalte,
ajax tutorial datenbank,
php nachladen ajax,
sendRequest
Abstract
Dieses Tutorial soll ihnen zeigen, wie sie mit Hilfe von AJAX Inhalte nachladen können, die mit PHP verarbeitet wurden.
Article
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:
|
HTML Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<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>
|
|
|
PHP Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<?
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
|
|
Source code
|
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...
|
|
JavaScript Code
|
1
2
3
4
|
update = response.split('||');
for(i=0; i<update.length; i+=2) {
document.getElementById(update[i]).innerHTML = update[i+1];
}
|
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
|
|
Source code
|
1
2
|
array[0] = content2
array[1] = ist 2 eine 2 eigene 2 die 2 einige 2 mit 2 Ihr 2 Datenbank 2 und 2 herzlichst 2....
|
Request deletion
report critical content
