Seite nachladen ohne Bemerkung

S

stefan frank

Grünschnabel
Hallo Leutz,

Ich bin dabei eine einfache Seite eine Funtkion einzubauen die per Ajax irgendwie gehen soll :)

Ich möchte das wenn der Nutzer einen Link anklickt um auf eine neue Seite zu kommen keine Lade-bemerkung kommt. So das die seite im Hintergrund geladen wird.

Das soll glaube ich irgendwie mit "Http Request" gehen nur weiß ich nicht wie.
Habe per GOogle schon einiges gefunden, jedoch immer nur mit Ausgabe von MsgBoxen und nie ein Beispiel, wo eine seite im Hintergrund neugeladen wird.


Würde mich freun wenn mir einer helfen kann, gerne auch einen Tipp oder eine Internetadresse an der ich mir selber helfen kann.

Mit freundlichen Grüßen

Stefan Frank
 
also erstmal muss ich sagen bei google ist duchaus was zu finden

ich hatte auchmal bisschen mit ajax angefangen. vielleicht hilft dir das weiter:

index.html
HTML: 
<html>
<head>
   
<link rel="stylesheet" type="text/css" href="CSS/css.css">
  
		<script language="JavaScript" type="text/javascript">
			

			
			var anzahl_elemente_haupt; 
			var anzahl_elemente_unter;
			
			
			
			function getXmlHttpRequestObject() 
			{
				if (window.XMLHttpRequest) 
				{
					return new XMLHttpRequest(); //Not IE
				} 
				else if(window.ActiveXObject) 
				{
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} 
				else 
				{
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
	
			var receiveReq = getXmlHttpRequestObject();		

			function hauptmenue() 
			{
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
				{
					receiveReq.open("POST", 'hauptmenue.html', true);
					receiveReq.onreadystatechange = handlehauptmenue; 
					receiveReq.send(null);
				}			
			}
			
			function handlehauptmenue() 
			{
				if (receiveReq.readyState == 4) 
				{
					var textinhalt = receiveReq.responseText;				
					var texttrenner = textinhalt.split(" ");					
					elemente = texttrenner.length;
					
					anzahl_elemente_haupt = elemente;
					
					
					for (j=0; j<=elemente; j++)
					{
					
				
				  document.getElementById('div_zurueck' + j).innerHTML = "<a href=\" javascript:untermenue" + j + "()\">" + texttrenner[j] + "</a>";
				
					}
				}
			}
			
			
			function untermenue0() 
			{
				for(k=0; k<=4; k++)   
				{
					document.getElementById('div_zurueck'+k).style.backgroundColor = "#999999"; 
				}
				document.getElementById('div_zurueck0').style.backgroundColor = "#EEEEEE"; 
			
				
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
				{
					receiveReq.open("POST", 'untermenue0.html', true);
					receiveReq.onreadystatechange = handleuntermenue0; 
					receiveReq.send(null);
				}			
			}
			
			function handleuntermenue0() 
			{
				if (receiveReq.readyState == 4) 
				{
					var textinhalt = receiveReq.responseText;				
					var texttrenner = textinhalt.split(" ");							
					elemente = texttrenner.length;
					
					anzahl_elemente_unter = elemente;
			      
					for (j=0; j<=elemente; j++)
					{
					    document.getElementById('div_zurueck_unter' + j).innerHTML = "<a href=\"index.html\" >"+texttrenner[j]+"</a>";
						
					}
				}
			}

			
			function untermenue1() 
			{
				for(k=0; k<=4; k++)   
				{
					document.getElementById('div_zurueck'+k).style.backgroundColor = "#999999"; 
				}
				document.getElementById('div_zurueck1').style.backgroundColor = "#EEEEEE"; 
			
				
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
				{
					receiveReq.open("POST", 'untermenue1.html', true);
					receiveReq.onreadystatechange = handleuntermenue1; 
					receiveReq.send(null);
				}			
			}
			
			function handleuntermenue1() 
			{
				if (receiveReq.readyState == 4) 
				{
					var textinhalt = receiveReq.responseText;				
					var texttrenner = textinhalt.split(" ");							
					elemente = texttrenner.length;
			
					for (j=0; j<=elemente; j++)
					{
					    document.getElementById('div_zurueck_unter' + j).innerHTML = "<a href=\"index.html\" >"+texttrenner[j]+"</a>"; 
					}
				}
			}		
			
				function untermenue2() 
			{
				for(k=0; k<=4; k++)   
				{
					document.getElementById('div_zurueck'+k).style.backgroundColor = "#999999"; 
				}
				document.getElementById('div_zurueck2').style.backgroundColor = "#EEEEEE"; 
			
				
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
				{
					receiveReq.open("POST", 'untermenue2.html', true);
					receiveReq.onreadystatechange = handleuntermenue1; 
					receiveReq.send(null);
				}			
			}
			
			function handleuntermenue2() 
			{
				if (receiveReq.readyState == 4) 
				{
					var textinhalt = receiveReq.responseText;				
					var texttrenner = textinhalt.split(" ");							
					elemente = texttrenner.length;
			
					for (j=0; j<=elemente; j++)
					{
					    document.getElementById('div_zurueck_unter' + j).innerHTML = "<a href=\"index.html\" >"+texttrenner[j]+"</a>"; 
					}
				}
			}		
			


			function textteil00() 
			{
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) 
				{
					receiveReq.open("POST", 'testtext.html', true);
					receiveReq.onreadystatechange = handleuntermenue1; 
					receiveReq.send(null);
				}			
			}
			
			function handletextteil00() 
			{
				if (receiveReq.readyState == 4) 
				{
					var textinhalt = receiveReq.responseText;				
					
				    document.getElementById('textteil').innerHTML = "+textinhalt+"; 
				
				}
			}					
			
			</script>
            
  
	</head>
	<body onload="hauptmenue(); untermenue0()">
    

		<div id="kopfteil">
		</div>
		        
		<div id="hauptmenue">
		<div id="div_zurueck0" style="display:inline"></div>
		<div id="div_zurueck1" style="display:inline"></div>
		<div id="div_zurueck2" style="display:inline"></div>
		<div id="div_zurueck3" style="display:inline"></div>
		<div id="div_zurueck4" style="display:inline"></div>
		</div>
		
		<div id="untermenue" >
		<div id="div_zurueck_unter0" style="display:inline"></div>
		<div id="div_zurueck_unter1" style="display:inline"></div>
		<div id="div_zurueck_unter2" style="display:inline"></div>
		<div id="div_zurueck_unter3" style="display:inline"></div>
		<div id="div_zurueck_unter4" style="display:inline"></div>
		
		
		</div>
		
		<div id="textteil">
		
		</div>

        
        
	</body>
</html>


wenn du jetzt die im code genannten html dateien erstellst und z.b. die folgenden html seiten wie folgt füllst:

hauptmenue.html: "Startseit Einstellungen Sonstiges1 Sonstiges2"
untermenue0.html: "Untermenü_zu_Startseite1 Untermenü_zu_Startseite2"
untermenue1.html: "Untermenü_zu_ Einstellungen1 Untermenü_zu_ Einstellungen2" Untermenü_zu_ Einstellungen3"

müsstest du den effect des "nicht flackerns" sehen.

die html seiten sollten dann natürlich später aus ner xml kommen..
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück