<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>
