Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1191

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1194

Warning: mysql_real_escape_string(): Access denied for user ''@'localhost' (using password: NO) in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197

Warning: mysql_real_escape_string(): A link to the server could not be established in /www/htdocs/w0091c68/wp-content/plugins/statpress/statpress.php on line 1197
2007 November | Ajaxschmiede.de


Nov 30 2007

Firefox Update auf Version 2.0.0.11

Tag: AllgemeinesTobi @ 12:43 am

Kaum ist das Update auf Version 2.0.0.10 durch, kommt auch schon die nächste Version. Aber so ist das nun, wenn Programmierer am Werk sind, Bugs entstehen immer. Der Fehler verhinderte das dynamische Zeichnen von Grafiken mit Hilfe des HTML5 Elementes „Canvas“ und der JavaScript Funktion „drawImage“.

Übrigens eignet sich Firefox auch bestens für die Entwicklung von Ajax Anwendungen. Mit Hilfe der Extension Firebug lassen sich Anwendungen während des Entwicklungsprozesses debuggen und erleichtern dem Entwickler die Arbeit.

Den Firefox-Browser könnt ihr über die folgende Grafik runterladen und installieren.


Nov 29 2007

jQuery – ein mächtiges und effizientes Werkzeug

Tag: jQueryPatrick @ 5:15 pm

Mit diesem Beitrag möchte ich über meine ersten Eindrücke des überaus mächtigen und dennoch schlanken Javascript-Frameworks jQuery veröffentlichen.

Zum Aufbau dieses Beitrags:

  • Was ist jQuery?
  • Wie verwendet man jQuery?
  • Die jQuery-Syntax …
  • … im Vergleich zum gewöhnlichen JavaScript
  • Vorteile / Nachteile

Was ist jQuery?

jQuery ist ein von John Resig entwickeltes, frei verfügbares Javascript-Framework, das über sehr umfangreiche und mächtige Funktionen zur Navigation und Manipulation der DOM-Syntax bereit stellt. Vor allem die vereinfachte Navigation und Einbindung gehören zu den Stärken des JS-Programmiergerüsts. Des Weiteren bietet das Framework elegante und leicht verständliche Funktionen für animierte Effekte, Ajax und Event-Handling.

Aktuell liegt jQuery in der Version 1.2.2 vor.

Wie verwendet man jQuery?

Um jQuery nutzen zu können, bindet man das Framework wie jede andere externe Javascript-Datei in seine Homepage ein. Das Integrieren sollte möglichst bereits im Header geschehen.

<script src="jQuery.js" type="text/javascript"></script></pre>

Die jQuery-Syntax …

Auf die Funktionen von jQuery greift man mittels des $-Operator zu. Zum Verketten von Anweisungen dient der Punkt-Operator ( . ).

Die jQuery-Syntax ist sehr an XPath und CSS-Selektoren angelehnt.

