Daten in Echtzeit aus SQL Datenbank auslesen

Hi,

mit folgender PHP-Datei:

PHP:
<?php
header('ContentType: text/plain');
echo '[{"id":"1","wert":"123"},{"id":"2","wert":"3423"}]';
?>

funktioniert der Code bei mir im FF tadellos. Lass Dir den JSON-String, den das PHP-Script liefert mal per alert() ausgeben.

LG
 
Hallo,
jetzt funktioniert das ganze perfekt. Aber nun fehlt noch die automatische Aktualisierung der Werte. Mein aktuelles Script sieht folgendermaßen aus:

HTML:
<html>
<head>
<title>AJAX</title>
<script type="text/javascript">
 
 // PHP Datei einlesen
  var http = null;
  if (window.XMLHttpRequest) 
  {
	  http = new XMLHttpRequest();
  } 
  else if (window.ActiveXObject) 
  {
	  http = new ActiveXObject("Microsoft.XMLHTTP");
  }
  
  if (http != null) 
  {
	  http.open("GET", "json_dbget.php", true);
	  http.send(null);

  }
  
  
  function ausgeben(arrid)
  {
	  if (http.readyState == 4) 
	  {
		  var daten = http.responseText;
		      daten = eval("(" + daten + ")");
		  var link  = daten[arrid];
		  
		  document.write(link.wert);
	  }
  }
</script>


</head>
<body>
<table width="200" border="1">
  <tr>
    <td width="94">W1:</td>
    <td width="90"><script type="text/javascript">ausgeben(0);</script></td>
  </tr>
  <tr>
    <td>W2:</td>
    <td><script type="text/javascript">ausgeben(1);</script></td>
  </tr>
</table>
</body>
</html>

Da die PHP Datei beim Laden der Datei einmal geladen wird, vermute ich mal, dass ich den Teil wo die PHP Datei eingebunden wird mit in die Funktion zu Ausgabe einbauen muss. Also den Block:
HTML:
 http.open("GET", "json_dbget.php", true);
 http.send(null);

liege ich soweit richtig? Dann muss ich den Inhalt der Tabelle überschreiben und die Funktion mit setIntervall steuern.
 
Hi,

so wie es gelöst hast, ist es keine typische Ajax-Routine. Dort wird in einer Callback-Funktion (onreadystatechange) die erhaltene Antwort verarbeitet. In deinem vorletzten Beitrag war es noch vorhanden, dann plötzlich nicht mehr.

Hier hast du eine alternative Möglichkeit, das Ganze zu realisieren. Es verwendet für jeden Request ein eigenes Objekt, wodurch gewährleistet wird, dass es keine Überschneidungen gibt. Der Quelltext ist weitestgehend kommentiert und sollte daher als Erklärung ausreichen.

Die Ergebnisse werden in Tabellenzellen eingetragen, die über eindeutige IDs angesprochen werden.

Beispiel:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
Object.prototype.extendOpts = function(objOpts){
  for(strEntry in objOpts)
    this[strEntry] = objOpts[strEntry];
}

/* Ajax-Klasse
 *
 * Eigenschaften des Objekts im Parameter objArgs:
 * -----------------------------------------------
 * method  - (string) gewünschte Methode (post, get ..)
 * async   - (bool) Asynchroner (true) oder synchroner (false) Request
 * data    - (string) Datenstring mit Request-Parametern (z.B. text=1&args=2)
 * nocache - (bool) Daten sollen gecached werden (false), ohne Caching (true)
 * url     - (string) Request-URL
 */
