DIV-Container aktualisieren lassen

[nordi]

Hallo Leute,

ich habe auf einer Seite einen DIV-Container, in dem 6 Bilder geladen werden. Die Bilder werden durch eine MYSQL-Datenbank mit "ORDER BY rand() LIMIT 1" zufallsmäßig geladen. Diese 6 Bilder sollen alle 15 Sekunden neugeneriert werden. Momentan läuft das ganze mit dem META-Refresh. Ich würde dies aber gerne mti AJAX lösen. Ich habe viel gelesen und habe auch ein paar gute Skripte gefunden, die man nehmen könnte. Ich habe aber nur die Lösung gefunden, in der eine externe Datei in den DIV-Container geladen wird. Also müsste die externe Datei die Tabelle enthalten. Kann man das auch umgehen? Also das einfach nur der Container neugeladen wird, ohne dass auf die externe Datei (find.php) zurückgegriffen wird?

Hier mein Skript:

<script type="text/javascript"> 
  <!-- 
var objRequest = false; 

function instanceRequest(){ 
  if(window.XMLHttpRequest){ 
    objRequest = new XMLHttpRequest(); 
  }else if(window.ActiveXObject){ 
    try{ 
     objRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    }catch(e){ 
      try{ 
          objRequest = new ActiveXObject("Microsoft.objRequest"); 
      }catch(e){} 
    } 
  } 

  if(!objRequest){ 
    alert('Es konnte keine XMLHTTP-Instanz erzeugt werden!'); 
    return false; 
  } 
} 


function theRequest() { 
  // Falls noch ein Request-Objekt existiert -> zunächst beenden 
  if(objRequest && objRequest.readyState){ 
    objRequest.abort(); 
    objRequest = false; 
  } 

  if(!objRequest){ 
    instanceRequest(); 
  } 

  objRequest.open('GET', 'find.php', true); 

  self.objRequest.onreadystatechange = function(){ 
    if(objRequest.readyState == 4){ 
      if(objRequest.status == 200){ 
        document.getElementById("sechsbilder").innerHTML = unescape(objRequest.responseText); 
      }else{ 
        alert("Anfrage nicht erfolgreich!"); 
      } 
    } 
  } 
  objRequest.send(null); 
} 

window.onload = function(){ 
    hTimer = window.setInterval(function(){theRequest();}, 1000); 
} 
 //--> 
</script> 

<div id="sechsbilder">HIER SIND DIE 6 BILDER DRINNEN</div>

Gibt es vielleicht auch eine elegantere Lösung? Kenne mich mit AJAX nicht so besonders aus! Danke für die Hilfe!

 

[Sven Mintel]

Moin,

die Möglichkeiten sind recht mannigfaltig.

Also das einfach nur der Container neugeladen wird, ohne dass auf die externe Datei (find.php) zurückgegriffen wird?

Wenn du Daten vom Server benötigst, dann wirst du dort auf jeden Fall per AJAX anfragen müssen.

Ob der Server nun das fertige Markup ausliefert oder bspw. nur die Pfade zu den Bildern, aus welchen du dann per JS den neuen Inhalt erstellst, das ist Geschmackssache.

 

[nordi]

Hi, danke schonmal für die Antwort. Also mein DIV-Container sieht so aus:

<div id="sechsbilder"><?php
			include("../config/config.php");
   mysql_connect("$dbhost","$dbuser","$dbpass");
   mysql_select_db("$dbtable");
   
// MYSQL ABFRAGE der Bilder alphabetisch bezogen
   $result = mysql_query("SELECT * FROM artists, files WHERE files.id_kuenstler = artists.id AND bild_pfad != '' AND ((ASCII(LEFT(artists.nachname, 1)) >= 65 AND  ASCII(LEFT(artists.nachname, 1)) <= 72) OR (ASCII(LEFT(artists.nachname, 1)) >= 97 AND ASCII(LEFT(artists.nachname, 1)) <= 104)) ORDER BY rand() LIMIT 1"); 
   
   $kuenstler = mysql_fetch_assoc($result); 

   if ($kuenstler['id_kuenstler']  <= "3")
   { 
			echo '<img src="'.$kuenstler['bild_pfad'].'" alt="'.$kuenstler['bild'].'" width="248" height="140" border="0" />';
			}
			else 
			{
	
				if (trim($kuenstler['swf']) != "" AND trim($kuenstler['bild_pfad']) != "")
					echo '<a href="maske.php?id='.$kuenstler['id_kuenstler'].'&film='.$kuenstler['id'].'"><img src="'.$kuenstler['bild_pfad'].'" alt="'.$kuenstler['bild'].'" width="248" height="140" border="0" border="0" /></a>';
				else
					echo '<a href="maske.php?id='.$kuenstler['id_kuenstler'].'&bild='.$kuenstler['id'].'"><img src="'.$kuenstler['bild_pfad'].'" alt="'.$kuenstler['bild'].'" width="248" height="140" border="0" border="0" /></a>';
			}		
			
?></div>

Diesen würde ich gerne jede 15 Sek. neuladen lassen. Verstehe deine Antwort nicht so ganz. Sorry, bin neu mit AJAX. So wie ich das Skript verstehe lädt er ja mit objRequest.open('GET', 'find.php', true); die find.php in den DIV-Container "sechsbilder". Wie sag ich dem Skript aber, dass es nicht die find.php lädt, sondern einfach nur den Inhalt (s.o.) von dem DIV-Container?

 

[Sven Mintel]

Er lädt damit nicht die find.php in den Container, das passiert erst hier:

document.getElementById("sechsbilder").innerHTML = unescape(objRequest.responseText);

Wie du dem Skript sagen kannst, dass es nur den Container lädt: garnicht

Du brauchst auf jedenfall etwas serverseitiges, was da mit dem neuen Inhalt antwortet....ob es nun find.php heisst oder anders, ist dabei egal-