'use strict';
/**
* Ajax
* Esta clase permite realizar peticiones vía ajax de forma fácil,
* utilizando los métodos GET y POST.
* La sencillez de la clase se ve beneficiada por el uso del objeto Promise
* implementado en el último estándar de ECMASCRIPT 6 - ES2015.
*
* Ejemplo - Request POST:
*
* let data = {
* name: "Juan",
* lastname: "Perez"
* };
*
* Ajax
* .post({
* url: 'http://localhost/test.php',
* responseType: 'json',
* data: data
* })
* .then((response) => {
* console.log(response);
* })
* .catch((error) => {
* console.log(error);
* });
*
* Tanto el método .post como .get reciben como parámetro un objeto.
* Dicho objeto,cuenta con 3 propiedades:
* url: String, de la dirección url (relativa o absoluta).
* [ responseType ]: String, Debe ser uno de los siguientes valores:
* - text (default)
* - arraybuffer
* - blob
* - json
* - document
* [ data ]: String|FormData|Object.
* @author Alejandro Berón
* @version 1.0.0
*/
class Ajax {
/**
* _validateData
* @param {String|Object} data
* @return {Boolean}
*/
static _validateData(data) {
if (/^(([a-z0-9]+)=.)+(.)*$/.test(data)) {
return true;
} else if (typeof data === 'object') {
if (data.constructor === Object || data.constructor === FormData) {
return true;
}
}
return false;
}
/**
* _validateParams
* @param {String} url
* @param {String} responseType
* @param {String|Object} data
* @return {Boolean}
*/
static _validateParams(url, responseType, data) {
const RESPONSE_TYPE = new Set();
RESPONSE_TYPE.add('');
RESPONSE_TYPE.add('arraybuffer');
RESPONSE_TYPE.add('blob');
RESPONSE_TYPE.add('json');
RESPONSE_TYPE.add('document');
RESPONSE_TYPE.add('text');
if (!url) {
throw new Error(`[ ERROR ] the url parameter is required.`);
}
if (!RESPONSE_TYPE.has(responseType)) {
throw new Error(`[ ERROR ] ${responseType} not valid.`);
}
if (data) {
if (!this._validateData(data)) {
throw new Error(`[ ERROR ] ${data} Is not a valid type.`);
}
}
}
/**
* _getJSON
* @param {Object} data
* @return {String}
*/
static _getJSON(data) {
return JSON.stringify(data);
}
/**
* init
* Create new object XMLHttpRequest.
* @return {Object}
*/
static _init() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}
}
/**
* _request
* @param {Object} request
*/
static _request(request, resolve, reject) {
let http = Ajax._init();
http.responseType = request.responseType;
// open request
http.open(request.method, request.url, true);
if (request.data) {
if (request.method === 'POST') {
if (request.data.constructor === Object) {
request.data = Ajax._getJSON(request.data);
http.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
} else if (request.data.constructor === String || typeof request.data === 'string') {
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
}
}
http.onload = () => {
if (http.status === 200) {
resolve(http.response);
} else {
reject(new Error(`[ ERROR ] ${http.statusText}: ${http.statusText}`));
}
};
http.onerror = () => {
reject(new Error('Network Error'));
};
http.send(request.data);
}
/**
* get
* @param {Object}
* url {String}
* responseType {String}
* data {String|Object}
* @return {Object} - Promise
*/
static get({ url, responseType = '', data = '' }) {
return new Promise((resolve, reject) => {
Ajax._validateParams(url, responseType, data);
if (typeof data === 'string' || data.constructor === String) {
url += `?${data}`;
}
Ajax._request({
url: url,
responseType: responseType,
data: null,
method: 'GET'
}, resolve, reject);
});
}
/**
* post
* @param {Object}
* url {String}
* responseType {String}
* data {String|Object}
* @return {Object} - Promise
*/
static post({ url, responseType = '', data = '' }) {
return new Promise((resolve, reject) => {
Ajax._validateParams(url, responseType, data);
Ajax._request({
url: url,
responseType: responseType,
data: data,
method: 'POST'
}, resolve, reject);
});
}
}
Comentarios sobre la versión: 1.0 (4)