Rico AJAX Framework minimal

Linkwerbung:

Geschrieben von Sandro Feuillet in Java Script
Montag, 26. September 2005

Ich habe das Rico Framework entdeckt und habe die gezeigten Beispiele (z.B. dieses) zuerst einfach nicht lokal zum Laufen gebracht. Die Dokumentation ist noch ziemlich dünn, und nachdem ich es endlich geschafft hatte, hier für den nächsten mit dem selben Problem, die minimalste Rico AJAX Applikation.

Die "Applikation" macht nichts anderes, als ein Div innerhalb einer Tabelle durch ein anderes DIV (aus der PHP-Datei) zu ersetzen. Der Vorteil daran ist, dass ausschliesslich das DIV ersetzt wird, ohne das ganze HTML Gerüst darumherum neu zu laden. Halt den AJAX-Vorteil.

Anforderungen

rico.js (im Ordner scripts) download
prototype.js (im Ordner scripts) download
getPersonInfo.php Beispiel

Die beiden Javascript Dateien enthalten das Rico Framework und einige benötigte Funktionen. Die Datei getPersonInfo.php kann auch mit einer beliebigen anderen serverseitigen Scriptsprache, auf Anfrage hin eine XML Datei zurückliefern (Achtung, HTTP-Header auf XML umschreiben). Wenn diese Anforderungen erfüllt sind, kann der folgende Code das gewünschte Stück HTML ersetzen. Das funktionnierende Beispiel gibts hier. Details zu den JavaScript Funktionen, bitte im Handbuch nachlesen. Mit diesem Beispiel wird man auch schlau daraus.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Rico AJAX minimal</title>
<script src="scripts/prototype.js"></script>
<script src="scripts/rico.js"></script>
<script>
var onloads = new Array();
function bodyOnLoad() {
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();}
</script>
</head>
<body onload="javascript:bodyOnLoad()" >
<script type="text/javascript">
onloads.push( registerAjaxStuff );

function registerAjaxStuff() {
ajaxEngine.registerRequest( 'getPersonInfo', 'getPersonInfo.php' );
ajaxEngine.registerAjaxElement( 'personInfo' );
}

function getPersonInfo(selectBox) {
ajaxEngine.sendRequest( 'getPersonInfo' );
}
</script>
<div id="rolodexAccordion" style="width:600px">
<div id="rolodexTabContent" class="accordionTabContentBox">
<table cellspacing="5" cellpadding="5" border="1">
<tr><td valign="top">
<a href="javascript:getPersonInfo(this)">Ersetze den Inhalt</a>
</td>
<td>
<div style="display:inline" id="personInfo">Zu ersetzender Text.</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>

Kommentare (10) - Trackbacks (0)

< Javascript Snippets | Aufklappbares Menu >

Trackbacks

Trackback für spezifische URI dieses Eintrags

Keine Trackbacks

Kommentare

Ansicht der Kommentare: (Linear | Verschachtelt)

Hallo Sandro
Das was du unter Anforderungen aufgelistet hast, ist alles was man für AJAX braucht?

#1 Sam (Homepage) am 26.09.2005 21:42 (Antwort)

Also für dieses Beispiel schon. Und wenn man das erstmal hat, kann man darauf aufbauen. AJAX ist ja nichts anderes als Javascript von daher reicht sogar schon ein Browser, aber man möchte ja auch dynamische Inhalte, dann brauchts noch eine serverseitige Scriptsprache wie z.B. PHP oder Perl.

Gruss Sandro

#1.1 Sandro (Homepage) am 26.09.2005 21:53 (Antwort)

Ok. Ich habe gedacht, es müsse noch etwas auf dem Server installiert sein.

Nun in dem Fall werde ich sicher mal etwas ausprobieren.

Danke!

#1.1.1 Sam (Homepage) am 26.09.2005 21:57 (Antwort)

Natürlich muss etwas auf dem Server installiert sein!

Der Request-Handler liegt auf dem Server und der Response-Handler ist ein Javascript, das im Browser ausgeführt wird.

Der Request-Handler im obigen Beispiel ist das Skript getPersonInfo.php.

HTH, Martin

#1.1.1.1 Martin Lemke am 20.01.2006 08:59 (Antwort)

Deine Links stimmen nicht (mehr). Korrektur:

[prototype]
http://www.openrico.org/dist/current_build/prototype.js
[rico]
http://www.openrico.org/rico/download_file/current_build/rico.js

Ich habe rico erst gestern entdeckt und beim Studium der Doku ebenfalls die Idee geboren, den Response-Handler in php zu schreiben.

Um nicht das Rad neu zu erfinden,suchte ich nach fertigen Lösungen und fand so Dein Blog. Enthält deine Datei getPersonInfo.php tatsächlich lediglich den xml-Part des Requests?

Es gibt ja HTML_AJAX unter den Pear-Packeten (Alpha-Stadium), aber die Beispiele laufen bei mir nur teilweise. Eine Doku, die ihren Namen verdient, gibt es nicht. Daran kranken wohl viele Projekte; sie gewinnen kaum Popularität, weil sie nicht dokumentiert sind.

Anfangs reserviert: "Ajax, was ist denn das schon wieder?", fühle ich mich jetzt von Ajax infiziert.

Martin

#2 Martin Lemke am 20.01.2006 08:54 (Antwort)

Hallo Martin

Danke für den Hinweis, habe die Links korrigiert.

Gruss Sandro

#2.1 Sandro (Homepage) am 20.01.2006 09:22 (Antwort)

