AJAX: Difference between revisions
Damyon Wiese (talk | contribs) |
Damyon Wiese (talk | contribs) No edit summary |
||
Line 3: | Line 3: | ||
Although AJAX indicates that XML is used, the term really relates to the group of technologies and in Moodle we tend to favour use of JSON rather than XML as the syntax is lighter and leads to a smaller output. It is also easier to construct from php data structures. | Although AJAX indicates that XML is used, the term really relates to the group of technologies and in Moodle we tend to favour use of JSON rather than XML as the syntax is lighter and leads to a smaller output. It is also easier to construct from php data structures. | ||
== Ajax in Moodle | == Ajax in Moodle == | ||
{{ Moodle 2.9 }} | {{ Moodle 2.9 }} | ||
The preferred way to write new ajax interactions in Moodle is to use the javascript module "core/ajax" which can directly call existing web service functions. | |||
Some benefits of this system are: | |||
# No new ajax scripts need auditing for security vulnerabilities | |||
# Multiple requests can be chained in a single http request | |||
# Strict type checking for all parameters and return types | |||
# New webservice functions benefit Ajax interfaces and web service clients | |||
So the steps required to create an ajax interaction are: | So the steps required to create an ajax interaction are: | ||
Line 12: | Line 18: | ||
# Write or find an existing web service function to handle the ajax interaction: See [[ Web_services ]] | # Write or find an existing web service function to handle the ajax interaction: See [[ Web_services ]] | ||
# White list the web service for ajax. To do this, a new function needs to be added to the external service class "<methodname>_is_allowed_from_ajax() { return true; }". Only functions that are whitelisted using this mechanism will be available to the ajax script. | # White list the web service for ajax. To do this, a new function needs to be added to the external service class "<methodname>_is_allowed_from_ajax() { return true; }". Only functions that are whitelisted using this mechanism will be available to the ajax script. | ||
# Call the web service from javascript in response to a user | # Call the web service from javascript in response to a user action: | ||
Example calling core_get_string: | Example calling core_get_string: | ||
Line 35: | Line 41: | ||
}); | }); | ||
</code> | </code> | ||
Note: This example chains to separate calls to the core_get_string webservice in one http request | |||
Note: Don't actually fetch strings like this, it is just an example, use the 'core/str' module instead. | |||
To update parts of the UI in response to Ajax changes, consider using [[ Templates ]] | |||
For information on writing AJAX scripts for Moodle before Moodle 2.9 see: [[ AJAX pre 2.9 ]] | |||
[[ |
Revision as of 03:50, 22 April 2015
AJAX (Asynchronous Javascript and XML) is a modern web design technique that allows for more interactivity by making webpages that fetch data in the background and alter themselves without reloading the entire page. This helps to make a page feel much more like an application than a web page. AJAX is a new way of working with existing technologies (including HTML, Javascript, CSS and the XMLHttpRequest object amongst others) rather than a new piece of technology in itself.
Although AJAX indicates that XML is used, the term really relates to the group of technologies and in Moodle we tend to favour use of JSON rather than XML as the syntax is lighter and leads to a smaller output. It is also easier to construct from php data structures.
Ajax in Moodle
Moodle 2.9
The preferred way to write new ajax interactions in Moodle is to use the javascript module "core/ajax" which can directly call existing web service functions.
Some benefits of this system are:
- No new ajax scripts need auditing for security vulnerabilities
- Multiple requests can be chained in a single http request
- Strict type checking for all parameters and return types
- New webservice functions benefit Ajax interfaces and web service clients
So the steps required to create an ajax interaction are:
- Write or find an existing web service function to handle the ajax interaction: See Web_services
- White list the web service for ajax. To do this, a new function needs to be added to the external service class "<methodname>_is_allowed_from_ajax() { return true; }". Only functions that are whitelisted using this mechanism will be available to the ajax script.
- Call the web service from javascript in response to a user action:
Example calling core_get_string:
require(['core/ajax'], function(ajax) {
var promises = ajax.call([
{ methodname: 'core_get_string', args: { component: 'mod_wiki', stringid: 'pluginname' } },
{ methodname: 'core_get_string', args: { component: 'mod_wiki', stringid: 'changerate' } }
]);
promises[0].done(function(response) {
console.log('mod_wiki/pluginname is' + response);
}).fail(function(ex) {
// do something with the exception
});
promises[1].done(function(response) {
console.log('mod_wiki/changerate is' + response);
}).fail(function(ex) {
// do something with the exception
});
});
Note: This example chains to separate calls to the core_get_string webservice in one http request
Note: Don't actually fetch strings like this, it is just an example, use the 'core/str' module instead.
To update parts of the UI in response to Ajax changes, consider using Templates
For information on writing AJAX scripts for Moodle before Moodle 2.9 see: AJAX pre 2.9