Handbuch:Ajax

This page is a translated version of the page Manual:Ajax and the translation is 93% complete.
Outdated translations are marked like this.

Ajax ist ein Begriff für die Nutzung von JavaScript, um bei Bedarf Teile einer Seite zu laden. Daher sollte JavaScript-Code stattdessen jQuery.ajax() (oder das JavaScript-Modul mediawiki.api) nutzen. Eine MediaWiki-API-Abfrage würde über AJAX ausgeführt werden (statt $ajax).


Details

Asynchrone Abfragen

Eine asynchrone Abfrage sendet einige Daten an den Server und fährt mit der Ausführung fort. Etwas später kann der Server eine Antwort geben (abhängig vom Typ der Abfrage); In diesem Fall wird die Antwort zur Verarbeitung an eine JavaScript-Funktion übergeben. Es kann eine andere Funktion bereitgestellt werden, um mit dem Fall umzugehen, dass die Abfrage aus irgendeinem Grund scheitert. Unten findet sich ein Beispiel-Anruf an die Anmelde-API mit Übergabe des Benutzernamens und des Passwortes.

mw.loader.using( 'mediawiki.api', function () {
	( new mw.Api() ).get( {
		action: 'query',
		lgname: 'foo',
		lgpassword: 'foobar'
	} ).done( function ( data ) {
		alert( data );
	} );
} );

Alternativ kannst du die Funktionen von jQuery direkt nutzen:

$.ajax({
        // request type ( GET or POST )
	type: "GET",
        
        // the URL to which the request is sent
	url: mw.util.wikiScript('api'),
        
        // data to be sent to the server
	data: { action:'query', format:'json', lgname:'foo', lgpassword:'foobar' },
        
        // The type of data that you're expecting back from the server
	dataType: 'json',
        
        // Function to be called if the request succeeds
	success: function( jsondata ){
		alert( jsondata.result );
	}
});

Die Funktion "mw.util.wikiScript" ist ab 1.18 verfügbar.

Synchrone Abfragen

Die andere Art von Abfragen sendet einige Daten an die Server und wartet auf die Antwort. Dies bedeutet, dass das JavaScript geblockt wird, bis die Server Daten zurückgeben oder die Abfrage aus irgendeinem Grund scheitert. Das folgende Beispiel ruft die Liste "Links auf diese Seite" einer Vorlage ab:

whatLinksHere = JSON.parse(
    $.ajax({
        url:mw.util.wikiScript('api'),
        data: { action: 'query', format: 'json', list: 'embeddedin', eititle: 'Template:' + templateName, eilimit: 500 },
        async: false
    })
    .responseText
);

// ... usage ...
for (i=0; i<whatLinksHere.query.embeddedin.length; i+=1) {
    alert(whatLinksHere.query.embeddedin[i]);
}

(JSON.parse() ist eine Standard-JavaScript-Funktion, die ein Objekt aus seiner Zeichenketten-Darstellung im JSON-Format ausgibt.)

Beschränkungen

Aufgrund der Same-Origin-Policy ist es für ein Skript einer externen Seite schwierig, Daten aus einem Wiki abzurufen, das sich unter einer anderen Domain befindet — zum Beispiel kann man nicht direkt Daten aus https://en.wikipedia.org/wiki/ in http://example.org/wiki/ abrufen. Neuere Browser unterstützen eine ausdrückliche Anweisung, um diesen Zugriff über Cross-Origin Resource Sharing zu erlauben, was jedoch nur funktioniert, wenn die Server so konfiguriert wurden, dass sie mit den entsprechenden Headern umgehen und der Nutzer einen aktuellen Browser verwendet, der diese erkennt. Entwickler, die sich Zweifel über Vorab-Versionen haben, können sich noch nicht auf CORS verlassen.

Es ist möglich, die Same-Origin-Policy zu umgehen, indem man JSONP statt reinem JSON nutzt, was in älteren Browsern funktionieren wird (darunter Internet Explorer 6).

$.ajax({
    url: '//www.mediawiki.org/w/api.php?format=jsonty&action=query&meta=siteinfo&siprop=general&callback=?',
    data: {
        format: 'json'
    },
    dataType: 'jsonp'
}).done( function ( data ) {
    ...
} );

Siehe auch

Allgemeine Informationen zu XMLHttpRequest: