Zwei Ajax Funktionen auf einer Seite

[Nicolai Schork]

function loadXMLDoc()
{
          if (window.XMLHttpRequest)
          {
              	xmlhttp=new XMLHttpRequest();
           }
           xmlhttp.onreadystatechange=function()
           {
              	if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
			//Daten des DIV's auslesen
                	document.getElementById("ajax").innerHTML=xmlhttp.responseText;
            	}
            }
            string = document.getElementById("ajax").innerHTML;
            xmlhttp.open("GET","ajax.php?id="+string+,true);
            xmlhttp.send();
}

Hallo Leute,
ich habe folgendes Problem:

Ich würde gerne auf meiner Seite zwei DIV-Container mit einer Ajax Funktion refreshen lassen. Bei einem Container klappt das auch prima (oben Code), bei zwei jedoch weiß ich nicht wie ich die Funktion umschreiben muss / ob ich eine neue Ajax-Funktion schreiben sollte.

Ich glaube es funktioniert nicht, da die ready-Funktion nicht zweimal ausgeführt werden kann / Ajax nicht unterscheiden kann welcher ready-Status bei welchem div gemeint ist.

Also wie müsste die Funktion oben / eine neue Funktion aussehen, damit ich zwei DIV-Container auf einer Seite refreshen kann und somit beide Funktionen unabhängig von einander arbeiten?

Ist das überhaupt möglich?

 

[Back2toxic]

Wieso übergibst du die zu ladende URL und den Ziel-Container denn nicht als Funktionsparameter?
Dann kannst du loadXMLDoc bequem für beliebig viele Container und URLs aufrufen.

Anbei die Lösung, die ich überall dort einsetze, wo kein Framework gebraucht wird

  // Aufruf
  setRequest('id2.html','div',true);

/**
 * @function $(String name)
 * @param name String: ID eines Elements oder Tagname
 * @description gibt die Referenz zum Element mit ID name zurück. Wird kein
 * Element mit dieser ID gefunden wird das erste HTML-Element mit Tagname name
 * zurückgeliefert. Wird nichts gefunden wird false zurück gegeben.        
 **/
function $(name){ 
	if(document.getElementById(name)){
    return document.getElementById(name);
	} else if(document.getElementsByTagName(name).length > 0){
		return document.getElementsByTagName(name)[0];
	}
	return false;
}


/**
 * @function setRequest(String url, String div)
 * @param url String URL, zu der der Request aufgebaut werden soll
 * @param target String ID des Elementes, in das der neue Inhalt geladen werden soll. Alternativ Tagname.
 * @param add Boolean Inhalt hinzufügen (true) oder überschreiben (false)
 * @description Setzt einen AJAX-Request and url ab und schreibt das Ergebnis in target    
 **/
function setRequest(url,target,add) {
	add = add ? add : false;
  var req = null;
  try{
      req = new XMLHttpRequest();
  } catch (ms){
      try{
          req = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (nonms){
          try{
              req = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (failed){
              req = null;
          }
      }
  }
  if (req == null) alert("Error creating request object!");
  req.open("GET", url, true);
  req.onreadystatechange = function(){  
      switch(req.readyState) {
          case 4:
              if(req.status!=200) {
              }else{
                  if(add == true){
                    $(target).innerHTML = $(target).innerHTML+req.responseText;
                  } else {
                    $(target).innerHTML = req.responseText;
                  }
              }
            break;
          default:
              return false;
            break;
      }
  };
  //req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  req.send(null); 
}

 

[Nicolai Schork]

sorry, habe mit Javascript und Ajax noch meine Schwierigkeiten:

Reicht der alleinige Code für zwei Ajax-Funktionen aus, und wenn ja wo setze ich dann die andere DIV-ID? Also die ID des zweiten DIV's der sich refreshen soll?

Ich will letztendlich erreichen, dass alle 100Millisekunden die Ajax-Funktion aufgerufen wird, in der dann
- beide DIV Container ausgelesen werden
- der Inhalt der DIV's an ein GET Parameter für die Datei ajax1.php und ajax2.php gesetzt wird
- Die beiden Dateien per Ajax aufgerufen werden und durch eine Datenbankabfrage den neuen DIV-Inhalt bestimmen
- falls der "alte" DIV - Inhalt =/= dem neuen DIV Inhalt --> in der Index.php den DIV neue laden

Also einfach meine vorige Ajax Funktion (von meinem ersten Beitrag), nur für 2 DIV's...

Da wüsste ich nicht wie ich den Code oben ändern muss, damit das schließlich funktioniert :/

 

[Back2toxic]

Du musst einfach nur

setRequest(<URL>, <DIV-ID>, <true/false>);

aufrufen.

Der erste Parameter ist die aufzurufende URL, der zweite Parameter ist die ID des Divs, in die der Inhalt geschrieben werden soll, der dritte Parameter gibt an, ob der alte Inhalt überschrieben (false) oder beibehalten (true) werden soll, wenn der neue Inhalt eingefügt werden soll.

Um das ganze alle 100ms zu erreichen:

	window.onload = function(){
		window.setInterval(
			function(){
				var div1ID = ''
				var div2ID = ''
				
				var div1Inhalt = encodeURIComponent(document.getElementById(div1ID).innerHTML);
				var div2Inhalt = encodeURIComponent(document.getElementById(div2ID).innerHTML);
			
				setRequest('ajax1.php?divInhalt='+div1Inhalt, div1ID, false);
				setRequest('ajax2.php?divInhalt='+div2Inhalt, div2ID, false);
			}, 100
		);
	}

Versuche bitte den Code zu verstehen, sonst ist / war der Lerneffekt gleich 0.

Grüße

 

[Nicolai Schork]

Ah!
Ich setze also die beiden DIV's als Variable und führe für beide die Funktion setRequest durch!

Super ich probiers gleich mal aus! Danke!