|
[[Ajax (programming)|AJAX]] (''asynchronous JavaScript and XML'') is a popular name for a web programming technique that queries the server or fetches content without reloading the entire page.
While programming AJAX can be complex, libraries of functions can make it much easier. Since the [[mw:MediaWiki 1.16|1.16 release]], MediaWiki comes with the [[jQuery]] library, which provides a convenient framework for easily making Ajax requests. Prior to version 1.17, MediaWiki provided [{{SERVER}}/w/skins-1.5/common/ajax.js ajax.js], containing a small set of functions by default. User scripts such as [[m:User:Pathoschild/Scripts/Ajax framework|Pathoschild's AJAX framework]] also provided a more comprehensive library of functions, but is now obsolete. The examples using these old methods are kept for historical reasons.
==Common problems==
</source>
==Deprecated methods ==
===Create an AJAX object===
==== MediaWiki ajax.js ====
Before you can query or fetch a page, you must create a query object. Different browsers use different objects, but MediaWiki provides the <code>sajax_init_object()</code> to do it in one step. The [[m:User:Pathoschild/Scripts/Ajax framework|AJAX framework]] equivalent is <code>ajax_create()</code> (see [[#AJAX framework|section below]]).
<source lang="javascript">
var query = sajax_init_object();
</source>
==== AJAX framework ====
<source lang="javascript">
var query = ajax_create();
</source>
===Fetch page content===
Fetching a page content can be done using [[GET]].
==== MediaWiki ajax.js ====
<source lang="javascript">
// fetch
var api = sajax_init_object();
api.open('GET', 'http://example.com', true);
api.onreadystatechange = show_result;
api.send(null);
// handle response
function show_result(_api) {
if(_api.readyState==4) {
if(_api.status==200) {
alert('The remote page contains:\n' + _api.responseText);
} else {
alert('The query returned an error.');
}
}
}
</source>
==== AJAX framework ====
<source lang="javascript">
ajax_get('http://example.com', show_result);
function show_result(_api) {
if(_api.ajax_success) {
alert('The remote page contains:\n' + _api.responseText);
} else {
alert('An error occurred.');
}
}
</source>
===Edit a page and other common actions===
==== MediaWiki ajax.js ====
<source lang="javascript">
// fetch token
var api = sajax_init_object();
api.open('GET', wgServer + wgScriptPath + '/api.php?format=json&action=query&prop=info&indexpageids=1&intoken=edit&titles=Whatever', true);
api.onreadystatechange = extract_token;
api.send(null);
function extract_token() {
if(api.readyState==4) {
if(api.status==200) {
var response = eval('(' + api.responseText + ')');
var token = response['query']['pages'][response['query']['pageids'][0]]['edittoken'];
edit_page(token);
}
else {
alert('The token query returned an error.');
}
}
}
// edit page (must be done through POST)
function edit_page(_token) {
var parameters = 'action=edit&title=User:Pathoschild/Sandbox&text=AJAX_test!&token=' + encodeURIComponent(_token);
api.open('POST', wgServer + wgScriptPath + '/api.php', true); // just reuse the same query object
api.onreadystatechange = alert_result;
api.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
api.setRequestHeader('Connection', 'keep-alive');
api.setRequestHeader('Content-length', parameters.length);
api.send(parameters);
// process response
function alert_result() {
if(api.readyState==4) {
if(api.status==200) {
alert('Page edited!');
}
else {
alert('The query returned an error.');
}
}
}
}
</source>
==== AJAX framework ====
<source lang="javascript">
ajax_edit_token('edit', edit_page);
function edit_page(_token) {
var parameters = 'action=edit&title=User:Pathoschild/Sandbox&text=AJAX_test!&token=' + encodeURIComponent(_token);
ajax_post(wgServer + wgScriptPath + '/api.php', parameters, alert_result);
}
function alert_result(_api) {
if(_api.ajax_success) {
alert('Page edited!');
} else {
alert('An error occurred.');
}
}
</source>
==Data sources==
* [[mw:ResourceLoader/JavaScript Deprecations#ajax.js]]
* [[mw:ResourceLoader/Default modules#jQuery & plugins]]
===Code===
;User scripts
:* [[m:User:Pathoschild/Scripts/Ajax framework|Comprehensive AJAX framework]] (by [[user:Pathoschild|Pathoschild]])
:* [[User:TheFearow/simpleajax.js|AJAX editing]] (by [[user:TheFearow|TheFearow]])
:* [[User talk:Alex Smotrov/qpreview.js|Ajax preview]] (by [[user:Alex Smotrov|Alex Smotrov]])
:* [[User talk:Alex Smotrov/wlunwatch.js|Ajax unwatch from watchlist]] (by [[user:Alex Smotrov|Alex Smotrov]])
:* Various code with AJAX
:** [[Wikipedia:Tools/Navigation popups|Navigation popups]]
:** [[Wikipedia:WikiProject User scripts/Scripts/Twinkle|Twinkle]] (some code in [[User:AzaToth/morebits.js]], and good examples of AJAX are in the bottom of [[User:AzaToth/twinklespeedy.js]])
:** [[User:Kaldari/wikilove.js]] - uses Ajax (via jQuery) to edit user talk pages
; Mediawiki
:* [{{SERVER}}/w/skins-1.5/common/ajax.js ajax.js] - some support functions
:* [{{SERVER}}/w/skins-1.5/common/ajaxwatch.js ajaxwatch.js] - watch/unwatch
:* [{{SERVER}}/w/skins-1.5/common/upload.js upload.js] - licenses preview on [[Special:Upload]]
:* Internal and disabled code
:** [http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/includes/AjaxFunctions.php?view=markup AjaxFunctions.php] has 2 main functions:
:**: wfAjaxWatch - server part of ajaxwatch.js
:**: wfSajaxSearch - disabled on WMF projects. If it was enabled, [{{SERVER}}/w/skins-1.5/common/ajaxsearch.js ajaxsearch.js] would be responsible for the client side. Also see [[mw:Manual:$wgAjaxSearch]].
:** [[mw:Manual:Live preview|Live preview]] ([{{SERVER}}/w/skins-1.5/common/preview.js preview.js])
===Alternatives===
* [[IFrame]]s are an obsolete older method (see [[User:TheFearow/ajax.js|a small untested library]] by [[user:TheFearow|TheFearow]])
* URL parameters: a script can call itself on a different by adding a custom URL parameter to the address bar. It can then check the address bar on every page load, and run code depending on the values of the custom headers. See [[User:Lupin/autoedit.js|an example unmaintaned library]] by [[user:Lupin|Lupin]]).
| 