Login

#1 (**permalink**) 13-12-2008, 09:15

Hallo,

ich sehe es neuerdings immer öffter das in Webseite eine Art Preeloader arbeitet.

Sprich alles was schnell aufgebaut wird wie Kopf und navi, ist sofort da und das andere zb. der Mainbereicht der etwas länger braucht läd mit ein (ich denke) rotierenden gif welches für knapp eine sekunde zu sehen ist... und dann erst erscheid der mainbereich fertig.

Aber wie geht das?
Ist es in PHP nicht so das von oben nach unten alles gelesen wurd und dann zum Schluß ausgegeben wird?

Der Aufbau einer PHP Datei sieht bei mir meist in etwa so aus:

PHP-Code:


			
<?php



$seite = '<div>das ist der header</div>';

$seite .= '<div style="float:left">das ist die navi'>;

$seite .= '<div>das ist der mainbereich'>;

$seite .= '<div style="clear:both">das ist der footer'>;



echo $seite;



?>

Aber wenn ich es so mache wird ja erst alles in einer Variable gespeichert und am ende ausgegeben oder sollte ich ab und ann ein echo einfügen das die seite in mehrreren Abschnitten angezeigt wird?

Beispiel:

PHP-Code:


			
<?php



$seite = '<div>das ist der header</div>';

$seite .= '<div style="float:left">das ist die navi'>;

echo $seite;

$seite = '<div>das ist der mainbereich'>;

$seite .= '<div style="clear:both">das ist der footer'>;



echo $seite;



?>

Ich denke wenn ich es mit dem echo mache wird sicher der schnelle header und die navi angezeigt und der mainbereich (wo zum beispiel eine externe seite gecrawlt wird) kommt dann später nach.
Aber was ist dann mit dem Footer? Der wird ja dann auch erst angezeigt wenn der Mainbereich fertig ist bzw. der includete crawler fertig ist.

Oder mache ich das falsch?

Gruß Nordin

#2 (**permalink**) 13-12-2008, 11:01

das sieht eher nach ajax aus das auf den webseiten läuft.

wenn ich meine private seite so angucke verhält sie sich genauso wie du beschrieben hast.
den content den ich mit der ajax technik lade brauch ein wenig länger als der rest

#3 (**permalink**) 13-12-2008, 12:30

hmm ok.
Mit ajax hatte ich noch nie zu tun...
Muss ich mich wohl mal mit auseinander setzten.

#4 (**permalink**) 15-12-2008, 18:24

Soo jetzt hab ich mich mal mit ajax beschäftigt.

Das ergibniss ist ein simples script....

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Ajax Beispiel 001</title>
  <script type="text/javascript">
  <!--
	var request = false;

	// Request senden
	function setRequest(id) {
		// Request erzeugen
		if (window.XMLHttpRequest) {
			request = new XMLHttpRequest(); // Mozilla, Safari, Opera
		} else if (window.ActiveXObject) {
			try {
				request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
			} catch (e) {
				try {
					request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
				} catch (e) {}
			}
		}
		// überprüfen, ob Request erzeugt wurde
		if (!request) {
			alert("Kann keine XMLHTTP-Instanz erzeugen");
			return false;
		} else {
			var url = "post.php";
			// Request öffnen
			request.open('post', url, true);
			// Requestheader senden
			request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			// Request senden
			var nickname = document.getElementById(id).value;
			request.send('name='+nickname);
			// Request auswerten
			request.onreadystatechange = interpretRequest;
		}
	}

	// Request auswerten
	function interpretRequest() {
		switch (request.readyState) {
			// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
			case 4:
				if (request.status != 200) {
					alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+request.status);
				} else {
					var content = request.responseText;
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById('content').innerHTML = content;
				}
				break;
			default:
				break;
		}
	}
  //-->
  </script>
 </head>
 <body>
 <form action="" method="post">
  <input id="test" type="text" value="" /><input type="button" value="suchen" onclick="javascript:setRequest('test');" /> 
  <div id="content"></div>
</form>
 </body>
</html>

in der post.php steht:

PHP-Code:


			
<?php



header('Content-Type: text/html; charset=utf-8');

header('Cache-Control: must-revalidate, pre-check=0, no-store, no-cache, max-age=0, post-check=0');



sleep(2);



echo $_POST['name'];



?>

Das sleep() hab ich drin weil ich probieren wollte wie ich eine Art Preloader einbauen kann ich dachte das ich irgendwie den readyState 1 abrufen kann aber irgendwie wird das nichts

Wie müsste ich das script erweitern?
Das zum Beispiel der Text "bitte warten..." da steht bis der text aus dem inputfeld erscheind?

Gruß Nordin

#5 (**permalink**) 15-12-2008, 19:10

O hab einen Ansatz hinbekommen:

Habe folgendes

Code:

document.getElementById('content').innerHTML = 'bitte warten...';

nach

Code:

			// Request auswerten 
			request.onreadystatechange = interpretRequest;

eingefügt.

Ist das so korrekt?
Scheind jedenfalls zu funktionieren.

#6 (**permalink**) 15-12-2008, 19:12

na einfach den gewünschten Text in dein div packen

PHP-Code:


			
<div id="content">Bitte warten</div>

#7 (**permalink**) 15-12-2008, 21:23

ups *g* danke!

// Edit
Und was ist wenn das style des div geändert werden soll?

#8 (**permalink**) 16-12-2008, 08:58

Dann machst Du das über CSS

Code:

document.getElementById('content').className = 'meinNeuerStyle';

oder so:

Code:

document.getElementById('content').style.display = 'block';

Also einfach über die Style Variante ansprechen. Wobei die Vergabe von CSS Klassen sicherlich vorteilhafter ist, wenn es sich um umfangreichere Style Eigenschaften handelt.

#9 (**permalink**) 16-12-2008, 10:42

super! Danke.

Login

PHP News

Aktuelle PHP Scripte