Pages and Ajax Calls

In the context of Application Performance Monitoring a Page represents a web browser page delivered by a Server Request. An Ajax Call is a request initiated by a browser page that does not necessarily result in a page transition. A Page may contain zero or more Ajax Calls.

Ajax stands for Asynchronous JavaScript and XML. An Ajax Call uses client-side scripting to exchange data with the web server, allowing the web page to be dynamically updated without a full page reload, which may interrupt interaction flow.

Internally, when a web page is initially loaded, some Ajax JavaScript files are also downloaded with the page. The scripts are used to package and send asynchronous requests to the server, enabling different parts of the page to be updated with the data responses without reloading the entire page, and giving the appearance of a more responsive interface.

Using a Browser Agent that has been injected into a web page, metric data is reported on both Pages and its contained Ajax Calls. You can use this metric data to determine performance characteristics of the web pages as rendered to your end users.

Pages

Metric data associated with a single Page is contained within the JSON Page object. To understand what metrics are returned for a web browser Page we'll follow through the APMCS UI as it gathers metrics from user pages. For example, when the UI starts up, one of the first REST API queries it runs is to find the slowest pages (those that take the longest time to load) in the applications being monitored:
/api/v1/pages?limit=10&since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z&orderBy=averageResponseTime:desc
Notice that, in the context of a Page, the averageResponseTime attribute reflects the load time for the Page of interest.
The JSON response to this query is the set of the top slowest 10 pages. A single JSON Page object may look like the following:
{
    "pageId" : 5702161,
    "pageTitle" : "ACMEWebApp/buy/spc/handlers/display.html",
    "pageURL" : "http://hostA:1111/acmeshopping1/",
    "links" : [ {
          "rel" : "self",
          "href" : "api/v1/pages/5702161?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "timeSeries",
          "href" : "api/v1/pages/5702161/timeSeries?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "relatedRequests",
          "href" : "api/v1/pages/5702161/requests?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "ajaxCalls",
          "href" : "api/v1/pages/5702161/ajaxCalls?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "ajaxSummary",
          "href" : "api/v1/pages/5702161/ajaxCallsSummary?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        } ],
    "completedCount" : 39365,
    "failureCount" : 0,
    "totalFirstByteTime" : 39473078,
    "minFirstByteTime" : 0,
    "maxFirstByteTime" : 3114,
    "averageFirstByteTime" : 1002.75,
    "totalInteractiveTime" : 59284684,
    "maxInteractiveTime" : 3167,
    "minInteractiveTime" : 11,
    "averageInteractiveTime" : 1506.03,
    "totalResponseTime" : 78764274,
    "maxResponseTime" : 3185,
    "minResponseTime" : 805,
    "averageResponseTime" : 2000.87,
    "loadRate" : 25.93,
    "errorPercentage" : 0
}
            
For a single page, the page ID can be used to drill further into related metrics. In the example above the page ID, 5702161, is used in the links element, which is an array of related resources. Using the page ID you can find the server requests associated with the page:
api/v1/pages/5702161/requests?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z
How to use a page ID to delve deeper into the page's metric data is explained in Object ID Parameters.

Ajax Calls

The root parent of any Ajax Call is its containing Page. Let's continue following through the Page example we started above from the UI. When drilling into the page, the UI will request the Ajax Call Summary:
api/v1/pages/5702161/ajaxCallsSummary?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z
The returned summary information contains information (including the IDs) of the most problematic Ajax Calls. In our example, the summary shows that there is only one Ajax Call, "ajaxCallCount" : 1, with ID 5702163. Notice that even though there is only one Ajax Call on the Page, its completedCount shows that it has been executed thousands of times:
{
    "links" : [ {
          "rel" : "self",
          "href" : "api/v1/pages/5702161/ajaxCallsSummary?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "slowestAjaxCall",
          "href" : "api/v1/ajaxCalls/5702163?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "slowestAjaxCalltimeSeries",
          "href" : "api/v1/ajaxCalls/5702163/timeSeries?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "mostErrorsAjaxCall",
          "href" : "api/v1/ajaxCalls/5702163?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "mostErrorsAjaxCalltimeSeries",
          "href" : "api/v1/ajaxCalls/5702163/timeSeries?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        } ],
    ...
    "pageId" : 5702161,
    "ajaxCallCount" : 1,
    "completedCount" : 39365,
    "failureCount" : 0,
    "loadRate" : 25.93,
    "ajaxCallSlowestId" : 5702163,
    "ajaxCallSlowestTitle" : "ACMEWebApp/buy/spc/handlers/display.html",
    "ajaxCallSlowestAverageResponseTime" : 0.01,
    "ajaxCallHighestErrorsId" : 5702163,
    "ajaxCallHighestErrorsTitle" : "ACMEWebApp/buy/spc/handlers/display.html",
    "ajaxCallHighestErrorsPercentage" : 0
}
            
Once an Ajax call ID is known (or a set of Ajax call IDs), specific metric information pertaining to an Ajax call can be retrieved:
/api/v1/ajaxCalls/5702163?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z
The JSON response contains the containing page ID, URL and title, as well as more metrics that are specific to the individual Ajax call. The response includes the execution target of the Ajax call, its type ( POST, GET, etc) and more call metrics. In our example, since the previously retrieved Ajax call summary showed the page contains only one Ajax call, the metric data associated with the call summary is identical to the metric data associated with the single Ajax call:
{
    "links" : [ {
          "rel" : "self",
          "href" : "api/v1/ajaxCalls/5702163?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "relatedRequests",
          "href" : "api/v1/ajaxCalls/5702163/requests?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        }, {
          "rel" : "timeSeries",
          "href" : "api/v1/ajaxCalls/5702163/timeSeries?since=2016-02-14T18:00:00.000Z&until=2016-02-15T19:18:00.000Z"
        } ],
    ...
    "pageId" : 5702161,
    "pageTitle" : "ACMEWebApp/buy/spc/handlers/display.html",
    "pageURL" : "http://hostA:1111/acmeshopping1/",
    "ajaxCallId" : 5702163,
    "ajaxCallToURL" : "http://acme.com",
    "ajaxCallMethod" : "POST",
    "ajaxCallTitle" : "ACMEWebApp/buy/spc/handlers/display.html",
    "completedCount" : 39365,
    "failureCount" : 0,
    "totalDataFetchTime" : 280,
    "minDataFetchTime" : 0,
    "maxDataFetchTime" : 4,
    "averageDataFetchTime" : 0.01,
    "totalResponseTime" : 387,
    "maxResponseTime" : 4,
    "minResponseTime" : 0,
    "averageResponseTime" : 0.01,
    "loadRate" : 25.93,
    "errorPercentage" : 0
}