Ajax Request und Fading

multivan

New member
24 Februar 2009
2
0
Hallo

ich habe mir zwei scripte aus dem Netz gesucht.
In dem Einen wird ein einfacher Ajax Request durchgeführt.
Das zweite führt einen EinblendEffekt durch.
Nun möchte ich diese beiden scripts verbinden sodas der neue Inhalt eingeblendet wird ...

leider sind die Timings schlecht.

Ajax Request:
PHP:
function ajaxPost(url, postData, callback) {
	var req;
 	try {
		req = window.XMLHttpRequest ? new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP"); 
	} catch (e) {
		alert('Fehler AjaxJS!');
	}
		
	req.onreadystatechange = typeof callback == 'function' ? callback : function() {
		if (req.readyState == 4 && req.status == 200) {
							
			if(typeof callback == 'string') callback = document.getElementById(callback);

			if(callback) {
			// callback.style.display = 'none';
			callback.innerHTML = req.responseText; 

			}
			
		}
	};


	req.open('POST', url, true);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.send(postData);

// Durchführung des fading:
	fade(callback);
	
	return false;
}

Fadingscript:
PHP:
function fade(eid,was)
{

 var TimeToFade = 450.0;
  var element = document.getElementById(eid);
 if(element == null)
   return;

  if(element.FadeState != null)
  {
    if(element.style.opacity != null
        || element.style.opacity == ''
      || element.style.opacity == '0.8')
   {
      element.FadeState = -2;
    }
    else
    {
      element.FadeState = 2;
    }
  }
  
  if(element.FadeState == 1 || element.FadeState == -1)
  {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
  }
  else
  {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    element.style.display = element.FadeState == 2
        ? 'none' : 'block';
    setTimeout("animateFade(" + new Date().getTime()
        + ",'" + eid + "')", 33);
		
  }
}

function animateFade(lastTick, eid)
{
  var TimeToFade = 250.0;
  var curTick = new Date().getTime();
  var elapsedTicks = curTick - lastTick;
 
  var element = document.getElementById(eid);
 
  if(element.FadeTimeLeft <= elapsedTicks)
  {
    element.style.display = element.FadeState == 1
        ? 'block' : 'none';
    element.style.opacity = element.FadeState == 1
        ? '.85' : '0';
    element.style.filter = 'alpha(opacity = '
        + (element.FadeState == 1 ? '85' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
  }
 
  element.FadeTimeLeft -= elapsedTicks;
  var newOpVal = element.FadeTimeLeft/TimeToFade;
  if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

  newOpVal = newOpVal*0.85;
  element.style.opacity = newOpVal;
  element.style.filter =
      'alpha(opacity = ' + (newOpVal*100) + ')';
 
  setTimeout("animateFade(" + curTick
      + ",'" + eid + "')", 33);
}

kann mir jemand helfen???:LOL:
 
die Funkionen laufen nur beim einblenden wird das Fading erst durchgeführt sobald der Text eingefügt wurde.
Daher möchte ich, dass die "callback.innerHTML = req.responseText" Teil mittels Fading eingeblendet wird und nicht nacheinander abläuft.
Sonst blendet der Text vom Request kurz auf und wird dann erst eingeblendet.
 
Zuletzt bearbeitet:
Wenn du fading mit Ajax machen möchtest schau die mal prototype.js und script.aculo.us an. Script.aculo.us hat den Fade effekt in Ajax schon vordefiniert und lässt sich leicht erweitern. auf den Seiten findest du Dokumentationen wie du diese frameworks anwendest.
Darüberhinaus findest du hier die Möglichkeit Effekte paralell ablaufen zu lassen
 
Für das reine DOM-Querying gibt's SlickSpeed, mit dem Du live testen kannst, wie sich die Libraries so verhalten. Ist leider etwas out-of-date, da mit jQuery 1.3 Sizzle ins Spiel kam, was auf jeden Fall noch etwas Performancegewinn gebracht haben dürfte.

[edit]
Achja, Dromaeo hat auch noch einen Test, der direkt Prototype und jQuery vergleicht:

:arrow: https://dromaeo.com/?jslib
[/edit]

Ich würde Performance aber nicht nur auf die reine CPU-Performance reduzieren. Mit Prototype habe ich ziemlich lange, ziemlich gerne gearbeitet und musste mir dann arbeitsbedingt jQuery angucken. Inzwischen würde ich nie wieder jemandem zu Prototype raten - ausser als Einstieg in die Materie, da es leichter verständlich ist, wenn man kein JS kann.

Das Arbeiten mit jQuery macht in meinen Augen einfach viel mehr Spass, da es irgendwie intuitiver ist. Ich habe immer ein Objekt des gleichen Typs, auf dem ich arbeiten kann, die Plugins sind wirkliche Plugins, die sich in die Library integrieren und als allerwichtigstes - jQuery wird äußerst aktiv weiterentwickelt, während Prototype scheinbar stillzustehen scheint.

Als i-Tüpfelchen missfällt mir bei Prototype inzwischen, dass es die Prototypen der Javascript-Objekte erweitert (ja, ich weiss, daher kommt der Name, aber trotzdem...) und den globalen Namensraum wesentlich mehr beeinflusst als jQuery:

:arrow: https://mankz.com/code/GlobalCheck.htm
 
Zuletzt bearbeitet:
Es gibt nicht aktuelles und wie representativ die Tests sind, ist wieder eine andere Frage, gibt andauernd neue Tests, die wieder den alten wiedersprechen usw.
Andere Tester andere Ergebnisse ;)


Fest steht jedoch, dass die neue CSS-Selektor-Engine in JQuery (Sizle hieß die glaube ich) schneller ist als alle anderen Engines momentan. Diese Engine stammt jedoch nicht von JQuery selbst sondern von Dojo glaube ich, wie sinnvoll es ist in einem Framework Fremdkomponenten in den Core zu setzen, muss jeder für sich entscheiden.

Ich finde da die Mootools-Entscheidung besser lieber auf die eigene Engine zu setzen, da es mit Bug-Behebung usw viel einfacher ist als alles an ein anderes Projekt weiterdilegieren zu müssen, die das vllt überhaupt nicht in Angriff nehmen, weil sie andere Prioritäten haben.
 
Naja, aber ob's deshalb von Dojo "stammt" ist dann wohl 'ne andere Frage. Immerhin sind fast alle Commits immer noch von John Resig und jQuery kommt wesentlich öfter im Zusammenhang vor als Dojo.

Aber bevor's auf Erbsenzählen hinaus läuft: Wir wissen ja, wie's gemeint ist. ;)