Preloder im Mainbereich

**UzumakiNaruto** · 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

**Nordin** · 13.12.2008, 12:30

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

**Nordin** · 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

**Nordin** · 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.

**krel** · 15.12.2008, 19:12

na einfach den gewünschten Text in dein div packen

PHP-Code:


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

**Nordin** · 15.12.2008, 21:23

ups *g* danke!

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

**ezkimo** · 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.

**Nordin** · 16.12.2008, 10:42

super! Danke.

Preloder im Mainbereich