Skip to main content

AJAX HITMAP

Home > Select Project > Analysis > AJAX Hitmap

The Asynchronous JavaScript and XML (AJAX) technology exchanges data and updates web pages in an asynchronous manner. AJAX allows you to create a more complex web page that update part of the page without reloading the entire page. AJAX also allows you to work asynchronously, enabling the code to continuously run while reloading part of the web page.

AJAX has advantages such as user experience improvement and reduction of requests to the server. However, because AJAX is implemented with JavaScript code running in the browser, it requires monitoring for the following reasons:

  • You have to make sure that AJAX requests are handled properly.

  • You have to check the performance degradation caused by AJAX requests.

  • You have to understand the user-perceived performance including the network latency, download time, and such.

In the AJAX Hitmap menu provided from Browser Monitoring, you can see the response times of AJAX events over time on a hitmap chart. You can also see the detailed information for each event. The provided information is as follows:

  • Detailed time information for each AJAX event section

  • AJAX request URL, calling page information, etc.

  • Error message and status code

Basic screen guide

AJAX Hitmap

AJAX Hitmap

This widget displays the response times for AJAX events over time in a distribution chart.

  • The horizontal axis is the AJAX event end time.

  • The vertical axis is the AJAX event's elapsed time.

  • The normal AJAX events are displayed in the order of Light BlueBlueIndigo.

  • The error occurrence AJAX events are displayed in the order of YellowOrangeRed. An error AJAX event occurs when the status code is 0 or more than 400. If the status code is 0, the request is not passed from the browser to the server.

AJAX List

AJAX Hitmap

If any part is dragged in the AJAX Hitmap chart, the AJAX Analysis window appears to display the AJAX event list and details of the dragged area.

The following show the descriptions for columns in the table.

  • AJAX URL: AJAX event URL

  • Start time: AJAX request start time

  • Elapsed time: Elapsed time until the AJAX event completion

  • Page URL: URL of the AJAX event called page

  • Status code: Response status code of the AJAX event

  • Error message: AJAX response value (statusText) when the status code is 0 or more than 400

    Note

    AJAX events whose status code is 0 or more than 400 appear in red in the list.

  • Browser: Type of the browser used by the end user

Note

For more information about the column that can be added using the Add a column button, see the following.

Checking the AJAX event details

If you select each item in the AJAX Analysis window, the AJAX Info window appears on the right to display the detailed information.

AJAX Event Details

The times required for each section is provided in a graph chart while loading the AJAX events. The chart helps you identify slow sections while loading AJAX events and enhance them.

To see only the AJAX list that has errors, on the upper left of the AJAX Info window, select from the Error All choose list.

AJAX information

You can see the properties of the AJAX event. You can see the information such as AJAX request URL, end user access environment, access page information, User ID, Session ID, and Client IP.

Note

WhaTap basically stores the client-related information.

AJAX timing information

The AJAX event loading process is divided into the following steps and the times required for each section are displayed.

  • Redirection time: Time taken by the browser to redirect an AJAX request

  • Caching time: Time taken by the browser to retrieve cached AJAX resources

  • DNS lookup: Time taken by the browser to retrieve the AJAX request domain

  • Connection time: Time taken to establish TCP connection with the AJAX request target server

  • SSL time: Time taken to complete the SSL/TLS handshake

  • Waiting time: Time taken from the start of the browser's HTTP request to the time when the server receives the request and begins responding. The transaction processing time in the server is included in this section.

  • Download time: Time taken by the browser to download the AJAX response values from the server

User session analysis

User session analysis

Based on the user session, you can see the events and errors that occur while interacting with the website in chronological order. For more information about User session analysis, see the following.

Session replay

Session replay

It provides the feature to record and replay all events that users perform on the website. The Session replay feature allows you to reproduce user behaviors such as clicking, scrolling, typing, and page switching. This helps you understand exactly how users actually interact with the website.

Note
  • For information about application of the Session replay feature by using agent options, see the following.

  • For more information about using the Session replay feature, see the following.

Filtering the AJAX list

You can enter a search term for an AJAX list and filter matches. Select desired search criteria and then enter a search term. Press Enter or select Search icon to see the filtered results.

Filtering List

The query criteria that can be selected for filtering are as follows:

  • AJAX URL
  • Page URL
  • Browser
  • OS
  • Device
  • Client IP
  • User ID

Setting the table columns

You can hide table header columns in the AJAX list or add desired items. You can also change the column order. Select Column settings.

Column Settings

Note
  • After configuration, select OK to apply the settings in the table.

  • In the number 3 search bar, enter text to search the desired columns. Only the columns that meet the entered text are displayed.

Adding columns

From the Number 1 list, select the items to add as table header columns. To select all items, select Select All. The column items that can be added are as follows:

Column nameDescription
Client IPIP address of the device used by the end user
AJAX AbortIf the AJAX request is stopped in the browser level, true appears.
User agentEnd user's agent string collected by the browser agent
SizeCapacity for AJAX response values indicating the actual uncompressed capacity
Country/RegionEnd user's country code
CityEnd user's city name
Download timeTime taken by the browser to download the AJAX response values from the server
DeviceEnd user's device type
Redirection timeTime taken by the browser to redirect AJAX requests
User IDEnd user ID assigned randomly
Session IDEnd user's session ID
Connection timeTime taken to establish TCP connection with the target server of the AJAX request
Waiting timeTime elapsed from the start of the browser's HTTP request to the time the server receives the request and starts responding
BrowserType of the browser used by the end user
OSOS type of the device used by the end user
End timeAJAX event end time
Caching timeTime taken by the browser to search the cached AJAX resources
Page titleTitle of the HTML page accessed through the browser
DNS lookupTime taken by the browser to search the AJAX request domain
SSL timeTime taken to complete the SSL/TLS handshake
Valid connection typeNetwork performance measured after the browser accesses the page
Valid bandwidthValue rounded to the 25 kilobits per second whose downlink speed is in Mbps.
Delivery TypeHow to send resources (e.g. cache or navigational-prefetch)
RTTThe round-trip time (RTT) is the time (in milliseconds) taken to initiate a network request and then receive the response.
Note

WhaTap basically stores the client-related information.

Deleting columns

From the number 1 list, unselect the columns to delete. Alternatively, select Delete icon on the right of the item to delete from the number 2 list.

Changing the column order

Drag an item to reposition from the number 2 list, and then move it to the desired position.

Initializing the configuration

To cancel all changes and reset them, select Reset icon Reset.