Oracle APEX : AJAX Callback using apex.server.process

Using AJAX Callback you can perform database actions without having your full page stuck in loading condition. Or, refresh only a part of the page without re-loading the full page (e.g. refreshing a page item, report or dynamic content region). There are primarily two ways of achieving this. One is by using "Execute Server-side Code" option under Dynamic Action. This handles everything under the hood, you just need to write the PL/SQL Code. But, if your requirement is a bit complex and difficult to achieve using DA then you can make custom AJAX Callbacks using apex.server.process (an APEX JavaScript API. Check full Oracle Documentation here).

How to make AJAX Callback using apex.server.process

It involves two parts.

Part 1: Client-side JavaScript Code.

apex.server.process(
    "MY_PROCESS", 
    {
        x01: "val1",
        pageItems: "#P02_PAGE_ITEM_01,#P02_PAGE_ITEM_02"
    },
    {
        loadingIndicator: \(("#div-box-id-"+\)v("P10_PARENT_EXP_ID")),
		success: function( data)
        {
            console.log(data.ajaxResponse01); // This is how to get the data returned from ajax callback.
         // code to run on success
		},
        error: function( jqXHR, textStatus, errorThrown ) 
        {
         // handle error
        }
    }
);

Above JavaScript code I am passing three parameters to apex.server.process API.
1st parameter "MY_PROCESS" is the name of my Ajax Callback PL/SQL process. It can be a page process or an Application Process. Create a page process at Execution point - "Ajax Callback" as shown in below screenshot.
2nd parameter takes Input values that can be used on Server-side PL/SQL side. It can be page items or other values using Xnn or Fnn properties. (Check limits here).
3rd parameter primarily handles the response. It does more than just handling the response. You can show loading indicator on the regions or page items selected using JQuery and set to loadingIndicator property. (Check more properties here).

What to put inside the Ajax Callback PL/SQL code is explained in Part 2. Before that let's cover the other parameters of the JavaScript API.
Second Parameter takes the values that we want to pass (or submit) to the Server-side PL/SQL code. Everything is explained here.

Part 2: Server-side PL/SQL Code

DECLARE
		L_INPUT_01 VARCHAR2(200) := :P02_PAGE_ITEM_01; -- Only those page items can be referenced which are passed by the JavaScript AJAX Call.
        L_INPUT_02 VARCHAR2(200) := :P02_PAGE_ITEM_02;
		L_INPUT_03 VARCHAR2(200) := APEX_APPLICATION.GX01; -- Other method to pass values from Ajax callback JavaScript Code
	BEGIN
		-------
		Code
		-------
		 
		APEX_JSON.OPEN_OBJECT();
		APEX_JSON.WRITE('ajaxResponse01','l_response_01');
		APEX_JSON.WRITE('ajaxResponse02',' '||'l_response_02'); -- Concatenated extra space to the response value, as null response does not get sent.  Beware, It causes value comparison issues  later.
		APEX_JSON.CLOSE_OBJECT()
		 
	EXCEPTION
	    WHEN OTHERS THEN
	        APEX_JSON.OPEN_OBJECT();
	        APEX_JSON.WRITE('ERROR',L_LOG_MESSAGE ||'|--|'||SUBSTR(SQLERRM,1,200));
	        APEX_JSON.CLOSE_OBJECT();
	END;