komplexe Ajax Tutorials ?

[Aiun]

hi,

ich bin auf der suche nach AJAX-Tutorials die über die grundlagen hinausgehen. Also meistens wird gezeigt wie ich eine einfache Liste von Begriffen abfrage, oder einen einzelnen begriff erhalte.

Meine Gedanken gehen eher dahin eine Seite komplett auf AJAX aufzubauen, so das HTML-Code über AJAX geladen wird und in bestimmte Bereiche (divs o.ä.) eingefügt / angehängt wird...

oder wenn Operationen auf dem server länger dauern, das man die Ergebnisse nach und nach anfügt.

mir geht es nicht unbedingt um die AJAX-Frameworks, da ich ersteinmal selbst wissen will / muss wie es funktioniert.

weis einer von euch wo ich komplexere Tutorials finde ?

(und bitte kein www.google.de, da hab ich selbst nachgesehen ^^)

danke

[geloescht_JesterDay]

Meine Gedanken gehen eher dahin eine Seite komplett auf AJAX aufzubauen, so das HTML-Code über AJAX geladen wird und in bestimmte Bereiche (divs o.ä.) eingefügt / angehängt wird...

[...]

mir geht es nicht unbedingt um die AJAX-Frameworks, da ich ersteinmal selbst wissen will / muss wie es funktioniert.

Die Seite komplett auf AJAX aufzubauen ist kein guter Stil, da Javascript nicht zwingend vorhanden sein sollte bei einer guten Seite. Ich hab aber auch schon (zumindest eine kleine Machbarkeitsstudie) Win-Anwendung für AJAX umgesetzt, die es auch nicht anders tut. Egal...

Wie es funktioniert... nunja, also deine Seite beinhaltet Javascript, welches eine Datei auf dem Server aufruft, die dann die gewünschten Inhalte zurückgibt. Diese zurückgegebenen Inhalte setzt Javascript dann an die Stelle im (HTML) Quelltext, wo sie angezeigt werden sollen.

Das ist die kurz und knapp Version "Wie funktioniert AJAX".

Wie du deine Datei auf dem Server aufbaust bleibt dir überlassen. Sie muss nur das gewünschte zurückliefern (z.B. php-Datei mit Parameterübergabe per POST). Wie es zurückgeliefert wird ist auch deine Wahl:

1: fertiges HTML, was dann von Javascript nur noch eingefügt werden muss:

getElementByID("InhaltsDIV").innerHTML = AjaxReturn; (*)

// AjaxReturn ist dabei das gelieferte fertige HTML

2: Als XML

var Inhalt = XMLData.getElementsByTagName("Inhalt")[0];

getElementByID("InhaltsDIV").innerHTML = Inhalt;

// XMLData ist die zurückgegebene XML-Struktur

3: Wie 2. aber als JSON Struktur:

var  MyJSON = eval(AjaxReturn);

getElementByID("InhaltsDIV").innerHTML = MyJSON.Inhalt;

Bei 2 und 3 kannst du entweder komplettes HTML übergeben oder per Javascript das DOM editieren und deine Struktur aufbauen etc. document.createElement("A") etc. siehe hier (auch für weitere Javascript DOM-Befehle). Die DOM-Struktur selber aufzubauen ist halt aufwendiger, mit Frameworks spart man sioch dann halt tiparbeit etc Das benötigte HTTPRequestObject (für die AJAX Anfragen) erzeugst du so (browserübergreifend):

// create and return the HTTP-Object

function getHTTPObject()

{

  var xmlhttp;

  /*@cc_on

  @if (@_jscript_version >= 5)

    try

		{

      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

    }

		catch (e)

		{

      try

			{

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

      }

			catch (E)

			{

        xmlhttp = false;

      }

    }

  @else

  xmlhttp = false;

  @end @*/

  if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

    try

		{

      xmlhttp = new XMLHttpRequest();

    }

		catch (e)

		{

      xmlhttp = false;

    }

  }

  return xmlhttp;

}


// We create the HTTP Object

var http = getHTTPObject();

Eine AJAX Anfrage stellen:

http.open("GET", ServerScript + params, true);

http.onreadystatechange = handleHttpResponse;

http.send(null);

