Skip to content

Instantly share code, notes, and snippets.

@adryx92
Last active May 25, 2020 15:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adryx92/69862489139001d147647298addc3ce6 to your computer and use it in GitHub Desktop.
Save adryx92/69862489139001d147647298addc3ce6 to your computer and use it in GitHub Desktop.
changed function implementation
/**
* @namespace AJAXHelper
*/
var AJAXHelper = (() => {
const HTTP_STATUS_OK = 200; // status 200 is a successful return.
const XHR_READY_STATE_DONE = 4; // readyState 4 means the request is done.
/**
* Makes a POST request to the server and returns any result to the caller.
* @param {!string} url POST URL
* @param {!object} data map of values like <br><code>{"name": "value", "foo": "bar"}</code>
* @param {Function} callback callback function that returns true or false plus an eventual message from the server
* @memberof AJAXHelper
*/
function postData(url, data, callback, async = true) {
let xhr = new XMLHttpRequest();
xhr.open('POST', url, async);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
let dataStr = getAJAXString(data);
xhr.onload = () => {
if (xhr.readyState === XHR_READY_STATE_DONE) {
if (xhr.status === HTTP_STATUS_OK)
callback(true, xhr.responseText);
else
callback(false, xhr.responseText);
}
else
callback(false, null);
};
xhr.send(dataStr);
}
/**
* Makes a GET request to the server and returns the result to the caller.
* @param {string} url GET URL
* @param {object} data map of values like <br><code>{"name": "value", "foo": "bar"}</code>
* @param {Function} callback function that returns an object value from the JSON result of the GET function
* @memberof AJAXHelper
*/
function getData(url, data, callback, async = true) {
const GET_PREFIX = "?";
let dataStr = getAJAXString(data);
let getURL = url + GET_PREFIX + dataStr;
let xhr = new XMLHttpRequest();
xhr.open('GET', getURL, async);
xhr.send(null);
xhr.onload = () => {
if (xhr.readyState === XHR_READY_STATE_DONE) {
if (xhr.status === HTTP_STATUS_OK) {
let jsonData = parseJSON(xhr.responseText);
callback(jsonData);
}
else
console.error("Generic error: " + xhr.status);
}
};
}
/**
* Makes a GET request to the server and returns the result to the caller.
* @param {string} url GET URL
* @param {object} data map of values like <br><code>{"name": "value", "foo": "bar"}</code>
* @returns {Promise} returns the Promise object with the result of the asyncronous operation
* @memberof AJAXHelper
*/
function getDataPromise(url, data) {
const GET_PREFIX = "?";
let dataStr = getAJAXString(data);
let getURL = url + GET_PREFIX + dataStr;
var promiseObj = new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', getURL, true);
xhr.send(null);
xhr.onreadystatechange = () => {
if (xhr.readyState === XHR_READY_STATE_DONE) {
if (xhr.status === HTTP_STATUS_OK) {
let jsonData = parseJSON(xhr.responseText);
resolve(jsonData);
}
else
reject(xhr.status);
}
};
});
return promiseObj;
}
/**
* Creates a string with parameters from the passed object to append to the URL for the REST calls.
* @private
* @param {!object} data map of values like <br><code>{"name": "value", "foo": "bar"}</code>
* @returns {string} a string like <code>name=value&foo=bar</code>
* @memberof AJAXHelper
*/
function getAJAXString(data) {
let dataArr = [];
for (let [name, value] of Object.entries(data))
dataArr.push(`${name}=${value}`);
let dataStr = "";
if (dataArr.length > 0)
dataStr = dataArr.join("&");
return dataStr;
}
/**
* Returns a JavaScript obect from a "JSON-formatted" string.
* @param {!string} JSONStr
* @returns {object}
*/
function parseJSON(JSONStr) {
try {
let data = JSON.parse(JSONStr);
return data;
}
catch (e) {
console.error("JSON parse error: " + e);
return null;
}
}
// public functions
return {
getData: getData,
postData: postData,
getDataPromise: getDataPromise
};
}) ();
const URL = "my-website-url";
const userIDs = [123, 456, 789];
let data = {};
data.cmd = "getUserDetails";
for (userID of userIDs) {
// when server response is ready, the processDetails function is called
AJAXHelper.getDataPromise(URL, userID).then(processDetails, error => {
console.error("Error: " + error);
});
}
function processDetails(result) {
console.log(`User name is ${result.name} and surname is ${result.surname}`);
}
const URL = "my-website-url";
// posting data
let data = {};
data.cmd = "setUserData";
data.name = "John";
data.surname = "Doe";
data.userID = 123;
AJAXHelper.postData(URL, data, (res, msg) => {
if (res)
console.log(msg);
});
// posting data syncronously
AJAXHelper.postData(URL, data, (res, msg) => {
if (res)
console.log(msg);
}, false);
// getting data
let data = {};
data.cmd = "getUserData";
data.userID = 123;
AJAXHelper.getData(URL, data, (res) => {
if (res)
console.log(res);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment