✔ [AJAX] Funktionen nacheinander ausführen

[DirkHo]

Hallo,

ich habe eine Seite mit mehreren Formularen drauf. Das eine ist z.B. ein EIngabefeld, ein anderes ist ein Select-Feld.

Wenn ich nun in das Input-Feld etwas eingebe und abschicke wird es erst an eine JS-Funktion gesendet, danach dann per AJAX (asynchron) an eine PHP-Datei, die den Eintrag aus dem Input-Feld in eine DB schreibt.

Das Select-Feld sollte danach durch Aufruf einer Funktion neugeladen werden, so daß der Eintrag aus dem Input-Feld, der jetzt in der DB steht, ebenfalls in dem Input-Feld ist.
Wenn ich jedoch die beiden Funktionen hintereinander aufrufe läd die Funktion die zu dem Input-Feld gehört jedoch ewig und es wird nichts in die DB eingetragen...

Kann mir jemand helfen, wie ich bei AJAX sicherstellen kann, daß erst nach abarbeiten der 1.Funktion die 2. ausgeführt wird (ich will das ganze jedoch asynchron ausführen).

Wenn also was in ein Input-Feld geschrieben wurde folgt ein onClick-Event, der die Funktion neuerEintrag() aufruft. Darin wird dann erstmal die Funktion eintragSpeichern() und danach dann selectNeuLaden() aufgerufen.

Danke und Grüße,

Dirk

 

[Sven Mintel]

Moin Dirk,

das sollte gehen, indem du selectNeuLaden() aufrufst, sobald der readystate des Requests von eintragSpeichern() den Wert 4 hat....du müsstest also den onreadystatechange -Event des 1. Requests überwachen.

 

[DirkHo]

Hi Sven,

danke schon mal! Jetzt weiß ich nur nicht genau, ob das mit meiner Variante (wie ich es im Moment (noch) löse) auch möglich ist, oder, ob ich dafür mein Skript umbasteln muß...

Hier mal mein Quelltext, damit das, was ich gemacht habe, erkenntlicher wird:

var anfrage = anfrageObjektErzeugen();
var doms;

// Request senden
function anfrageObjektErzeugen()
{
	// Request erzeugen
	if (window.XMLHttpRequest) 
	{
		return new XMLHttpRequest(); // Mozilla, Safari, Opera
	} 
	else if (window.ActiveXObject) 
	{
		try 
		{
			return new ActiveXObject('Msxml2.XMLHTTP'); // IE 5
		} 
		catch (e) 
		{
			try 
			{
				return new ActiveXObject('Microsoft.XMLHTTP'); // IE 6
			} 
			catch (e) 
			{
			}
		}
	}
}

function anfrageStellen(parameter, url, dom)
{
	// überprüfen, ob Request erzeugt wurde
	if (!anfrage) 
	{
		anfrage = anfrageObjektErzeugen();
	}
	
	if(dom == null)
	{
		alert('Interner Fehler im DOM');
	}
	
	// Der globalen Variablen zuweisen, damit es auch in der/den anderen Funktionen
	// verfügbar ist
	doms = dom;
	// Request öffnen
	anfrage.open('post', url, true);
	// Header, damit PHP weiß, in welcher Form die Daten vorliegen
	anfrage.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	// Request senden
	anfrage.send(parameter);
	// Request auswerten
	anfrage.onreadystatechange = serverAntwort;
	return;
}

// Request auswerten
function serverAntwort() 
{
	switch (anfrage.readyState) 
	{
		// wenn der readyState 4 und der request.status 200 ist, dann ist alles korrekt gelaufen
		case 4:
			if (anfrage.status != 200) 
			{
				alert("Der Request wurde abgeschlossen, ist aber nicht OK\nFehler:"+anfrage.status);
			} 
			else 
			{
				var content = anfrage.responseText;
				
				for each(dom in doms)
				{
					// den Inhalt des Requests in das <div> schreiben
					document.getElementById(dom).innerHTML = content;
				}
				return;
			}
			break;
		default:
			break;
	}
}

Hier die Funktionen, die ich aus dem Input-Feld heraus onClick (ligaAnlegen()) aufrufe und beim Laden der Seite bereits die aktuellen Ligen lade und das Select-Feld nach dem Anlegen einer neuen Liga laden will (ligenLaden()).

function ligaAnlegen()
{	
	if(anfrage == null)
	{
		anfrage = anfrageObjektErzeugen();
	}
	
	resetMessageBoxes(messageBoxes);
	
	var ligenName = null;
	ligenName = trim(document.getElementById('ligenName').value);
	
	if(ligenName == '')
	{
		document.getElementById('ligaAnlegen').innerHTML = '<span class="error">Du mußt einen Ligennamen eintragen!</span>';
		return;
	}
	else if(ligenName.length < 5)
	{
		document.getElementById('ligaAnlegen').innerHTML = '<span class="error">Der Ligenname muß mind. 5 Zeichen lang sein!</span>'
		return;
	}
	
	var parameter = 'liga=' + ligenName + '&method=neueLiga';
	var url = 'ligaverwaltung/Ligaverwaltung.php';
	var dom = new Array('ligaAnlegen');
	
	anfrageStellen(parameter, url, dom);
	
	ligenLaden();
}

function ligenLaden()
{
	if(anfrage == null)
	{
		anfrage = anfrageObjektErzeugen();
	}
	
	var parameter = 'method=ligenzumLoeschenLaden';
	var url = 'ligaverwaltung/Ligaverwaltung.php';
	var dom = new Array('ligaLoeschen');
	
	anfrageStellen(parameter, url, dom);
}

Wo müßte ich denn den readystatechange überwachen? Zusätzlich nochmals in der Funktion ligaAnlegen()? Wenn ja, muß ich dann für jede Funktion bei der ich den ReadyStateChange überwachen will ein eigenes XMLHTTPObjekt anlegen?

Das habe ich noch nicht so richtig verstanden. Ich würde alles halt gerne so "allgemein" wie möglich halten, damit ich die Funktionen (anfrageErstellen,...) auch öfter verwenden kann und nicht nur für einen Zweck.

Vielen Dank und Grüße,

Dirk

 

[Sven Mintel]

Moin,

es wäre in der Tat das Sinnvollste, für jeden Request ein eigenes Objekt anzulegen.
Andernfalls fällt dir später die Unterscheidung schwer, welche Anfrage da nun gerade beantwortet wurde(dies liesse sich zwar auch mit einem einzigen Objekt irgendwie anstellen, aber wozu die Mühe...Objekte kosten nichts )

Du kannst ja mal hier hereinschauen:
http://www.tutorials.de/forum/javas...x-http-requests-unter-kontrolle-behalten.html

Dort wird im Grunde genommen dein Problem behandelt....du hast 1 Request-Objekt, weisst aber nicht, wessen Antwort dann jeweils gerade ankommt.
Du kannst mit dem Skript im Tutorial recht unumständlich beliebig viele Request-Objekte erzeugen, jedes mit seinen eigenen Parametern und Überwachungsfunktionen...so hast du immer den vollen Überblick

 

[DirkHo]

Hi Sven,

vielen Dank für die ausführliche Antwort! Dann werde ich das direkt mal so machen...

Vielen Dank und Grüße,

Dirk