Monaca Docs
Search
K

Advanced HTTP Plugin

Tested Version: 3.3.0
This document is based on the original document (GitHub) .
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.
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 optionscontains 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.
  • success: callback function for success request.
  • error: callback function for failure request.
Example:
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"
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"
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 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:
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:
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 for more information on these APIs.

Samples

Comparison with fetch API

Example: Send POST request
fetch API
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
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.