JQuery Kochbuch (German Edition)

mit der ID
contents
einfügen.
    Lösung
(function($) {
$(document).ready(function() {
     $('#contents').load('hello-world.html');
});
})(jQuery);
    Diskussion
    Dieses Rezept unterscheidet sich von den anderen, weil wir hier eine Reihe von Funktionen und Hilfsmethoden vorstellen, die jQuery anbietet.
    jQuery bietet viele Hilfsmethodenfür Ajax-Anforderungen. Basierend auf den vorigen Rezepten wollen wir folgende Methoden angehen:
.load(), $.get(), $.getJSON(), $.getScript()
und
$.post()
. Aber zuerst wollen wir uns unsere Lösung näher anschauen:
$('#contents').load('hello-world.html');
    Die Methode
.load(url)
sorgtfür eine Ajax-Anfrage per GET an
hello-world.html
, danach trägt sie das Ergebnis dieser Anfrage in das Element
#contents
ein. Es gibt zwei optionale Parameter
data
und
callback
. Der Parameter
data
kann entweder eine Map (oder ein JavaScript-Objekt) oder ab jQuery 1.3 ein String sein. Das folgende Beispiel übergibt die Variable
hello
mit dem Wert
world
. (Das entspricht dem Aufruf der URL
hello-world.html?hello=world
.)
$('#contents').load('hello-world.html', { hello: 'world' });
    Der dritte optionale Parameter ist eine Callback-Funktion, die aufgerufen wird, wenn die Anfrage vollständig ausgeführt wurde (entweder mit
success
oder
error
). Im folgenden Beispiel wird eine Alert-Nachricht ausgegeben, wenn die Anfrage beendet ist:
$('#contents').load('hello-world.html', { hello: 'world' }, function() {
    alert('Anfrage abgeschlossen!');
});
    Die nächsten beiden Methoden, die wir uns anschauen wollen, sind
$.get()
und
$.post()
. Beide Methoden erwarten die gleichen Argumente, wobei
$.get()
eine GET-HTTP-Anfrage und
$.post()
eine POST-HTTP-Anfrage abschickt. Wir werden uns ein Beispiel mit
$.get()
vornehmen. Der Methode können die Parameter
url
,
data
,
callback
und
type
übergeben werden. Die ersten drei Parameter funktionieren genauso wie bei der vorigen Methode
load()
, daher werden wir nur den letzten Paramter
type
besprechen:
$.get(
    'hello-world.html',
    { hello: 'world' },
    function(data) {
     alert('Anfrage abgeschlossen!');
    },
    'html'
);
    Der Parameter
type
kanneinen der folgenden Werte enthalten:
xml
,
html
,
script
,
json
,
jsonp
oder
text
. Diese Werte bestimmen, wie die Antwort auf die Ajax-Anfrage verarbeitet wird, bevor jQuery sie an die Callback-Funktion weiterreicht. Im vorigen Beispiel haben wir als
type
den Wert
html
genutzt, daher wird das Argument
data
ein DOM-Objekt sein. Gibt man
xml
als
type
an, dann erhält man ein
xml
-DOM-Objekt. Wenn Sie
script
nutzen, werden die vom Server zurückgegebenen Daten ausgeführt, bevor die per
callback
angegebene Methode angestoßen wird.
json
und
jsonp
liefern ein JavaScript-Objekt, das an Ihre
callback
-Methode übergeben wird. Bei
jsonp
übergibt jQuery einen Methoden-Namen. Diese Callback-Methode wird dann auf die anonyme Funktion abgebildet, die mit der Anfrage definiert wird. Damit lassen sich auch Anfragen über die Domain hinaus ausführen. Das Format
text
ist schließlich genau das, was der Name schon sagt: Ihrer
callback
-Methode wird einfach der Rückgabewert als Text übergeben.
    Jetzt schauen wir uns die beiden letzten Hilfsmethoden
$.getJSON()
und
$.getScript()
an. Der Methode
$.getJSON()
übergibt man
url
,
data
und
callback
als Argumente.
$.getJSON()
entspricht im Prinzip einer Kombination der Methode
$.get()
mit den entsprechenden Parametern für
JSON
oder
JSONP
. Das folgende Beispiel stellt eine
JSONP
-Anfrage an Flickr und fragt nach Bildern aus der öffentlichen Timeline:
$.getJSON(
    'http://www.flickr.com/services/feeds/photos_public.gne?
format=json&jsoncallback=?’,
function(json) {
}
);
    Da diese Anfrage Domain-übergreifend ist, behandelt jQuery sie automatisch als
JSONP
und übergibt den
callback
-Funktionsnamen. Das bedeutet auch, dass jQuery die Anfrage startet, indem es ein