Javascript OOP

Hallo,

ich versuche mich gerade mit Javascript / Objekten.

function create_ajaxObj()
{
if(navigator.appName.search("Microsoft") > -1)
{
// resObjekt = new ActiveXObjekt("Microsoft.XMLHTTP");
obj = new ActiveXObject("MSXML2.XMLHTTP");
}
else
{
obj = new XMLHttpRequest();
}

this.loadUserData = loadUserData;
this.handleResponseObj = handleResponseObj;
}

function loadUserData(userID,file,thisName)
{
loadWait(thisName);
obj.open('POST', file, true);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send('userID='+userID);
obj.onreadystatechange = function()
{
handleResponseObj(thisName);
}

}

function handleResponseObj(thisName)
{
if(obj.readyState == 4)
{
document.getElementById(thisName).innerHTML = obj.responseText;
}
}



Aufgerufen wird direkt hintereinander:

var interests = new create_ajaxObj();
interests.loadUserData('1','inc/inc_load_profile_privat.php','showProfilePrivat');

var description = new create_ajaxObj();
description.loadUserData('1','inc/inc_load_profile_business.php','showProfileBusines s');


Und obwohl hier zwei Instanzen erstellt werden und verschiedenen
Parameter mitgegeben werden, überlagern sich die Aufrufe und es kommt
vor, dass der eine DIV per handleResponseObj mit den Inhalten der
anderen Instanz füllt.

Was mache ich nur falsch an diesem Beispiel?

Danke

G. Baier

Hab das ganze nochmal überarbeitet:

function create_ajaxObj()
{
if(navigator.appName.search("Microsoft") > -1)
{
// resObjekt = new ActiveXObjekt("Microsoft.XMLHTTP");
obj = new ActiveXObject("MSXML2.XMLHTTP");
}
else
{
obj = new XMLHttpRequest();
}

obj.loadUserData = function(userID,file,thisName)
{
loadWait(thisName);
obj.open('POST', file, true);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send('userID='+userID);
obj.onreadystatechange = function()
{
obj.handleResponseObj(thisName);
}
}

obj.handleResponseObj = function(thisName)
{
if(obj.readyState == 4)
{
document.getElementById(thisName).innerHTML = obj.responseText;
}
}

return obj;
}

Die Aufrufe dazu erfolgen direkt hintereinander:

var interests = new create_ajaxObj();
interests.loadUserData('1','file.php','divID');

var occupation = new create_ajaxObj();
occupation.loadUserData('1','otherfile.php','other divID');


Allerdings scheinen sich die beiden Aufrufe immer noch
zu überlagern - trotz der zwei getrennten
new create_ajaxObj()

Günter

Günter Baier wrote:

Hab das ganze nochmal überarbeitet:

function create_ajaxObj()
{
if(navigator.appName.search("Microsoft") > -1)

1. http://PointedEars.de/scripts/test/whatami
2. Verwende Leerzeichen für die Einrückung, keine Tabulator-Zeichen.
Besonders dann nicht, wenn Du Quelltext hier postest.

{
// resObjekt = new ActiveXObjekt("Microsoft.XMLHTTP");
^ c
obj = new ActiveXObject("MSXML2.XMLHTTP");
^^^
}
else
{
obj = new XMLHttpRequest();
^^^

Das wird u.a. von IE 7 unterstützt.

}

An den markierten Stellen erstellst Du jeweils implizit eine Eigenschaft
des Globalen Objekts (oder eines anderen Objekts in der Kette der
Gültigkeitsbereiche [Scope Chain], weswegen das fehlerträchtig ist);

obj.loadUserData = function(userID,file,thisName)
{
loadWait(thisName);

obj.open('POST', file, true);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send('userID='+userID);
obj.onreadystatechange = function()
{
obj.handleResponseObj(thisName);
^^^

daher ist das eine Closure.

}
}
[...]
return obj;
}

Konstruktoren dürfen keinen Wert liefern. Es sei denn, es sind
Factories, dann sollten sie eine Funktionsreferenz liefern.

Die Aufrufe dazu erfolgen direkt hintereinander:

var interests = new create_ajaxObj();
interests.loadUserData('1','file.php','divID');

var occupation = new create_ajaxObj();
occupation.loadUserData('1','otherfile.php','other divID');


Allerdings scheinen sich die beiden Aufrufe immer noch
zu überlagern - trotz der zwei getrennten
new create_ajaxObj()

Besser (nichtsdestotrotz weiterhin verbesserungswürdig) wäre:

