There are two parts to the asynchronous GlideAjax script:
client-side and server-side code.
Hello World: Returning a value from the server
Example: Client side
This code runs on the client (the web browser). Create a client script
as normal. This sends the
parameters to server, which then does the processing. So that the client does not wait for
the result, a callback function is used to return the result, passed to the
getXML() function. (In this case it is called
HelloWorldParse
.)
The
getXMLWait() function does not need a separate callback function,
but this will block the client. If the client-server communication takes a long time (for
example on slow networks), the application will seem unresponsive and slow. An example of
getXMLWait() is in the following section.
var ga = new GlideAjax('HelloWorld');
ga.addParam('sysparm_name', 'helloWorld');
ga.addParam('sysparm_user_name', "Bob");
ga.getXML(HelloWorldParse);
function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
alert(answer); }
Example: Server side
The server-side code for the above function. Do not create a business rule, but instead
navigate to and create a new script. Paste in the code below.
Note: You must set the name
of the script include to HelloWorld
.
- The sys_script_include code must extend the
AbstractAjaxProcessor class and be client-callable.
- Function names starting with "_" are considered private and are not callable from the
client.
- Avoid overriding methods of AbstractAjaxProcessor, including
initialize
. While it is possible to invoke methods of your superclass
object which you have overridden, it is complicated and best avoided altogether.
var HelloWorld = Class.create();
HelloWorld.prototype = Object.extendsObject(AbstractAjaxProcessor, {
helloWorld:function() { return "Hello " + this.getParameter('sysparm_user_name') + "!"; } ,
_privateFunction: function() { // this function is not client callable
}
});
This
results in an alert box that says 'Hello Bob!' when you visit the form.
Returning multiple values
Since the response is an XML document we are not limited to returning a single
answer
value. Here is a more complex example returning multiple XML nodes
and attributes.
Example: AJAX processor script include
/*
* MyFavoritesAjax script include Description - sample AJAX processor returning multiple value pairs
*/
var MyFavoritesAjax = Class.create();
MyFavoritesAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {
/*
* method available to client scripts call using:
* var gajax = new GlideAjax("MyFavoritesAjax");
* gajax.addParam("sysparm_name","getFavorites");
*/
getFavorites: function() { // build new response xml element for result
var result = this.newItem("result");
result.setAttribute("message","returning all favorites");
//add some favorite nodes with name and value attributes
this._addFavorite("color","blue");
this._addFavorite("beer","lager");
this._addFavorite("pet","dog");
},
// all items are returned to the client through the inherited methods of AbstractAjaxProcessor
_addFavorite: function(name, value) {
var favs = this.newItem("favorite");
favs.setAttribute("name",name);
favs.setAttribute("value",value); },
type:"MyFavoritesAjax"
});
Example: Client script
// new GlideAjax object referencing name of AJAX script include
var ga = new GlideAjax("MyFavoritesAjax");
// add name parameter to define which function we want to call
// method name in script include will be getFavorites
ga.addParam("sysparm_name","getFavorites");
// submit request to server, call ajaxResponse function with server response
ga.getXML(ajaxResponse);
function ajaxResponse(serverResponse) {
// get result element and attributes
var result = serverResponse.responseXML.getElementsByTagName("result");
var message = result[0].getAttribute("message");
//check for message attribute and alert user
if(message) alert(message);
//build output to display on client for testing
var output = "";
// get favorite elements
var favorites = serverResponse.responseXML.getElementsByTagName("favorite");
for(var i = 0; i < favorites.length; i ++) {
var name = favorites[i].getAttribute("name");
var value = favorites[i].getAttribute("value");
output += name + " = " + value + "\n "; }
alert(output); }
Example: XML response
<xml sysparm_max= "15" sysparm_name="getFavorites" sysparm_processor="MyFavoritesAjax">
<result message = "returning all favorites"></result>
<favorite name = "color" value = "blue"></favorite>
<favorite name = "beer" value = "lager"></favorite>
<favorite name = "pet" value = "dog"></favorite>
</xml>