Content preload per Ajax ...
wurde 1402x gelesen
Content Preload ...!
Im Zeitalter des Web2.0 sehen die Seiten optisch besser aus als der Content. Grund dafür ist das Web2.0 wofür es
keine feste Definition gibt. Denn Web2.0 beschreibt nur den potenziellen Sprung der Internetbranche Richtung
Desktopanwendungen. Immer öfters sieht man, wie Internetseite Desktopanwendungen ähneln. Doch um solch eine
Internetseite zugestalten, ist garnicht so einfach.
Daher auch wieder Workshop. Ich beschreibe euch heute, wie man einen gewählten Content per Ajax neuladen kann,
ohne die komplette Seite reloaden zu müssen. Vorteil der ganzen Sache ist: Es sieht ersten total schön aus ...,
der Benutzer weiß was passiert ... und letzens, das Laden wird beschleunigt, da nur der Maincontent geladen wird.
Jetzt fragt Ihr euch mit Sicherheit, ob man dieses Skript auch mit PHP verbinden kann. Aber selbstverständlich
ist das möglich ... ;) Vondaher, fangen wir mal an ...
Was wird gebraucht?!
- Ajax Prototype Framework
- Overlay CSS
- Deine Internetseite
- Etwas Javascript Erfahrung
Ja genau, mehr wird für diese Preload Funktion nicht gebraucht!!!
Was ist das Ajax Prototype Framework?!
Das Ajax Prototype Framework, ist eine Art Bibliothek mit diversen Funktionen. Wir brauchen dieses Framework
um eine bestimmte Funktion ausführen zukönnen, damit der Content geladen werden kann. Dies geschieht über
das GET in Ajax.
Der Anfang ...
Als erstes, solltet Ihr eure Seite auf einen Webserver laden ... ggf. natürlich auch Lokal. Da gibt es keinen
Unterschied. Achja, bevor ich es vergesse, nicht das dann Kommentare kommen, wie z.B: Geht bei mir nicht ...
oder sonste was ... Daher, prüft vorher ob bei euch Javascript aktiviert ist oder nicht.
Der Aufbau der CSS Datei
.overlay {
width: 90%;
height: 100%;
background-color: #FFF;
position: absolute;
z-index: 100;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
}
Kurze Beschreibung für CSS
Mit ".overlay" definieren wir die Klasse, die im HTML aufgerufen werden soll, damit das Overlay auch nur dann
aufgerufen werden soll, wenn es gebraucht wird.
Mit "width: 90%" wird die Breite des Overlay festgelegt. Hierbei bitte beachten, das bei diversen Browsern,
bei 100% die komplette Seite etwas vergrößert wird. Daher nutze ich hier im Workshop 90%
Mit "height: 100%" legen wir die Höhe des Overlays fest.
"background-color: #FFF;" legt die Hintergrundfarbe für das Overlay fest. Hier könnt Ihr so kreativ sein wie Ihr
wollt, wobei ein etwas transparenter weißer Hintergrund hübscher aussieht als andere .. ;)
"position: absulute;" legt fest, welche Position das Overlay haben soll. Auf wünsch könnt ihr noch per "top: 15px;"
die Position des Overlay verschrieben. Beachtet aber das der Internet Explorer gerne mal Probleme damit hat!
Mit "z-index: 100;" legen wir die Position des Layers fest. D.h mit z-index: 100 liegt der Layer ganz oben und die
restliche Seite darunter ...
"filter:alpha(opacity=80);" berechnet die Effekte für das Overlay.
"-moz-opacity: 0.8;" berechnet den Transparenten Effekt. Das dient dazu, das wir die Seite im Hintergrund
währen des Ladevorgangs sehen können.
und zum Schluss kommen wir zu "opacity: 0.8;" Ist genau das gleiche wie "-moz-opacity: 0.8;" jedoch für sorgt es
dafür das auch andere Browser wissen, was zutun ist.
Der Aufbau des Ajaxscriptes
<script type="text/javascript">
var loadSite = function(SITE) {
var loadIMG = "<br><br><br><br><br><br><center>Seite wird geladen ...!</center>";
document.getElementById('content').innerHTML = loadIMG;
document.getElementById('back').className = "overlay";
var anti_cache_randnum = Math.floor(Math.random() * 99999999999);
var adr = SITE+'.php?anti_cache_randnum=' + anti_cache_randnum;
var opt = {
method: 'get',
parameters: 'anti_cache_randnum=' + anti_cache_randnum,
// Handle successful response
onComplete: function(t,j) {
document.getElementById('back').className = "";
document.getElementById('content').innerHTML = t.responseText;
}
};
new Ajax.Request(adr, opt);
}
</script>
"var loadSite = function(SITE)" dient dazu, das man diese Funktion über folgenden Link aufrufen kann:
"javascript:loadSite('test');". In diesem Beispiel wollen wir die PHP Seite "test" laden. Achtung, hier bitte
keine Dateiendung mitgeben!!!
"var loadIMG" ist eine Variable, die dazu dient, den in der Mitte der Seite den Text "Seite wird geladen ...!"
anzuzeigen. Natürlich ist es auch möglich dort ein Image einzufügen. Dies bleibt aber jedem selbst überlassen.
"document.getElementById('content').innerHTML" füllt beim aufrufen den Content Bereich in der HTML Datei.
Hier muss darauf geachtet werden, das der Content Bereich auch die ID "content" besitzt!
"document.getElementById('back').className" Hier kommt unsere CSS Klasse zum Einsatz, die wir voher definiert haben.
"var anti_cache_randnum = Math.floor(Math.random() * 99999999999);" diese funktion ist extrem wichtig. Denn
durch das generieren einer Zufallszahl, wird verhindert, das der Browser unsere Anfrage bei sich Lokal
zwischen speichert!
"var adr = SITE+'.php?anti_cache_randnum=' + anti_cache_randnum;" Hier sehen wir, das nun der Link denn wir mit
"test" befüllt haben zum Einsatz kommt. Denn "test" wurde als Variable an Javascript übergeben und ersetzt nun
den Platzhalter SITE in dieser Funktion. Der Link wurde folgend aussehen:
"test.php?anti_cache_randnum=546546565411454" dieser wird an das PHP Script geschickt.
"var opt" führt nun den Request durch. D.h es senden die Informationen "test.php?anti_cache_randnum=546546565411454"
an die test.php und wartet bis diese ausgeführt wird. Hier auch bitte darauf achten, das wenn mehrere Variablen
mit geschickt werden sollen, auch die Parameter dem entsprechend angepasst werden.
Sobald nun der HTML Code komplett von der test.php Seite zurück geliefert wurde, wird die interne Funktion
"onComplete: function(t,j)" ausgeführt und das Overlay in der HTML Datei ersetzt. Genauso wie der Content Bereich
mit den geschickten Daten auch ausgefüllt wird!
Zum Schluss wir noch eine Klasse aufgerufen die sich im Ajax Framework befindet. Das wars ... :)
Die HTML Datei
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="main.css" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
var loadSite = function(SITE) {
// Die Zufallszahl wird an den Ajax-Requeststring angehängt und verhindert das der Browser den Request mit seinem Cache bedient
document.getElementById('content').innerHTML = "<br><br><br><br><br><br><center><b>Seite wird geladen ...!</b></center>";
document.getElementById('back').className = "overlay";
var anti_cache_randnum = Math.floor(Math.random() * 99999999999);
var adr = SITE+'.php?anti_cache_randnum=' + anti_cache_randnum;
var opt = {
method: 'get',
parameters: 'anti_cache_randnum=' + anti_cache_randnum,
// Handle successful response
onComplete: function(t,j) {
document.getElementById('back').className = "";
document.getElementById('content').innerHTML = t.responseText;
}
};
new Ajax.Request(adr, opt);
}
</script>
<title>Mein Preload ...</title>
</head>
<body id="back" class="">
<table align="left" width="800" height="500" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#00CC33"height="50" style="padding:8px;"><a href="javascript:loadSite('test');">Starte Preload ...</a></td>
</tr>
<tr>
<td bgcolor="#CCCCCC" height="350" id="content" style="padding:10px;"> </td>
</tr>
<tr>
<td bgcolor="#999999" height="100"> </td>
</tr>
</table>
</body>
</html>
Hier gibt es wenig zuerklären. Außer halt das die Overlay CSS, das Framework und die Funktion eingebunden werden müssen ....
So, ich hoffe mal, das euch dieser Workshop gefallen hat ... :) Feedback ... gerne ... ;)
Gruß
Jimmi
