jQuery load function – Ajax the simple way (Part 1)

Mit der load Funktion lassen sich einfach HTML-Elemente einer Datei in die Aktuelle einfügen. Diese Funktion ist in erster Linie für den “import” von HTML-Code gedacht und entspricht damit nicht dem typischen Ajax-Request bei dem bspw. ein PHP Skript angesprochen wird, das Daten aus der Datenbank liest und/oder andere serverseitige Prozesse anstösst.

Soviel erstmal zur Theorie, der Funktionsaufruf sieht wie folgt aus:

1

 $('#someElement').load('/someFile #mydiv');

So kurz so einfach. In das Element mit der id “someElement” wird der gesamte Inhalt eines divs mit der id “mydiv” geladen. Das geniale dabei ist, dass sich “mydiv” überhaupt nicht im aktuellen Dokument befindet, sondern in der Datei “someFile”.
Als zweiten Parameter kann man der load Funktion auch noch Daten als sogenanntes Key/Value Paar übergeben.

1

 $('#someElement').load('someFile.php',{'param': 'someValue'});

Das enspricht allerdings jetzt schon eher dem normalen Ajax-Request. Das oder die Key/Value Paare werden dem php-Skript als post-Paramter übergeben. Natürlich verliert man damit den Vorteil des vorigen Beispiels sich einfach DOM-Elemente aus einem anderen HTML-Skript zu holen. Aber falls man das Ergebnis eines Request einfach direkt ohne weitere Verarbeitung in ein Element einfügen möchte, ist das eine sehr einfache und komfortable Variante.

Im nächsten Teil wird es dann um die anderen fortgeschritten jQuery Ajax Varianten wie get, getJSON, etc. gehen.

Online Thumbnail Generator für Webseiten

Unabhängig von alles JS-Frameworks will ich mal einen kleinen Service vorstellen, mit dem man sehr einfach Thumbails von Websites darstellen kann.
Alles was man dafür benötigt ist ein Account auf Pageglimpse. Nach erfolgreicher Registrierung gibt man auf seiner Seite dem img-Tag als src Attribut einfach einen absoluten Link. Dieser kann dann wie folgt aussehen:

http://images.pageglimpse.com/v1/thumbnails?url=http://www.mysrc.de/&size=large&devkey=1234567890

Pageglimpse verfügt auch über eine kleine API. Was indem Fall nur bedeutet, dass dem GET-String einfach weitere Attribute hinzugefügt werden können.
Dazu gehören:

• devkey -> obligatorisch und auch üblich um einen Service im Web zu nutzen
• url -> WWW-Adresse die der Website die als Thumbnail angezeigt werden soll
• size -> Größe des Thumbails

Da die Thumbnails nicht sofort generiert werden, kann man einen Request senden um den Status zu prüfen. Ein Request sähe dann so aus:

http://images.pageglimpse.com/v1/thumbnails/request?

Hinter “request?” kann man dann noch die GET-Parameter anhängen. Beispiele dazu findet ihr auf Pageglimpse API.

jQuery API Browser v1.3 für den Desktop

Unter http://api.jquery.com/ findet man den API Browser von jQuery v1.3.
Ein ziemlich nützliches Teil wenn man schnell mal Hilfe bei der Entwicklung braucht.

Der Browser stellt die komplette API mit all Ihren Kernfunktionen übersichtlich dar.

Aber das schönste daran ist, dass ganze gibt es auch als AIR-Applikation für den Desktop. Einfach installieren und schon hat man die ganze Geschichte jederzeit und schnell verfügbar.

Inhalte im Überblick:

• Die aktuelle jQuery und jQuery UI Dokumentation.
• Die Möglichkeit Seiten die man häufig braucht als Favoriten zu markieren.
• Syntax Highlighting in den Code-Beispielen.
• Live Demo´s innerhalb des Browsers.
• Links zum editieren und experimentieren mit Code-Beispielen.

jQuery Übersetzungs-Plugin SundayMorning

Gestern bin ich auf ein neues nettes Plugin für jQuery gestoßen.
SundayMorning, ein jQuery Plugin welches es den Besuchern einer Seite erlaubt ihre Inhalte (Strings oder DOM-Objekte) einfach, per Klick, in mehr als 30 Sprachen zu übersetzen.

SundayMorning nutzt dafür die Google translate API.
Die Übersetzung  lässt sich auf einzelne Worte, auf ganze Sätze per Menu für verschieden Sprachen oder per Event ausführen. Das Ganze ist auch als Bookmarklet verfügbar.

Ein einfaches Beispiel:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Der Aufruf
´$.sundayMorning('bonjour', {
    source:'fr',
    destination:'en'
}, function(response) {
    alert(response.translation);
});
 
//Das Ergebniss als Objekt
response = {
    translation: 'hello',
    source: 'fr',
    destination: 'en'
}

Die Schwachstelle des ganzen wird wohl die Genauigkeit von Googles Übersetzung sein.
Eine Demo, sowie mehr Informationen und die Dateien zum Download findet man auf der offiziellen Website.