# [AjaxHelper](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper)

A static utility class that simplifies Ajax requests using the browser's [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch). It provides convenience methods for common HTTP verbs (`GET`, `POST`) and returns standard `Response` promises. Global defaults can be set via [DEFAULT\_FETCH\_OPTIONS](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#property-DEFAULT_FETCH_OPTIONS-static).

```
const response = await AjaxHelper.get('some-url');
const data     = await response.json();
```

Or parse the JSON body in a single step with the `parseJson` option, which exposes it as `parsedJson` on the returned [AjaxResponse](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-AjaxResponse):

```
const { parsedJson } = await AjaxHelper.get('some-url', { parseJson : true });
```

Uploading a file to the server via `FormData`:

```
const formData = new FormData();
formData.append('file', 'fileNameToUpload');
AjaxHelper.post('file-upload-url', formData).then(response => {
    // process request response here
});
```

Useful functions
----------------

Function

Description

[get](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#function-get-static)

Perform a `GET` request

[post](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#function-post-static)

Perform a `POST` request

[fetch](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#function-fetch-static)

Perform a request with any HTTP method

See also
--------

*   [AjaxStore](https://bryntum.com/products/taskboard/docs/api/#Core/data/AjaxStore) - Store that uses AjaxHelper for remote data loading
*   [FetchOptions](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-FetchOptions) - Options object passed to fetch methods

## Properties
Properties are getters/setters or publicly accessible variables on this class

[DEFAULT_FETCH_OPTIONS](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#property-DEFAULT_FETCH_OPTIONS-static)
Sets default options for [AjaxHelper#fetch()](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#function-fetch-static) calls. Please see [FetchOptions](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-FetchOptions) and [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) for details.

```
// default content-type for all requests will be "application/json"
AjaxHelper.DEFAULT_FETCH_OPTIONS = {
    headers : {
        'content-type' : 'application/json'
    }
};
```

## Functions
Functions are methods available for calling on the class

[get](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#function-get-static)
Make a request (using GET) to the specified url. Resolves to a [AjaxResponse](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-AjaxResponse); pass `parseJson : true` in the [FetchOptions](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-FetchOptions) to have the response body parsed and exposed as `parsedJson`.

```
const { parsedJson } = await AjaxHelper.get('data/content.json', { parseJson : true });
```

[post](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#function-post-static)
POST data to the specified URL. Resolves to a [AjaxResponse](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-AjaxResponse); pass `parseJson : true` in the [FetchOptions](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-FetchOptions) to have the response body parsed and exposed as `parsedJson`.

```
const { parsedJson } = await AjaxHelper.post('api/save', { id : 1, name : 'Foo' }, { parseJson : true });
```

[fetch](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#function-fetch-static)
Fetch the specified resource using the `fetch` API. Resolves to a [AjaxResponse](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-AjaxResponse) — the native `Response` extended with `parsedJson` when `parseJson : true` is set in the [FetchOptions](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-FetchOptions).

```
const response = await AjaxHelper.fetch('data/items.json', { parseJson : true });

if (response.ok) {
    console.log(response.parsedJson);
}
```

[mockUrl](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#function-mockUrl-static)
Registers the passed URL to return the passed mocked up Fetch Response object to the AjaxHelper's promise resolve function.

Register a mock endpoint that returns a text body, then read it back from the [AjaxResponse](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#typedef-AjaxResponse) via `responseText`:

```
AjaxHelper.mockUrl('api/greeting', (url, params) => ({
    responseText : `Hello ${params.name}!`
}));

const response = await AjaxHelper.get('api/greeting?name=Linda');
console.log(response.responseText); // 'Hello Linda!'
```

## Typedefs
Typedefs are type definitions for the class

[HttpMethod](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#typedef-HttpMethod)
A string defining the HTTP method. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) for details.

[FetchCredentials](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#typedef-FetchCredentials)
A string defining the request credentials option. See [Fetch API `credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials)

*   `'omit'` — never send credentials in the request or include credentials in the response.
*   `'same-origin'` — only send and include credentials for same-origin requests.
*   `'include'` — always include credentials, even cross-origin.

[FetchOptions](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#typedef-FetchOptions)
Options for the requests. Please see [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) for details

To set default values for the options please use [DEFAULT\_FETCH\_OPTIONS](https://bryntum.com/products/taskboard/docs/api/#Core/helper/AjaxHelper#property-DEFAULT_FETCH_OPTIONS-static) property:

```
// enable passing parameters in request body by default
AjaxHelper.DEFAULT_FETCH_OPTIONS = { addQueryParamsToBody : true };
```

[AjaxResponse](https://bryntum.com/products/taskboard/docs/api/Core/helper/AjaxHelper#typedef-AjaxResponse)
A `Response` type which extends the native [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) with Bryntum properties.