function HTTPRequest()
{
if (/\b(function|object)\b/i.test(typeof XMLHttpRequest)
&& XMLHttpRequest)
{
// try..catch wird nicht universell unterstützt, ist aber hier
// möglicherweise notwendig
try
{
this.request = new XMLHttpRequest();
}
catch (e) {}
}
else if (/\b(function|object)\b/i.test(typeof ActiveXObject)
&& ActiveXObject)
{
// s.o.; try..catch ist hier notwendig
try
{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}

HTTPRequest.prototype = {
constructor: HTTPRequest,
request: null,

loadUserData: function(userID, file, thisName)
{
var req = this.request;
if (req)
{
// Globale Methoden sollten nicht in lokalem Code aufgerufen werden;
loadWait(thisName);

// mit dem Objekt sollten nicht nur POST-Requests möglich sein
req.open('POST', file, true);

try
{
// mit dem Objekt sollten nicht nur solche Daten übertragen werden
// können
req.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded');
}
catch (e) {}

// 1. Event-Listener definieren
req.onreadystatechange = function()
{
this.handleResponseObj(req, thisName);
};

// 2. Request auslösen
req.send('userID=' + encodeURIComponent(userID));
}
},

handleResponseObj: function(req, thisName)
{
// readyState == 4 und Fehlerstatus -- was dann?
if (req.readyState == 4 && req.status == 200)
{
if (/\b(function|object)\b/i.test(typeof document.getElementById)
&& document.getElementById)
{
// hier sollte besser gleich eine Objektreferenz übergeben werden
var o = document.getElementById(thisName);
if (o && typeof o.innerHTML != "undefined")
{
// innerHTML ist fehlerträchtig
o.innerHTML = req.responseText;
}
}

req = null;
}
}
};

var interests = new HTTPRequest();
interests.loadUserData('1', 'file.php', 'divID');

var occupation = new HTTPRequest();
occupation.loadUserData('1', 'otherfile.php', 'otherdivID');


HTH

PointedEars
--
Java hat in etwa soviel mit JavaScript zu tun, wie Gummi mit Gummibärchen ;-)
-- Alexander Clauss
in <1fkgjxx.pels4b1saxyvaN%aclauss (AT) hrzpub (DOT) tu-darmstadt.de>

On 22 Nov., 20:36, Thomas 'PointedEars' Lahn <PointedE... (AT) web (DOT) de>
wrote:

Besser (nichtsdestotrotz weiterhin verbesserungswürdig) wäre:

function HTTPRequest()
{
if (/\b(function|object)\b/i.test(typeof XMLHttpRequest)
&& XMLHttpRequest)
{
// try..catch wird nicht universell unterstützt, ist aber hier
// möglicherweise notwendig
try
{
this.request = new XMLHttpRequest();
}
catch (e) {}
}
else if (/\b(function|object)\b/i.test(typeof ActiveXObject)
&& ActiveXObject)
{
// s.o.; try..catch ist hier notwendig
try
{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}

Mhh, sämtliche (oder zumindest die ich sah) Funktionen für ein
HTTPRequest Objekt sahen immer etwas "einfacher" aus.
Sind Sie daher eher als ungenügend zu betrachten?
Wenn ja, dann verstehe ich immer nicht, dass es ein Haufen
Dokus zu allem Kram gibt und da meist Sachen drin stehen, die
man dann u.a. hier wieder um die Ohren gehauen bekommt ...

M.Libers

markus.libers (AT) googlemail (DOT) com wrote:

[...] Thomas 'PointedEars' Lahn [...] wrote:
Besser (nichtsdestotrotz weiterhin verbesserungswürdig) wäre:

function HTTPRequest()
{
if (/\b(function|object)\b/i.test(typeof XMLHttpRequest)
&& XMLHttpRequest)
{
// try..catch wird nicht universell unterstützt, ist aber hier
// möglicherweise notwendig
try
{
this.request = new XMLHttpRequest();
}
catch (e) {}
}
else if (/\b(function|object)\b/i.test(typeof ActiveXObject)
&& ActiveXObject)
{
// s.o.; try..catch ist hier notwendig
try
{
this.request = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}


Mhh, sämtliche (oder zumindest die ich sah) Funktionen für ein
HTTPRequest Objekt sahen immer etwas "einfacher" aus.
Sind Sie daher eher als ungenügend zu betrachten?

Ja.

Wenn ja, dann verstehe ich immer nicht, dass es ein Haufen
Dokus zu allem Kram gibt und da meist Sachen drin stehen, die
man dann u.a. hier wieder um die Ohren gehauen bekommt ...

Tutorials erheben AIUI keinen Anspruch auf Vollständigkeit. Zudem ist
Inkompetenz besonders bezüglich der in dieser Gruppe diskutierten Themen
weit verbreitet.


HTH

PointedEars

Thomas 'PointedEars' Lahn wrote:

Tutorials erheben AIUI keinen Anspruch auf Vollständigkeit. Zudem ist
Inkompetenz besonders bezüglich der in dieser Gruppe diskutierten Themen
weit verbreitet.

Schon, aber wenn Tutorials offensichtlich Müll verbreiten, dann ist es
ein Wunder, dass viele Seiten damit eigentlich funktionieren.
Was sollen dann solche Tutorials bezwecken? Denen, die sie nutzen,
hinterher vorzuwerfen, dass sie zu doof sind und sich nur nach
Tutorials richten? Oder versuchen sie gar eine Vorselektierung
von Webentwicklern voranzutreiben, nach dem Motto, wer sich
nach den Tutorials richtet, der kann kein richtiger Entwickler sein.

Und zu allerletzt - macht es dann noch Sinn auf Bespiele im Netz, auf
Tutorials oder gar auf Bücher zu verweisen, wenn diese zum großen Teil
unvollstänig und dermaßen fehlerhaft sind?

.... mit so'n Hals ...

G.

Günter Baier wrote:

Thomas 'PointedEars' Lahn wrote:
Tutorials erheben AIUI keinen Anspruch auf Vollständigkeit. Zudem ist
Inkompetenz besonders bezüglich der in dieser Gruppe diskutierten Themen
weit verbreitet.

Schon, aber wenn Tutorials offensichtlich Müll verbreiten, dann ist es
ein Wunder, dass viele Seiten damit eigentlich funktionieren.

Verallgemeinerungen sind immer falsch *g* Wenn aber eine schlechte Lösung
aus einem (daher) schlechten Tutorial funktioniert, so ist dies reiner
Zufall. IOW, die Lösung wurde dann wohl mit der gleichen oder ähnlichen
Laufzeitumgebung ausprobiert wie dem, auf dem sie entwickelt wurde.

Guter Script-Code funktioniert jedoch überall; zumindest aber führt er nicht
in anderen Laufzeitumgebungen zu unbehandelten Laufzeitfehlern.

[...]
... mit so'n Hals ...

Du suchst de.alt.talk.unmut, nicht diese Gruppe.


PointedEars