clAjax = function(objArgs){
  // Basis-Objekt mit Default-Werten
  var objAjax = {
    method: "GET",
    async: true,
    nocache: true,
    data: ''
  };

  // Objekt erweitern
  objAjax.extendOpts(objArgs);

  // Erweiterung des Basis-Objektes um die Methode zum Ausführen des Requests
  objAjax.request = function(){
    try{
      // Erstellen des XMLHttpRequest-Objekts
      this.xmlReq = window.XMLHttpRequest ? new XMLHttpRequest()
                                          : new ActiveXObject("Microsoft.XMLHTTP");

      // Methode anpassen
      this.method = this.method.toUpperCase();

      // String für send-Methode generieren
      this.sendData = (this.method.toUpperCase() == "GET")? ((document.all && !window.opera)?null:true) : this.data;

      // Aufbereiten der URL
      this.url = ((this.method == "POST") || (this.data == ""))
        // Falls es sich um einen POST-Request handelt oder der Request-String leer ist -> nur URL
        ? this.url
        // Falls es sich um einen GET-Request handelt und Request-Daten vorhanden sind
        : (
          (this.url.indexOf('?') == -1)
            ? this.url + '?' + encodeURI(this.data)  // Falls es sich um die ersten Parameter handelt -> ? voranstellen
            : this.url + '&' + encodeURI(this.data)  // Sonst - Parameter mit Kaufmanns-UND anhängen
        );

      // Initialisieren des Requests
      this.xmlReq.open(this.method, this.url, this.async);

      // Falls es sich um einen POST-Request handelt -> senden der bei POST erforderlichen Request-Header
      if(this.method == "POST"){
        this.xmlReq.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        this.xmlReq.setRequestHeader("Content-length", this.sendData.length);
        this.xmlReq.setRequestHeader("Connection", "close");
      }

      // Falls die Nutzung des Cache verhindert werden soll
      if(!typeof this.nocache || this.nocache){
        this.xmlReq.setRequestHeader("If-Modified-Since", "Thu, 01 Jan 1970 00:00:00 GMT");
      }

      // Falls eine verarbeitende Callback-Funktion übergeben wurde
      if((typeof this.onComplete != 'undefined') && (typeof this.onComplete == 'function')){
        var _this = this;
        this.xmlReq.onreadystatechange = function(){
          if((_this.xmlReq.readyState==4) && (_this.xmlReq.status==200)){
            // Übergebene Fkt. aus dem window-Kontext mit Basis-Objekt (objAjax) aufrufen
            // objAjax.xmlReq entspricht XMLHttpRequest-Objekt
            _this.onComplete(_this);
          }
        };
      }

      // Request absetzen
      this.xmlReq.send(this.sendData);

    }catch(objExcNoRequest){
      try{
      	console.log('Fehler:AJAX.request()');
      }catch(objExcNoConsole){}
    }
  }

  // Rückgabe des Basis-Objekts
  return objAjax;
}


function ausgeben(objAjax){
  var daten = objAjax.xmlReq.responseText;
  daten = eval("(" + daten + ")");
  var link  = daten[objAjax.index];

  document.getElementById(objAjax.id).innerHTML = link['wert'];
}

window.onload = function(){
  periodicalUpdater();
}

function periodicalUpdater(){
  // Ajax-Request wird angestossen
  // url   - enthält die Ziel-URL
  // index - enthält die Komponente des JSON-Arrays
  // id    - ID des Elementes, das den Response-Wert aufnimmt
  clAjax({'url': 'xmlhttp_request_dummy.php', 'index': 0, 'id': 'id_01', 'onComplete': function(objReq){ausgeben(objReq);}}).request();
  clAjax({'url': 'xmlhttp_request_dummy.php', 'index': 1, 'id': 'id_02', 'onComplete': function(objReq){ausgeben(objReq);}}).request();

  hTimer = window.setTimeout(function(){periodicalUpdater();}, 2000);
}
</script>


</head>
<body>
<p><button onclick="window.clearTimeout(hTimer);">clearTimeout</button></p>
<table width="200" border="1">
  <tr>
    <td width="94">W1:</td>
    <td width="90" id="id_01"></td>
  </tr>
  <tr>
    <td>W2:</td>
    <td width="90" id="id_02"></td>
  </tr>
</table>
</body>
</html>

Die Ajax-Klasse ist dem Tutorial von Sven Mintel (siehe Link in meinem ersten Beitrag) entnommen und wurde leicht angepasst.

Als Antwort-Script habe ich nachstehende PHP-Anweisungen verwendet:
Code:
<?php
header('ContentType: text/plain');
echo '[{"id":"1","wert":"'.date("H:i:s").' (1)"},{"id":"2","wert":"'.date("H:i:s").' (2)"}]';
?>

Vielleicht kannst du damit etwas anfangen.

Ciao
Quaese
 
Hi,
vielen Dank für Deine Antwort. Funktioniert super. Ich werde mir mal am Montag ein AJAX bzw. JS Buch anschaffen …

Vielen Dank nochmal!
 
Hallo,
habe mir eben das gesammte Thema durchgelesen und in mein Projekt eingebaut.

Nun stehe ich vor dem Problem, dass die einzelnen Werte nicht anhand einer ID dem gewünschten Ziel zugeordnet werden können sondern dass immer fortlaufend Blöcke aus dem JSON String verwendet werden.

Bsp.:

Feld 1 => Block 4 (objid = 9)
Feld 2 => Block 5 (objid = 20)
Feld 3 => Block 6 ...

Feld 4 => Block 0
Feld 5 => Block 1
Feld 6 => Block 2

Feld 7 => Block 3

Meines Erachtens müsste der JSON String aussehen wie folgt:
[{"objid":"9","wert":"Wert für Feld 1", {"objid":"20","wert":"Wert für Feld 2", ...}]

Mein Problem liegt in der Umsetzung. Wie kann man so etwas aufbauen?

Mit freundlichen Grüßen
MrMappel
 
Zurück