Manual:Ajax

Ajax is a term for using JavaScript to load parts of a page on demand. To use Ajax in MediaWiki, it is recommended that your JavaScript code uses jQuery.ajax(), or the mediawiki.api JavaScript module. Typically, you would perform a MediaWiki API query over Ajax.

Before MW 1.38, MediaWiki used to offer a deprecated Ajax interface for use by extensions. See action=ajax . However, use of Sajax is discouraged since MediaWiki 1.16, the first release of MediaWiki to ship jQuery .

詳細

非同期リクエスト

An asynchronous request sends some data to the server, and continues execution. Some time later, the server might return a response (depending on the type of request); in which case the response will be passed to a JavaScript function for handling. Another function may be supplied to handle the case that the request fails for some reason. Below is an example call to the login API by posting the username and password.

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

Alternatively, you can use jQuery's functions directly:

$.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 );
	}
});

The function "mw.util.wikiScript" is available since 1.18 onwards.

同期リクエスト

The other kind of request sends some data to the server, and waits for the response. This means that the JavaScript will be blocked until the server returns some data, or the request fails for some reason. The following example retrieves the "What links here" list of a template:

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() is a JavaScript standard function that returns an object from its string representation in JSON format.)

制限

Due to the same origin policy, it is difficult for a script on an external site to retrieve data from a wiki that is hosted on a different domain — for example, one cannot directly retrieve data from https://en.wikipedia.org/wiki/ to http://example.org/wiki/. Newer browsers support an explicit instruction to permit this access via cross-origin resource sharing but this will only work with servers that are configured to issue the appropriate headers, and the user must be using a recent browser that recognises it. Developers with concerns about legacy browsers can't rely on CORS yet.

It is possible to circumvent the Same-Origin policy using JSONP instead of plain JSON which will work in older browsers (including 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 ) {
    ...
} );

Related deprecated functionality

Sajax is an ancient Ajax library that (as of September 2012) is still part of core code and is used by some extensions. Don't use it, use jQuery.ajax() instead. Some extensions, whether using Sajax or not, make Ajax calls through the obsolete AjaxDispatcher (see $wgAjaxExportList) by invoking index.php?action=ajax&rs=something.... They should instead make MediaWiki API requests to API modules api.php?action=something.

関連項目

• カテゴリ:Ajax 拡張機能 - Extensions that use the Ajax interface of MediaWiki.

外部リンク

• mediawiki.api (JavaScript module)
• jQuery.ajax (jQuery method)

General information on XMLHttpRequest:

• XMLHttpRequest specification at W3.org
• XMLHttpRequest on Wikipedia
• XMLHttpRequest on MDN