Ich habe Deine Beispiele mal etwas entschlackt und modifiziert, sodass es einerseits etwas aktiver ist, aber andererseits minimalistisch genug, das wesentliche gleich zu erkennen:

Html-Dokument time.html:

CODE:

<br /> <br /> <br /> <br /> <br /> Rico AJAX minimal<br /> <br /> <br /> <br /> var onloads = new Array();<br /> function bodyOnLoad() {<br /> for ( var i = 0 ; i < onloads.length ; i++ )<br /> onloads[i]();}<br /> <br /> <br /> <br /> <br /> onloads.push( registerAjaxStuff );<br /> <br /> function registerAjaxStuff() {<br /> ajaxEngine.registerRequest( 'getTimestamp', 'gettimestamp.php' );<br /> ajaxEngine.registerAjaxElement( 'timestamp' );<br /> }<br /> <br /> function getTimestamp(selectBox) {<br /> ajaxEngine.sendRequest( 'getTimestamp' );<br /> }<br /> <br /> <br /> <br /> <br /> Aktualisiere Uhrzeit<br /> 00:00:00<br /> <br /> <br /> <br /> <br /> <br />

Einige Tags mussten korrigiert werden. Nun ist es valides HTML 4.0 Transitional; vorher waren Fehler drin.

Request-Handler gettimestamp.php:

CODE:

Die Unterverzeichnisse der importierten RICO Ajax-Framework sind ggf. anzupassen. Im Moment steht dort:
und

Viel Spaß! Martin

#3 Martin Lemke am 20.01.2006 10:26 (Antwort)

Also die Client-Seite habe ich ja mittlerweile verstanden, aber was muss denn nun in der php-Datei zwischen stehen? Das kann doch nicht nur " " sein, um in deinem Fall die Zeit nachzuladen! Wo kommt denn da die Zeit her? Oder im Fall von getPersonInfo.php: Wie kann ich denn dynamisch auch andere Personendaten übergeben. Den XML-Code muss doch irgendeine Funktion zusammenbasteln und als, so glaube ich, als string zurückliefern. Aber es klappt einfach nicht.
Und übrigens kann ich das getPersonInfo-Beispiel auch nach Anpassen bei mir nicht ausführen. (Javascript ist eingeschaltet!, rico.js, prototype.js, index.php und meineFunktion.php liegen alle im Webrootverzeichnis bei mir, aber ajas funktioniert nicht.)
Irgendwelche Ideen, was ich vergessen haben könnte?

#3.1 Janet am 23.01.2006 16:38 (Antwort)

Also bei mir läuft das Beispiel leider auch nicht zu Hause. Hab alles kopiert und angepasst. Nutzte Firefox 1.5. Auf deiner Webseite funktioniert das Beispiel, wenn ich aber alles kopiere und den "scripts" Ordner ... anlege, passiert nichts, wenn ich auf den Link klicke? Das kann ich mir nicht erklären.

#3.1.1 Frank am 06.03.2006 01:01 (Antwort)

Mich würde Interessieren wie man aus einer Datenbank etwas ausliest und diese als XML ausgibt, solange ich XML "Hardgecoded" in die getpersonInfo.php schreibe ist alles ok, dynamisch macht er zicken ....

#4 sepp am 07.02.2006 17:13 (Antwort)

Kommentar schreiben

Name
E-Mail
Homepage
Antwort zu
Kommentar	Umschließende Sterne heben ein Wort hervor (wort), per _wort_ kann ein Wort unterstrichen werden. Standard-Text Smilies wie :-) und ;-) werden zu Bildern konvertiert. Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet. Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss um dieses Verfahren anzuwenden. Hier die Zeichenfolge der Spamschutz-Grafik eintragen: BBCode-Formatierung erlaubt
	Daten merken? Bei Aktualisierung dieser Kommentare benachrichtigen

Hier lesen Sie Artikel von Sandro Feuillet. Ich lebe und arbeite in Zürich. Der Feuman Weblog ist mein Arbeitsagebuch, wo ich nützliche Links, interessante Code- fragmente oder Gedanken zu aktuellen Themen festhalte.

Xing (OpenBC) (?)
Facebook

Blog abonnieren

Artikel: RSS
Kommentare: RSS
Besucher-Karte

Creative Commons

Der Inhalt dieses Werkes ist lizensiert unter der Creative Commons Lizenz

Suchwörter

sony ericsson pc suite
Formular erstellen MS Office
fValidate_5_01b.zip
INfopath code string format
fvalidate download
desktop suchmaschinen
t
sql designer
saeco sg200
onsubmit validateForm(

Suche

Neuste Kommentare

vince zu Zappen im Web 2.0: fichey.com
Sa, 22.11.2008 17:59
schön wie du dich zu den nervi gen Linkgs geäußert hast ... a ber dann solltest du es auch b esser machen

Tobias T. zu Google launcht Instant Messenger "Google Talk"
Mi, 23.07.2008 11:50
Ich hätte auch gern einen GMai l-Account

Einladung bitte an toto_rocks@gmx.net ! _Da nkeschööön_ !

ugugu zu Printies im Netz und ihr Umgang mit Hyperlinks
Mi, 02.07.2008 19:20
Der erste und der letzte Link funktionieren nicht, der Link auf die Story beim Kleinreport hätte mich allerdings i [...]

Viet Nguyen zu peterbailey.net down - download fValidate here
Mo, 05.05.2008 05:36
Thanks for fvalidate. I search ed this one and thought cannot find it anymore. You saved my day.