Dienstag, Februar 20, 2007

Kleine Übersicht - AJAX - AJAX Frameworks

Javascript/CSS

Viel der Dynamischen Funktionalität kann einfach über JavaScript/CSS erreicht werden. HTML Objekte haben ein „style.display“ Attribut. Dieses kann verschiedene Werte annehmen, z.B. „Block“ oder „none“.

Ajax

Ajax erlaubt eine asynchrone Datenübertragung. Dadurch können Teile einer HTML Seite nachträglich geladen, bzw. aktualisiert werden. Dies verringert den Traffic und die Serverlast und macht das Surfen angenehmer. Zudem wird kein zusätzliches Plug-in benötigt sondern lediglich JavaScript muss aktiviert sein.

2. Übersicht

3. Prototype

Prototype ist ein kleines AJAX Framework, welches aus einer knapp 2000 zeiligen Javascript Datei besteht. Es ist unter http://prototype.conio.net/ frei bezüglich und liegt momentan in der Version 1.4 vor.

Kern des Frameworks ist die Klasse Ajax.Updater und Ajax.Request. Dadurch lassen sich Ajax Anfragen sehr einfach und schnell vollziehen.


function suche(str,id){

var url = 'autocomplete.php';

var pars = 'str='+str+'&colName='+id;

var target = "table_div";

var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars,onComplete: showResponse});

}

url bezieht sich auf die Datei welche auf dem Server liegt, mittels par werden die Parameter übergeben, target bezieht sich auf ein HTML Container, welcher das Resultat darstellen wird.

Im Weiteren stellt Prototype einige andere praktische Funktionen zur Verfügung, z.B. $() welches document.getElementById() abkürzt usw.

So gesehen ist Prototype nicht eigentlich ein Framework sondern vielmehr eine Ansammlung von Javascript-Objekt-Erweiterungen.

Das Problem bei Prototype ist die mangelnde Anbindung an PHP.


4. HTML_AJAX – Pear Package


HTML_AJAX ist erst als Beta Version (0.5) vorhanden. Es wird jedoch bereits produktiv eingesetzt. Dies lässt erhoffen, dass die Version 1.0 sehr stabil sein wird. Es ist ein Pear Package und daher meistens schon standartmässig vorhanden. Im Vergleich zu Prototype erlaubt HTML_AJAX eine enge Anbindung an PHP.

Es können remote PHP Klassen angesprochen werden. Diese müssen in einer externen Datei eingebunden werden. Dort wird ein HTML_AJAX_Server Objekt erstellt, und es werden dann Javascript Stubs erzeugt.

Diese Klasse kann jetzt ganz einfach in der Hauptdatei angesprochen werden. Es fehlen lediglich noch ein paar Zeilen Javascript.


Beispiel:


<html>



<head>



<script type="text/javascript" src="server.php?client=all"&gt;</script&gt;



<script type="text/javascript" src="server.php?stub=all"&gt;</script&gt;



<script type="text/javascript"&gt;



var callback = {



rot13: function(result) {



document.getElementById('target2').innerHTML = result;



},



upperCase: function(result) {



document.getElementById('target2').innerHTML = result;



},



invert: function(result){



document.getElementById('target2').innerHTML = result;



}



}



var remoteExample = new example(callback); // our php5/4 compat version



function add(){



HTML_AJAX.replace("target", "output.php");



}



&lt;/script&gt;



</head>



<body>



<input type="button" onclick="add()" value="Click"/>



<div id="target"></div>



<input id="input" />



<a href="#" onclick="remoteExample.rot13(document.getElementById('input').value)">rot13 input</a>



<a href="#" onclick="remoteExample.upperCase(document.getElementById('input').value)"&gt;upperCase input&lt;/a>



<a href="#" onclick="remoteExample.invert(document.getElementById('input').value)">Invert input</a>







<div id="target2"></div>



</body>



</html>


Die Funktion add stellt einen simplen AJAX Request dar. Output.php wird angefordert und wird dann in target dargestellt.

Will man die PHP Klassen und Funktionen, welche auf dem Server liegen, dann muss man wie folgt vorgehen:

