einfachstes Ajax Bsp in Domino das geht

[flaite]

HI,

von den unteren Dateien die Endungen ändern. books.txt in books.xml, die andere in .html

Ich beschäftige mich damit z.Zt. primär von der Java Schiene aus, werde aber keine DWR und sonstigen Java only Sachen posten, sondern nur die auf die Domino gehen.
Auch kein Ruby on Rails, VB.NET oder pHp. (Viele Beispiele sind für diese Plattformen).

Bin selber noch Anfänger und hier erst einmal ein sehr einfaches Ajax Beispiel.
Man kann das einfach z.b. in einen selbsterstellten Ordner Ajax im Ordner Domino-Data/domino/html tun (Beide Dateien).

Das gute an einfach ist vielleicht, dass man da als Einsteiger einen gewissen Überblick behält, worum es bei Ajax eigentlich ungefähr geht.

dann Notes-Server hochfahren und http://127.0.0.1/ajax/MyHtml.html in Mozilla oder IE.
Auf den "Get a Document"-Knopf drücken.
Es werden vom Server Daten gelesen, ohne das die Seite im Browser neu geladen wird:

zum Quellcode:

Code

var xmlhttp= null; // (1)
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // (1)
    
    function GetIt(url) {
    	alert ("in GetIt"); 
    	if (xmlhttp) {
    	   
    	} else if (window.XMLHttpRequest){
    		 // for other browsers
			xmlhttp = new XMLHttpRequest(); // (1)
			
		} else {
			alert("browser not supported"); 
			return;
		}
    	xmlhttp.open('GET', url, false); //(2)
    	xmlhttp.send(null);
    	alert("Ergebins=" + xmlhttp.responseText);  
    	document.getElementById('result').innerHTML = xmlhttp.responseText; // (3)
    	 
    
   	}

1. xmlhttp ist ein extra Ajax-unterstützendes Objekt, dass es in IE, Mozilla und anderswo gibt.
2. mit diesem Objekt kann aus dem JavaScript der Webseite selber ein Request gegen den Server, der die Seite geliefert hat, abgesendet werden (und die Antwort empfangen werden).
Der 3. Parameter von xmlhttp.open ist  false. Das bedeutet, dass dieser Request synchron ausgeführt wird. (nicht asynchron). Das Beispiel ist also gar kein AJAX (das erste A steht für asynchronous) sondern vielleicht SJAX 
3. über document.getElementById etc. wird per Web-DOM die Antwort des Servers in die Webseite eingefügt.

Verbesserungen folgen.

Gruß Axel

[flaite]

Neue Version.
MyHtml.html kann mit der neuen Version (Attachment) ausgetauscht werden.
Dafür muß der Notes Server nicht runtergefahren werden. Dafür aber aufpassen auf Browser-Cache:
Shift + Aktualisieren Button.

Vorsicht: Der untere Teil des Javascripts ist völlig auskommentiert.

Es ist nun wirklich Ajax.
Parameter dieser Methode ist true, also findet der Aufruf gegen den Server asynchron statt.

Code

xmlhttp.open('GET', url, true);
    	

Vor dem Send wird nun ein Callback-Handler für den Ajax-Objekt (also xmlhttp)  ->EventHandler onreadyStateChange definiert (updatePage).

Code

xmlhttp.onreadystatechange = updatePage; 
    	xmlhttp.send(null);

updatechange ist eine von mir definierte Funktion:

Code

function updatePage() {
   	if (xmlhttp.readyState == 4) {
       if (xmlhttp.status == 200) {
         
   		alert("serverResponse=" + xmlhttp.responseText);  
    	document.getElementById('result').innerHTML = xmlhttp.responseText; 
    	}
    }
    	
   	}

Diese Funktion wird immer dann aufgerufen, wenn ein Event ReadyStateChange des Ajax-Objektes einläuft. Muß man sich ein bischen vorstellen wie QuerySave und ähnliches in Notes. Das wird ja auch immer dann aufgerufen, bevor das Dokument gespeichert wird.
Das ist Event-orientierte Programmierung. Gibts ja in Notes viel.

Der Browser ruft nun diese Methode bei State-Änderungen des Ajax-Objekts (xmlhttp) auf. Es sind 5 states definiert.

    *  0: The request is uninitialized (before you've called open()).
    * 1: The request is set up, but hasn't been sent (before you've called send()).
    * 2: The request was sent and is being processed (you can usually get content headers from the response at this point).
    * 3: The request is being processed; often some partial data is available from the response, but the server hasn't finished with its response.
    * 4: The response is complete; you can get the server's response and use it.

Nur der Status 4 (alles fertig) interessiert uns. Deshalb das erste if in der Funktion

Code