Wobei Serverscript hier der Name (u.U. Pfad und Absolute Adresse, wie ein Link eben) des Serverskripts ist und die Parameter auch normal wie im Link aufgebaut sind. onreadystatechange ist das Event für die Statusänderung des Objects.

// handle the Response

function handleHttpResponse()

{

  //*** request finished?

	if (http.readyState == 4)

	{

	   // is the result ok?

	   if (http.responseText.indexOf('invalid') == -1)

	  {

            doSomething(http.responseXML);

          }

	}

}

Das ganze sind Ausschnitte aus einer "Von-Hand" Ajax-Anwendung von mir. Die liegt aber schon ne ganze Weile zurück und mittlerweile benutz ich Prototye bzw Script.aculo.us. Z.B. weiß ich nicht mehr, warum http.send(null); beim Aufruf folgen muss, ist halt einfach so

*: Ja, ich weiß das innerHTML nicht offiziell ist, aber es wird auch von AJAX-Frameworks benutzt und funktioniert.

[etreu]

Willst du komplett selbst machen, oder überlegst du dir u.U. auch ein Framework zu benutzen. Falls ja, kann ich www.openrico.org empfehlen.

[Aiun]

bei Frameworks habe ich das Problem, das ich sie bei Fehlern kaum / gar nicht warten könnte.

hmm, ist innerHTML nicht seit xHTML nicht mehr dabei (und verpönt ^^) ?

ich hatte mal eine funktion um einen XML-baum element für Element anzuhängen, aber da funktionierte kein Stylesheet das für HTML vorgesehen war.

Das seiten über JS nicht erreichbar sind für alle ohne JS ist mir relativ wurscht, ich kenne niemanden mehr der es aus hat und die vorteile sind doch nicht zu unterschätzen.

danke soweit, werde mir das nochmal ansehen.

[Aiun]

wie sieht es mit AJAX und Traffic bzw. Performance aus ?

an sich kann ich den traffic ja reduzieren, da ich nur noch die benötigten Daten ziehe.

Aber Beispiel:

ich habe eine Tabelle in der Artikel nach Bustaben sortiert sind. Da es recht viele Artikel sind, lade ich die Tabelle über Ajax, einen Bustaben nach dem anderen. (erst Artikel mit A, dann mit B ...)

Steigt dadurch nicht die Last auf der Datenbank und/oder dem Server merklich ?

Anstatt eine, führe ich ja dann mehrere Abfragen aus.

Erfahrungen / ideen ?

[geloescht_JesterDay]

Steigt dadurch nicht die Last auf der Datenbank und/oder dem Server merklich ?

Anstatt eine, führe ich ja dann mehrere Abfragen aus.

Würde ich nicht sagen, da einzelne Abfragen einen DB-Server kaum belasten sollten. Und Anstelle einer Abfrage mit (bsp.) 100KB Ergebnis machst du jetzt 10 Abfragen mit je 10 KB Ergebnis. Der Unterschied ist nur, dass du die 10 Abfragen nur genau dann machst, wenn du sie brauchst. Im Normalfall wirst du also immer viel weniger als 100KB übertragen.

Ich geh jetzt davon aus, dass die Buchstaben nicht alle gleichzeitig angezeigt werden. Wenn sie aber doch alle auf einer "Seite" zu sehen sind, macht es IMHO nicht viel unterschied, außer, dass die ersten Buchstaben villeicht früher zu sehen sind und der Anwender davon ausgeht, dass die Tabelle komplett fertig ist schon, was sie aber nicht zwangsläufig ist.

Du könntest mit Ajax aber z.B. ein "Bitte warten..." über die Tabelle legen und das wieder Ausblenden, wenn der Ladevorgang beendet ist. Deine Webanwendung kann mit Ajax genauso aussehen (naja, also vom Verhalten etc.), wie eine Desktopanwendung, und sich auch so verhalten.

[°°Ben³]

Such doch auch mal auf diesen Seiten nach Informationen ..

--> http://ajaxian.com/

--> http://en.wikipedia.org/wiki/Ajax_%28programming%29#External_links

--> http://www.drweb.de/weblog/weblog/?p=454

--> http://ajaxpatterns.org/wiki/index.php?title=Main_Page