Ajax Integration

The Stratox framework provides built-in Ajax integration using the JavaScript fetch library, which you can utilize if needed. While it's not mandatory, you can easily integrate your own Ajax library in the dispatcher within the main JavaScript file, "main.js".

The ajax respons will be passed to the controllers!

You can trigger Ajax calls in two different ways:

1. Configure the main app's settings to enable Ajax calls for every router request automatically (though you can manually disable Ajax calls in each route if necessary).

2. Or manually add Ajax configuration in each route.

3. Or both.

Ajax Options

Both approaches use the same object parameters:

• url: The URL to your site/API location to access via Ajax.

• dataType: Set expected response data type json, xml or text. Json response will be converted to object, xml to DOMParser and text will be text. (default: json)

• path: Extends the URL with a URI path. (optional)

• startPath: Adds a default start path if the URI path is empty. (optional)

• config: Supplies the fetch request with options. You can read more about these options here. (optional)

• get: Passes custom or modifies a GET parameter for the controller result. (optional)

• post: Passes custom or modifies a POST parameter for the controller result. (optional)

Enable Ajax on Every Router Request

To enable Ajax for every router request, open the main JavaScript file "./src/main.js" and add the "request" configuration to the App class. Below, I've filled in each config option:

const app = new App({
    request: {
        dataType: "json",
        url: "https://example.se/backend-location/",
        path: '/api',
        startPath: "home",
        config: {
            headers: {
                'Accept': 'application/json'
            }
        },
        get: function(searchParams) {
            searchParams.append("param", 1);
            return searchParams;
        },
        post: function(object) {
            object.param = 1;
            return object;
        }
    }
});

The dataType configuration automatically sets certain headers in the fetch config to correspond to each data type. However, you can overwrite these headers with your own custom headers if needed.

Enable Ajax Manually on a Router

To enable Ajax manually on a specific router, open the main JavaScript file "./src/routes/app.js" and add the "request" configuration to the route. Below, I've filled in each config option:

router.get('/', [Pages, "start"], {
    url: "https://example.se/backend-location/",
    path: '/home',
    //startPath: "home",
    config: {
        headers: {
            'Accept': 'application/json'
        }
    },
    get: function(searchParams) {
        searchParams.append("param", 1);
        return searchParams;
    },
    post: function(object) {
        object.param = 1;
        return object;
    }
});

With these configurations, you can easily enable Ajax functionality for your Stratox application, either globally or on specific routes. Adjust the options as needed to suit your application's requirements.

Accessing the Ajax Response

Accessing the Ajax response is as simple as accessing the request parameter to retrieve the Ajax request body response. This process works the same in controllers.

router.get('/', function(request, container, helper, builder) {
    console.log(request.response); // The Ajax response
    return this;
});

In this example, request.response allows you to access the Ajax response data within the router/controller function. You can then use this data as needed in your application logic.