updatePage() {
    if (xmlhttp.readyState == 4) {

Das 2. if prüft dann,  der Server auf den Request des Ajax Objekt mit ok. (http-state 200)  geantwortet hat.

Code

if (xmlhttp.status == 200) {

Dann wird die Antwort wieder in die Web-Dom Repräsentation der im Browser dargestellten Webseite reingeschrieben... und vorher in eine alert-box ausgegeben (hatten wir in Beispiel 1 schon):

Code

alert("serverResponse=" + xmlhttp.responseText);  
    	document.getElementById('result').innerHTML = xmlhttp.responseText; 

EINFACH AUSPROBIEREN. DANN KÖNNTE ES KLAR WERDEN, WORUM ES HIER GEHT.

WIRKLICH GUTER ARTIKEL:
http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/?ca=dgr-lnxw07AJAX-Request
Hier wird eine Menge erklärt (auch von dem hier von mir publizierten Code).
Der Autor hat auch ein Buch in Kathy Sierras / Bert Bates "head first" Serie zu Ajax publiziert. Dies hab ich mir direkt über Caiman America (mein neuer Lieblings Amazon Discounter) für 22.90 Euro gekauft.

ÜBRIGENS:
Es sollte sich ja inzwischen rumgesprochen haben, dass JavaScript und Java 2 völlig unterschiedliche Sachen sind. Bei Ajax nutzt man schon bei den einfachen Beispielen oben Konstrukte, die xTreme un-java sind.
Z.B. einen event-Handler einfach mit der Zeile:

Code

xmlhttp.onreadystatechange = updatePage; 

JavaScript ist von seinem Wesen her näher an common-lisp denn an Java ist. Was das bedeutet weiss ich auch nicht so richtig. Ich hab das nur gelesen und nicht richtig verstanden,  weil ich kein common-lisp kann. Auf jeden Fall kann ich sagen, dass es in JavaScript Konstrukte gibt, die es in Java so nicht gibt.

Gruß Axel

[HaPe]

Hi,

wenn du noch ein gutes Beispiel suchst schau mal hier:
http://www.codestore.net/apps/dragsort.nsf
http://www.codestore.net/store.nsf/unid/FISR-6MEKTD?OpenDocument
http://www.codestore.net/store.nsf/unid/BLOG-20060307?OpenDocument

und das beste zum Schluss:
http://www.codestore.net/apps/namepick.nsf/demo?OpenForm

Gruß
  Hape

[flaite]

Danke. Die sind natürlich gut.
Aber ich kenne die schon.
Ich versuche hier ein eigenes Verständnis für Ajax zu entwickeln.
Ausgehend von ganz einfachen Elementen.
 

[animate]

ich fand diesen Artikel recht gut, als ich mich anfänglich damit beschäftigt habe.
Da wird vermutlich aber auch nicht mehr drinstehen, als in dem von IBM, auf den du linkst. Nur kürzer is er.
Ich würde ganz schnell von dem XmlHttpRequest-Objekt zu einer Javascript-Bibliothek (prototype, www.ajaxtoolbox.com, etc.) wechseln, die dir den ganzen Kleinkram abnimmt. Das spart eine Menge Zeit.

*edit* hatte glatt vergessen auf den Artikel zu linken, von dem ich schreibe...

[flaite]

Ich würde ganz schnell von dem XmlHttpRequest-Objekt zu einer Javascript-Bibliothek (prototype, www.ajaxtoolbox.com, etc.) wechseln, die dir den ganzen Kleinkram abnimmt. Das spart eine Menge Zeit.

Hab ich vor. War aber zum Verständnis nicht schlecht, das 1x zu Fuß gemacht zu haben.

Gruß Axel

[animate]

In dem Zusammenhang vielleicht gerade interessant:
W3C has released the first public working draft of XMLHttpRequest object.

[flaite]

Es werden mittlerweile eine Menge von mini Tutorials gerade auch für die Libraries ins Web gestellt.
Z.B. http://www.sergiopereira.com/articles/prototype.js.html
Wobei der Autor ziemlich schnell auf die Besonderheiten auf JavaScript gegenüber Sprachen wie Java oder VB.NET eingeht. Clossures, JSON Syntax, Methoden sind Objekte, die Assoziative Array Geschichte und und und.
Man kann wohl am besten über die Tutorials das alles begreifen (glaub ich). Hinzu kommt, dass viele unterschiedliche serverseitige Infrastrukturen benutzt werden:
ca. in der Reihenfolge:
1. php
2. Ruby On Rails
3. VB.NET
lange nix.
4. J2ee

Als Ziel könnte man sich hier setzen, es zumindest versuchen HELP-on-Web ein bischen Ajax-mässig in den Griff zu bekommen. Aber das würde schon einiges an Mitarbeit erfordern.

Gruß Axel