Wikipedia:WikiProject User scripts/Guide/Ajax: Difference between revisions

Revision as of 00:54, 6 February 2008

Revision as of 03:40, 27 September 2008

Line 1:

<!--Scripts with [[Ajax (programming)|AjaxAJAX]] usually(''asynchronous doJavaScript somethingand XML'') is a popular name for a web programming technique that queries the server or fetches content without leavingreloading the entire page.-->

While programming AJAX can be complex, libraries of functions can make it much easier. MediaWiki's [{{SERVER}}/skins-1.5/common/ajax.js ajax.js] provides a small set of functions by default, and [[m:User:Pathoschild/Scripts/Ajax framework|Pathoschild's AJAX framework]] provides a more comprehensive library of functions. This page will document both libraries.

==XMLHttpRequest==

Usual approach for creating cross-browser [[XMLHttpRequest]] object is<br />

<code>if (window.XMLHttpRequest) ... else if (window.ActiveXObject) ...</code>.

==Common problems==

However, built-in [{{SERVER}}/skins-1.5/common/ajax.js ajax.js] already has this code, so userscripts can simply use

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 <code>'''null'''</code>. This occurs because the script continued even though the query wasn't finished.

<source lang=javascript>

xmlhttp = sajax_init_object()

To correct the problem, you need to use [[w:callback (computer science)|callback functions]]. Place the next portion of code after a query into a function, and call the function when the query completes. (The [[m:User:Pathoschild/Scripts/Ajax framework|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 <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>.

<source lang="javascript">

/************

* MediaWiki ajax.js

************/

var query = sajax_init_object();

/************

* AJAX framework

************/

var query = ajax_create();

</source>

===Fetch page content===

Fetching a page content can easily be done using [[GET]].

<source lang="javascript">

/************

* MediaWiki ajax.js

************/

// fetch

xmlhttpvar 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);

}

</source>