# Advanced HTTP Plugin

Tested Version: [3.3.0](https://github.com/silkimen/cordova-plugin-advanced-http/releases/tag/v3.3.0)

{% hint style="info" %}
This document is based on the [original document (GitHub)](https://github.com/silkimen/cordova-plugin-advanced-http) .
{% endhint %}

This plugin defines a global `cordova.plugin.http` object, which communicates with HTTP servers. Although the object is in the global scope, it is not available until after the `deviceready` event.

```javascript
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    console.log(cordova.plugin.http);
}
```

## Plugin ID

```
cordova-plugin-advanced-http
```

## Adding the Plugin in Monaca

In order to use this plugin, please enable `AdvancedHTTP` plugin in Monaca Cloud IDE.

## Features

* Communicate with HTTP servers by using native processes of iOS or Android.
* There is the following advantage compared to using `fetch API` in Javascript.
  * CORS restrictions do not apply

## API Reference

### Basic API

This chapter describes the following basic APIs

* sendRequest
* setDataSerializer
* get
* post

#### **sendRequest**

```
cordova.plugin.http.sendRequest(url, options, success, error)
```

* Send HTTP request to specified `url`.
* The `options`contains following keys.
  * `method`: HTTP method
  * `headers`: HTTP headers
  * `param`: query strings(mainly applicable on `get`)
  * `data`: payload data. The format can be defined by `serializer`.(applicable on `post`, `put`, etc.)
  * `serializer`: data format. Refer `setDataSerializer` section about the details.
  * For other keys, see [Cordova Advanced HTTP plugin](https://github.com/silkimen/cordova-plugin-advanced-http).
* success: callback function for success request.
* error: callback function for failure request.

Example:

```javascript
const options = {
  method: "post",
  headers: { "Accept": "application/json" },
  data: { "key1": "123", "key2": "abc" },
  serializer: "json"
};

cordova.plugin.http.sendRequest("https://example.com", options, (response) => {
  // success
  console.log(response.status);
}, (response) => {
  // error
  console.log(response.status);
  console.log(response.error);
});
```

#### **setDataSerializer**

```
cordova.plugin.http.setDataSerializer(serializer)
```

* Set the data format.
* Equivalent to specifying in the `sendRequest API`'s `options.serializer`.
* Only applicable on POST/PUT/PATCH requests.
* Possible values:
  * "urlencoded"
  * "json"
  * "utf8"
  * "multipart"
  * "raw"

Example.1: `serializer`="urlencoded"

```javascript
cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "urlencoded", // Can also be specified with option
    "data": { "key1": "123", "key2": "abc" }
}, success, error);
```

* The values `key1=123`, `key2=abc` are sent as form data.(Equivalent to sending request with `Content-Type: application/x-www-form-urlencoded`)

Example.2: `serializer`="json"

```javascript
cordova.plugin.http.setDataSerializer("json");
cordova.plugin.http.sendRequest(url, {
    "method": "post",
    // "serializer": "json", // Can also be specified with option
    "data": { "key1": "123", "key2": "abc" }
}, success, error);
```

* Send JSON data on payload.

See [Cordova Advanced HTTP plugin](https://github.com/silkimen/cordova-plugin-advanced-http) for more information on other parameters.

#### **get**

```
cordova.plugin.http.get(url, param, headers, success, error)
```

* Send GET request.
* Equivalent to specifying in the `sendRequest API`'s `options.method = "get"`.
* Set query strings as the second argument.

Excample:

```javascript
  cordova.plugin.http.get(url,
  {
    // query parameters
    "key1": "123",
    "key2": "abc"
  }, {
    // headers
  }, success, error);
```

#### **post**

```
cordova.plugin.http.post(url, data, headers, success, error)
```

* Send POST request.
* Equivalent to specifying in the `sendRequest API`'s `options.method = "post"`.
* Set payload data as the second argument. The format can be specified by `setDataSerializer API`.

Example:

```javascript
cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.post(url,
{
    // data
    "key1": "123",
    "key2": "abc"
}, {
    // headers
}, success, error);
```

### Advanced usage

`AdvancedHTTP` plugin also provides various APIs.

* put / patch / delete / head / options
* uploadFile / downloadFile
* getBasicAuthHeader
* useBasicAuth
* setRequestTimeout
* setConnectTimeout (Android Only)
* setReadTimeout (Android Only)
* setFollowRedirect
* getCookieString
* setCookie
* clearCookies
* setServerTrustMode
* setClientAuthMode
* removeCookies

See [Cordova Advanced HTTP plugin](https://github.com/silkimen/cordova-plugin-advanced-http) for more information on these APIs.

## Samples

### Comparison with fetch API

Example: Send POST request

fetch API

```javascript
const url = "https://example.com/";
const method = "POST";
const body = "key1=123&key2=abc";
const headers = {
    "Accept": "application/json",
    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
};
fetch(url, {
    method,
    headers,
    body
}).then((response) => {
    // convert to json
    return response.json();
}).then((result) => {
    console.log(result);
    alert(JSON.stringify(result));
});
```

AdvancedHTTP

```javascript
const url = "https://example.com/";
const data = {
    "key1": "123",
    "key2": "abc"
};
const headers = {
    "Accept": "application/json",
};
cordova.plugin.http.setDataSerializer("urlencoded");
cordova.plugin.http.post(url, data, headers, (response) => {
    console.log(response);
    alert(JSON.stringify(response));
}, (response) => {
    // error
});
```

### Sample application

We created sample application using the AdvanceHTTP plugin. Please click the following link to import the application to Monaca.

[Import sample app.](https://monaca.mobi/en/directimport?pid=639932bee788852269d3cea4)