Der Zugriff auf Elemente, denen das id-Attribut zugewiesen wurde, erfolgt mit $(„#meine_id“).

Um auf alle Elemente eines bestimmten Tags zuzugreifen, verwendet man eine Anweisung wie $(„div“).

Der Zugriff aus Kindelemente kann über zwei verschiedene Ausdrücke erreicht werden. Zum einen besteht die Möglichkeit die entsprechenden Anweisungen in einem Aufruf auszuführen, zum Beispiel $(„#meine_id div“) um alle div’s innerhalb des meine_id-Objekts zu addressieren. Zum anderen bietet sich die children-Funktion an. Ein solcher Ausdruck sähe z.B. so aus $(„#meine_id“).children(„div“).

Einen ausführlicherer Überblick über die jQuery-Selektoren wird demnächst folgen.

Um beispielsweise a-Elementen beim Anklicken einen simplen Alert-Aufruf zu spendieren, verwendet man folgende Syntax:

$("a").click(function(){
alert("Vielen Dank für Ihren Besuch!");
return false;
});

Mit $(„a“) wird auf alle a-Element im Document Zugriff genommen. Auf diese Elemente wird ein click-Event angewandt, das beim Anklicken eine Alert-Box öffnet.

Das Absenden eines Ajax-Requests sieht dann wie folgt aus:

$.ajax(

{
type: "POST",
url: "datei.php",
data: "seite=ajaxschmiede&endung=de&inhalt=jquery",
success: function(antwort){
alert( "Senden erfolgreich: " + antwort );
}

});

Weiteres Event-Handling entfällt.

… im Vergleich zum gewöhnlichen JavaScript

Das oben genannte Beispiel mit dem Hinzufügen eines click-Events zu einer Reihe von a-Elementen, würde in normalen Javascript etwa wie folgt aussehen:

var path = document.getElementsByTagName("a");
for ( var i = 1; path[i]; i++ )
{
path[i].onclick(alert("Vielen Dank für Ihren Besuch!");
}

Ein gut implementiertes Script zur Verarbeitung von Ajax-Requests wäre im Vergleich zum übersichtlichen jQuery um einiges umfangreicher und weniger leicht verständlich. Bisher verwendete ich folgendes Script zur Übermittlung von Daten per Ajax:

var isWorking = false;
function my_ajax_request( file, data )
{
var xmlHttp = false;
/* create xmlhttp-element*/
// Mozilla, Opera, Safari and Internet Explorer 7
if (typeof(XMLHttpRequest) != 'undefined')
{
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp) // IE <= 6
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
}
}
/* if xmlhttp-element and no request exist */
if (xmlHttp && !isWorking)
{
/* file request */
xmlHttp.open('POST', file, true);
xmlHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
/* executed if state changed */
xmlHttp.onreadystatechange = function ()
{
if (xmlHttp.readyState == 4) // data loaded
{
if(xmlHttp.status == 200)
{
// function starts when loaded
alert("Senden erfolgreich: " + xmlHttp.responseText);
isWorking = false;
}
if (xmlHttp.status == 404)
{
// file not found
isWorking = false;
alert("no file found");
}
}
}
isWorking = true;
xmlHttp.send(data);
}
}

Quelle: http://de.wikipedia.org/wiki/XMLHttpRequest

Vorteile / Nachteile

jQuery ist ein Tool um viel Zeit und Code zu sparen. Mit Hilfe des Frameworks erschafft leicht lesbaren Javascript-Code, der sich leicht weiterverwenden lässt. Durch die enorme Flexibilität der Selektoren, bieten sich dem Designer / Coder nahezu grenzenlose Möglichkeiten. Die vielen bereits vorimplementierten Funktionen wie das Hin- und Herschalten zweier Funktionen auf einem Element (Toggle) oder die Effektfunktionen (Slide, Hide, usw.) ermöglichen es, in wirklich kurzer Zeit interessante Effekte in seine eigene Homepage einzubetten.

Einige praktische jQuery-Beispiele werden folgen.


Nov 28 2007

barrierefreie Ajax-Applikationen mit AxsJAX

Tag: Ajax FrameworksTobi @ 10:16 pm

Wie kürzlich bei Golem.de berichtet wurde, hat Google das AxsJAX-Framework als Open Source veröffentlicht. Dieses soll Entwicklern dabei helfen, barrierefreie Ajax-Applikationen mit Hilfe von Accessibility-Funktionen zu entwickeln. Der Umfang dieser Funktionen sind in der ARIA Roadmap des W3 Konsortiums (W3C) verankert.

Informationen zum Framework und den Download findet man bei Google-Code unter http://code.google.com/p/google-axsjax/


Nov 27 2007

nettes Tool zum generieren von Aktivitäts-Grafiken

Tag: Allgemeines,ToolsTobi @ 10:45 pm

Jeder Ajax Entwickler hat sicher schon einmal mit animierten GIF Grafiken, sogenannten Activity Indicators gearbeitet. Im Internet findet man eine Vielzahl solcher Grafiken, wie zum Beispiel bei napyfab.com.

Doch was, wenn die Animation in einer anderen Farbe benötigt wird? Kein Problem – ajaxload.info biete einige Animationen zur Auswahl an, bei denen die Vordergrund- und Hintergrundfarbe angepasst werden können.

Eine durchaus nützliche Spielerei :-)


Nov 27 2007

Ajax Blog online

Tag: Infos zum BlogTobi @ 12:14 am

Ab sofort findet ihr unter Ajaxschmiede.de Infos rund um Ajax und Javascript sowie praktische Beispiele, die bei der Programmierung von Web 2.0 Anwendungen hilfreich sein können.

Kommentare sind grundsätzlich erwünscht.

Wer Einsteiger ist und Ajax lernen möchte, sollte sich einige Ajax Bücher zulegen. Es gibt nicht nur Literatur für Anfänger, sondern auch Entwickler.

Viel Spaß mit dem Blog :-)