Ajax / Java Problem bei Mehrfachaufruf

Beitrag von **tauchvideo** » 09.01.2010, 17:28

Ich möchte auf einer Seite per Ajax ein Video einblenden. Ich rufe aus dem Text mit dem Kürzel [video-5] das Video Nr. 5 auf, der Text wird anschließend per PHP umformatiert:

Code: Alles auswählen

$str = str_replace&#40;'&#91;video-'.$row&#91;'id'&#93;.'&#93;', '<div id="video_content_'.$row&#91;'id'&#93;.'"> wird geladen ... </div><SCRIPT LANGUAGE="JavaScript">loadVideo&#40;'.$row&#91;'id'&#93;.'&#41;;</SCRIPT>', $str&#41;;

Die Ajax-Funktion

Code: Alles auswählen

function loadVideo&#40;vid&#41;
&#123;
url = 'videoplayer.php?file_id=' + vid;
 if &#40;xmlHttp&#41; &#123;
     xmlHttp.open&#40;'GET', url, true&#41;;
     xmlHttp.onreadystatechange = function &#40;&#41; &#123;
         if &#40;xmlHttp.readyState == 4&#41; &#123;
             document.getElementById&#40;"video_content_"  + vid&#41;.innerHTML = xmlHttp.responseText;
         &#125;
     &#125;;
     xmlHttp.send&#40;null&#41;;
 &#125;
&#125;

läd dann das angeforderte Video in den Content. Soweit so gut, funktioniert!

Folgendes Problem: Es funktioniert nur dann, wenn im Text 1 Video eingeblendet werden soll. Sobald ein 2. Video hinzukommt, läd die Funktion nur noch das letzte Video nach. Ich vermute es liegt daran, dass das Javascript "loadVideo" mehrfach ausgeführt wird.

Hat jemand eine Idee wie man das lösen könnte?

THX

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 09.01.2010, 17:55

Hat jemand eine Idee wie man das lösen könnte?

Nicht für mehrere gleichzeitig (!) zu ladende Videos dasselbe XMLHttpRequest-Objekt verwenden - das kann es nämlich nicht.

Der Name Ajax kommt nicht von dem Waschmittel, sondern ist eine Abkürzung für Asynchronous Javascript And XML. Das asynchronous bezieht sich auf den Code in XMLHttpRequest-Objekten, der läuft nämlich üblicherweise asynchron, d.h. parallel zum restlichen Javascript-Code (nicht Java, Java ist was völlig anderes). Wenn du also ein Objekt beauftragst, eine URL zu laden, dann wird dieser Auftrag parallel zu dem Code ausgeführt, in dem du den Auftrag erteilt hast.

Das Laden einer URL kann dauern, insbesondere, weil Browser nicht unendlich viele Anfragen gleichzeitig absetzen; sind mehr als ein Limit zu laden, kommt der Rest auf Halde, bis eine vorangehende URL durch ist.
Und gerade, wenn du, wie hier zu sehen, in einer Seite etwas nachlädst, während die Seite selbst noch geladen wird (Bilder etc. zählen wir mal dazu), kann es passieren, dass dein Javascript-Objekt warten muss - und in diesem Zustand setzt du es dann bereits auf eine andere URL an, denn der Auftraggeber, die HTML-Seite läuft ja weiter zum nächsten <script>-Block. Daher wird nur das letzte Video geladen.

Beitrag von **tauchvideo** » 09.01.2010, 22:38

Ich gebe zu, ich bin noch nicht richtig fit was Ajax und Javascript angeht. Im Prinzip hab ich das auch schon als Fehlerquelle erkannt, ich habe nur keine Idee wie man das lösen kann. Ich hab auch schon an ein Script gedacht, welches nach kompletter Quelltextausgabe erst die Videos im Quelltext sucht und ersetzt (Schleife also). Ich denke aber nicht das dies der Weisheit letzter Schuss ist, irgendwie komme ich aber nicht weiter.

Trotzdem Danke!

von **Anzeige von ABAKUS** »

Beitrag von **Mork vom Ork** » 09.01.2010, 23:48

