Wikipedia

Wikipedia:WikiProject User scripts/Guide/Ajax

< Wikipedia:WikiProject User scripts | Guide
This is an old revision of this page, as edited by Pathoschild (talk | contribs) at 03:40, 27 September 2008 (expanded introduction, + "Common problems", + "Create an AJAX object", + "Fetch page content", documented AJAX framework). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

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. MediaWiki's ajax.js provides a small set of functions by default, and Pathoschild's AJAX framework provides a more comprehensive library of functions. This page will document both libraries.

Common problems

AJAX programmers commonly run into problems if they don't account for AJAX's asynchronicity. If you try to pop up a box with another page's content, you will almost certainly pop up a box containing null. This occurs because the script continued even though the query wasn't finished.

To correct the problem, you need to use callback functions. Place the next portion of code after a query into a function, and call the function when the query completes. (The AJAX framework makes this very easy to do.)

Code

Create an AJAX object

Before you can query or fetch a page, you must create a query object. Different browsers use different objects, but MediaWiki provides the sajax_init_object() to do it in one step. The AJAX framework equivalent is ajax_create(). 

/************
* MediaWiki ajax.js
************/
var query = sajax_init_object();

/************
* AJAX framework
************/
var query = ajax_create();

Fetch page content

Fetching a page content can easily be done using GET. 

/************
* MediaWiki ajax.js
************/
// 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() {
	if(api.readyState==4) {
		if(api.status==200)
			alert('The remote page contains:\n' + api.responseText);
		else
			alert('The query returned an error.');
	}
}

/************
* AJAX framework
************/
ajax_get('http://example.com', show_result);
function show_result(api) {
	if(api==null)
		alert('An error occurred.');
	else
		alert('The remote page contains:\n' + api.responseText);
}

Data sources

api.php

See mw:API. Usually used with JSON format.

query.php

See User:Yurik/Query_API. This is older verison of API, can be used for some queries not yet implemented in API. Some Javascript examples can be found at User:Yurik/Query_API/User_Manual#JavaScript. As of early 2008, query.php was soon to be obsoleted: [1].

HTML

You could fetch the whole article page or use &action=render URL parameter to get the content without all the menus (example). Also see Parameters to index.php.

The result you could treat as a text but it's usually convenient to parse it as HTML document, e.g. using DOMParser object (examples needed).

Wiki code

To get the wiki code you use &action=raw URL parameter (example).

The result you treat as a text.

Preview

Sometimes you might want to use preview. For example, Special:Prefixindex won't work with &action=render. To get rid of the unnecessary menus you could submit {{Special:Prefixindex/somepage}} for a preview and get a "clean" list (nevertheless, it's better to use API for prefix index)

Implementations

Mediawiki


AjaxFunctions.php has 2 main functions:

  • wfAjaxWatch - server part of ajaxwatch.js
  • wfSajaxSearch - disabled on WMF projects. If it was enabled, ajaxsearch.js would be responsible for the client side. Also see mw:Manual:$wgAjaxSearch.


Another disabled feature is Live preview (preview.js)

Userscripts

Misc

Some alternatives to XMLHttpRequest:

  • IFrame: almost nobody uses this, but if you're interested, here's a small library: User:TheFearow/ajax.js (Warning: Untested)
  • URL actions: this is not Ajax at all, but this method is also widely used for one-click-do-all scripts. 1st part of the script goes to another page using additional "dummy" URL parameters (not recognized and so ignored by Mediawiki). 2nd part of the script analyzes that URL and then does something. Because of the way MediaWiki redirects after edits, cookies may also be used to transfer data and instructions. An example library (unmaintaned) can be found at User:Lupin/autoedit.js
Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_User_scripts/Guide/Ajax&oldid=241262976"