Ajaxschmiede.de

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.