tauchvideo hat geschrieben:Im Prinzip hab ich das auch schon als Fehlerquelle erkannt, ich habe nur keine Idee wie man das lösen kann.

Na, irgendwo wirst du doch das XMLHttpRequest-Objekt in der Variablen xmlHttp erzeugt haben. Davon erzeugst du auf dem gleichen Weg einfach noch eines, genauer gesagt: für jedes Video ein eigenes, noch genauer:

Code: Alles auswählen

function loadVideo&#40;vid&#41; &#123;
    var url = 'videoplayer.php?file_id=' + vid; 
    var video = erzeugeNeuesXMLHttpRequestObjekt&#40;&#41;;
    if &#40;video&#41; &#123;
        video.open&#40;'GET', url, true&#41;;
        usw.

So in etwa müsste das funktionieren.

BTW: Javascript-Variablen möchtest du mit dem Schlüsselwort var erzeugen, nicht ohne. Ohne erzeugst du statt einer lokalen eine globale Variable - und das ist bisweilen etwas unschön, weil sich dann Variablen aus einer Funktion mit Variablen aus anderen Funktionen in die Quere kommen können.

Ich hab auch schon an ein Script gedacht, welches nach kompletter Quelltextausgabe erst die Videos im Quelltext sucht und ersetzt (Schleife also).

Auch eine Möglichkeit, vielleicht sogar noch besser als alles auf einmal zu laden.

Dritte und, soweit ich das bis hier beurteilen kann, weitaus eleganteste Variante wäre, anstatt per PHP Javascript auszugeben, welches wiederum ein PHP-Skript aufruft (videoplayer.php), gleich den Inhalt letzteren Skriptes einzubinden und auf den unnützen Umweg über Javascript zu verzichten.

Beitrag von **tauchvideo** » 10.01.2010, 12:10

ganz oben im ajax.js steht das:

Code: Alles auswählen

var xmlHttp = false;

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer
try &#123;
    xmlHttp  = new ActiveXObject&#40;"Msxml2.XMLHTTP"&#41;;
&#125; catch&#40;e&#41; &#123;
    try &#123;
        xmlHttp  = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
    &#125; catch&#40;e&#41; &#123;
        xmlHttp  = false;
    &#125;
&#125;
// ... für Mozilla, Opera und Safari
if &#40;!xmlHttp  && typeof XMLHttpRequest != 'undefined'&#41; &#123;
    xmlHttp = new XMLHttpRequest&#40;&#41;;
&#125;

Leider hab ich dieses ajax.js irgedwo aus dem Netzt und offensichtlich keine Ahung wie es funktioniert, sorry.
Anhand Deines Beispiels müsste mit

Code: Alles auswählen

erzeugeNeuesXMLHttpRequestObjekt&#40;&#41;;

ja noch eine Funktion eingefügt werden, die ein neues Objekt erzeugt?

weitaus eleganteste Variante wäre, anstatt per PHP Javascript auszugeben, welches wiederum ein PHP-Skript aufruft (videoplayer.php)

mache ich nicht genau das? Ich gebe doch im Quelltext nur

Code: Alles auswählen

<SCRIPT LANGUAGE="JavaScript">loadVideo&#40;'.$row&#91;'id'&#93;.'&#41;;</SCRIPT>

aus, welches das hidden-div sichtbar macht und darin das php-script aufruft, welches den Player ausgibt.

Beitrag von **Mork vom Ork** » 11.01.2010, 11:30

tauchvideo hat geschrieben:ganz oben im ajax.js steht das:
Code: Alles auswählen
var xmlHttp = false;

// XMLHttpRequest-Instanz erstellen
// ... für Internet Explorer
try &#123;
    xmlHttp  = new ActiveXObject&#40;"Msxml2.XMLHTTP"&#41;;
&#125; catch&#40;e&#41; &#123;
    try &#123;
        xmlHttp  = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
    &#125; catch&#40;e&#41; &#123;
        xmlHttp  = false;
    &#125;