In der Variablen callback wird festgelegt, was mit dem Return Wert der einzelnen Funktionen geschehen soll. Jetzt wird nur noch die Klasse (hier exmple) instanziert. Die eigentlich PHP Methoden können jetzt mittels Javascript angesprochen werden.

Die dazugehörige Klasse auf dem „Server“ sähe wie folgt aus:
&lt;?php

//a session is required(you can also set session.auto_start=1 in php.ini)
session_start();

require_once 'HTML/AJAX/Server.php';

class example {

function rot13($input) {

return str_rot13($input);

}

function upperCase($input) {

return strToUpper($input);

}

function invert($input){

$ar = array();

$arSort = array();

for ($i = 0; $i &lt; strlen($input); $i++)

{

$ar[$i] = substr ($input, $i, 1);

}

krsort($ar);

return implode($ar);

}


}

$server = new HTML_AJAX_Server();

$server-&gt;registerClass(new example());

$server-&gt;handleRequest();


?&gt;


Gute Einführung unter: http://blog.joshuaeichorn.com/slides/Introduction-To-HTML_AJAX/
Die offizielle Seite: http://htmlajax.org/HTML_AJAX/HomePage


5. Google Web Toolkit (GWT)

Das Google Web Toolkit erlaubt es, Ajax Anwendungen mit Java zu bauen. Die Applikation kann in Java entwickelt werden. Zur Verfügung stehen die Kernklassen java.lang und java.util. Dazu hat Google noch einige „GUI“ Klassen, sogenanne Widgets beigefügt. Diese enthalten alle HTML Elemente: Knöpfe, Formulare, Tabellen, Menus usw. (Bsp: http://code.google.com/webtoolkit/documentation/examples/kitchensink/demo.html).

Wie schon gesagt, wird der Code in Java entwickelt, das heisst, es stehen die ganzen Debugging Funktionen zur Verfügung! Wenn das Projekt fertig gestellt ist, wird es in JavaScript kompiliert. Der GWT Kompilier erzeugt Cross-Browser Kompatiblen JavaScript Code (so sagen sie auf jeden Fall). Anfragen an den Server können an JavaServlets erfolgen oder aber an PHP.

6. xajax

Homepage: http://www.xajaxproject.org

Grösse des Frameworks: 181 KB.

Sehr einfaches Framework, welches praktisch ohne Javascript auskommt! Eine Einführung findet sich unter: http://wiki.xajaxproject.org/Tutorials:Learn_xajax_in_10_Minutes, welche sehr gut erklärt.

Einfacher Code sieht wie folgt aus:

&lt;?php

require_once("xajax.inc.php");

$xajax = new xajax();
$xajax->registerFunction("myFunction");

function myFunction($arg)
{
// do some stuff based on $arg like query data from a database and
// put it into a variable like $newContent
// Instantiate the xajaxResponse object
$objResponse = new xajaxResponse();

// add a command to the response to assign the innerHTML attribute of
// the element with id="SomeElementId" to whatever the new content is

$objResponse-&gt;addAssign("SomeElementId","innerHTML", $newContent);

//return the xajaxResponse object
return $objResponse;
}


$xajax-&gt;processRequests();
&lt;html>
<head>
<?php $xajax->printJavascript(); ?&gt;
</head>
<body>

<div id="SomeElementId"&gt;</div>
<form action="get">
<input type="button" value="Insert" onclick="xajax_myFunction(SomeArgument);" /&gt;

</form>
</body>
Vorteil
  • Kaum Javascript Kenntnisse nötig.
  • Sehr einfach einzubinden

Nachteile

  • Eher prozedural orientiert

  • Layout und Programmierung schwer trennbar

7. Weitere Frameworks


  • XOAD - PHP Based Ajax Framework

  • Dojo – The Javascript Toolkit

  • Sajax – Tool

  • AjaxAC - PHP Based Ajax Framework

  • CPAINT - Ajax Toolkit (Cross-Platform Asynchronous INterface Toolkit)

8. Weitere Infos

PS: Die Codeschnipsel sind eher Ansätze als dass sie den Anspruch auf vollständigkeit erheben!

Eingestellt von Raphael um 10:05 PM

Labels: , , ,