GlideAjax Example Cheat Sheet (UPDATED)

[Shawn Dowler]

It can be hard to remember all of the Client and Server elements of a GlideAjax call. I created a simple example with color coding to help make sure I don't miss any of the details when I'm making a new call from scratch. I hope this helps. I attached a Word doc as well as the image and text below for convenience.

Note: Client callable must be checked in the Script Include for this to work

# Yellow:

This is the name of the class you create. This is usually the same as the name of the Script Include.

# Magenta:

This is the name of the function to use in the script include. You can have a single script include with multiple functions that accept and return different parameters. For example, you could create a single Script Include for getting data related to users and keep adding functions to it as needed.

# Green:

This is a parameter that is passed through the URL of the AJAX call. You can add more than one parameter. usually this is information you will use to make a GlideRecord call in the Script Include.

# Red:

This is the function that asynchronously waits for a response. Any code that you need to wait for a response needs to go in the function referred to in the getXMLAnswer(). Code that doesn't need to wait goes directly after the getXMLAnswer() call inside the main Client Script function and won't wait for a response before executing.

# Cyan:

These are the pieces of data you need from the Server. They are added to an object in the Script Include and passed back to the Client Script. You can do anything with these when they are returned. In this example they are used to set a value on the form.

Client Side (Client Script):

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading || newValue == '') {
         return;
    }

    var ga = new GlideAjax('asu_GetLocationData');
    ga.addParam('sysparm_name', 'getCampus');
    ga.addParam('sysparm_buildingid', g_form.getValue("u_building"));
    ga.getXMLAnswer(updateCampus);
}

function updateCampus(answer) {
    var clearvalue; // Stays Undefined
    if (answer) {
         var returneddata = JSON.parse(answer);
         g_form.setValue("campus", returneddata.sys_id, returneddata.name);
    } else {
         g_form.setValue("campus", clearvalue);
    }
}

Server Side (Script Include):

var asu_GetLocationData = Class.create();
asu_GetLocationData.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getCampus: function () {
        var buildingid = this.getParameter('sysparm_buildingid');
        var loc = new GlideRecord('cmn_location');
        if (loc.get(buildingid)) {
            var campus = new GlideRecord('cmn_location');
            if (campus.get(loc.parent)){
                var results = {
                    "sys_id": campus.getValue("sys_id"),
                    "name": campus.getValue("name")
                };
                return JSON.stringify(results);
            }
        } else {     
            return null;
        }
    }
});

[Jordan Hladish]

Shawn - I honestly don't know if I've written a GlideAjax script without ending up on one of your color-coded community posts anytime over the last couple years. Thank you for posting / sharing with an awesome write-up.

[Mike Viel]

Many thanks Shane, you just helped me through creating my first GlideAjax!
That aside I ran into an error that might be worth adding a note here. Perhaps others encountered the same.

AbstractAjaxProcessor undefined, maybe missing global qualifier
 
If you were to add the prefix global. in front of AbstractAjaxProcessor as shown below your error will likely be resolved. (For me the error occurred while calling a Scoped Script include from a Client script on the same scope.)  

asu_GetLocationData.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {

Kudos to Paul Morris for this solution found in this question. Please share appreciation to him if useful.

[Keel]

When there's been a while between the times I use GlideAjax scripts, I tend to forget the parameters are passed differently. So here's a quick explanation of how they differ:

In the getCampus function of the 'asu_GetLocationData' Script Include, they're using a method named getParameter() to retrieve a parameter value that was passed from the client script. This is not typically how parameters are used in standard JavaScript functions. Normally, the parameters are passed directly into the function and then referenced by name within the function. Like so:

function add(a, b) { // a and b are parameters that get passed directly into the function. 
    return a + b;
}

However, in a GlideAjax Script Include they are included as part of the HTTP request that is sent from the client to the server, and they need to be extracted from the request on the server side. This is where the getParameter() function comes in. This method is used to retrieve the value of a parameter that was included in the client's request. The name of the parameter is passed as a string to getParameter().

In the getCampus function:

getCampus: function() {
    var buildingid = this.getParameter('sysparm_buildingid'); // name of the parameter we're retrieving
    ...
}

The 'sysparm_buildingid' parameter was included in the client's GlideAjax request:

ga.addParam('sysparm_buildingid', g_form.getValue("u_building"));

 And that's the difference!