&#125;
// ... für Mozilla, Opera und Safari
if &#40;!xmlHttp  && typeof XMLHttpRequest != 'undefined'&#41; &#123;
    xmlHttp = new XMLHttpRequest&#40;&#41;;
&#125;
Leider hab ich dieses ajax.js irgedwo aus dem Netzt und offensichtlich keine Ahung wie es funktioniert, sorry.
Anhand Deines Beispiels müsste mit
Code: Alles auswählen
erzeugeNeuesXMLHttpRequestObjekt&#40;&#41;;
ja noch eine Funktion eingefügt werden, die ein neues Objekt erzeugt?

Richtig, in diese Funktion legst du obigen Code, so dass du ihn bei Bedarf immer wieder aufrufen und ein neues XMLHttpRequest-Objekt erzeugen kannst:

Code: Alles auswählen

function erzeugeNeuesXMLHttpRequestObjekt&#40;&#41; &#123;
	// XMLHttpRequest-Instanz erstellen
	// ... für Internet Explorer
	try &#123;
		xmlHttp  = new ActiveXObject&#40;"Msxml2.XMLHTTP"&#41;;
	&#125; catch&#40;e&#41; &#123;
		try &#123;
			xmlHttp  = new ActiveXObject&#40;"Microsoft.XMLHTTP"&#41;;
		&#125; catch&#40;e&#41; &#123;
			xmlHttp  = false;
		&#125;
	&#125;
	// ... für Mozilla, Opera und Safari
	if &#40;!xmlHttp  && typeof XMLHttpRequest != 'undefined'&#41; &#123;
		xmlHttp = new XMLHttpRequest&#40;&#41;;
	&#125;
	return xmlHttp;
&#125;

Im weiteren Verlauf dann dieses:

Code: Alles auswählen

function loadVideo&#40;vid&#41; &#123; 
	var url = 'videoplayer.php?file_id=' + vid; 
	var video = erzeugeNeuesXMLHttpRequestObjekt&#40;&#41;;
	if &#40;video&#41; &#123; 
		video.open&#40;'GET', url, true&#41;; 
		video.onreadystatechange = function &#40;&#41; &#123; 
			if &#40;this.readyState == 4&#41; &#123; 
				document.getElementById&#40;"video_content_"  + vid&#41;.innerHTML = this.responseText; 
			&#125; 
		&#125;
		video.send&#40;null&#41;; 
	&#125;
&#125;

Beachte, dass jetzt in dieser Funktion mit var video = xhr(); bei jedem Aufruf ein neues Request-Objekt erzeugt wird. In der Funktion, die das Request-Objekt bei Statusänderungen ausführt, wird zudem mit this auf sich selbst zugegriffen, nicht mehr auf eine äußere Variable (dort stand voher die Variable xmlHttp).

weitaus eleganteste Variante wäre, anstatt per PHP Javascript auszugeben, welches wiederum ein PHP-Skript aufruft (videoplayer.php)
mache ich nicht genau das?

Ja, du machst genau das. Das ist aber nicht die eleganteste Variante, die beschrieb ich im danach folgenden (und leider von dir nicht zitierten) Nebensatz, sondern das, was du anstatt der elegantesten Variante machst.

Beitrag von **tauchvideo** » 17.01.2010, 14:40

Sorry das ich mich jetzt erst melde, war etwas Stress die Woche.

Ich glaube ich habe es sogar jetzt verstanden

Es funktioniert natürlich! Besten Dank.
Ich habe jetzt meine restlichen Ajax-Funktionen noch angepasst, ich musste hier natürlich überall den Funktionsaufruf mit einfügen. Das geht aber jetzt auch Wunderbar.

Mork vom Ork hat geschrieben:gleich den Inhalt letzteren Skriptes einzubinden und auf den unnützen Umweg über Javascript zu verzichten

Sicher wäre dies die einfachste Lösung, für meinen Fall aber nicht ideal. Das hängt mit verschiedenen Cache-Problemen des Flashplayers in Verbindung mit einer xml-Playlist zusammen. Da habe ich lange für gebraucht, dieses Problem zu lösen. Da es jetzt so funktioniert, möchte ich es gern beibehalten.

Danke nochmal!