Asynjax v2.0.0

Asíncrono Ajax sin jQuery

🗃️ POST

Forma sencilla

asynjax.post('index.php', function (exitoso, respuesta) {
	console.log('Éxito: ' + exitoso + ', Respuesta: ' + respuesta);
});

Enviar datos al servidor

//Desde un objeto FormData:
var nFormData = new FormData();
    nFormData.append('Usuario', 'Kendry');
    nFormData.append('Edad', 19);

asynjax.post('index.php', {
	formData: nFormData
}, function (exitoso, respuesta) {
	if (exitoso) {
		console.log('Éxito: ', respuesta);
	} else {
		console.error('Error: ' + respuesta);
	}
});

//Desde un formulario:
var nForm = document.getElementById('idFormulario');

asynjax.post('index.php', {
	form: nForm,
	hideClass: 'noEnviar' // (Opcional) Si algún elemento tiene la clase especificada, no será enviado.
}, function (exitoso, respuesta) {
	if (exitoso) {
		console.log('Éxito: ', respuesta);
	} else {
		console.error('Error: ' + respuesta);
	}
});

//Con parámetros:
asynjax.post('index.php', {
	params: {Usuario: 'Kendry', Edad: 19}
}, function (exitoso, respuesta) {
	if (exitoso) {
		console.log('Éxito: ', respuesta);
	} else {
		console.error('Error: ' + respuesta);
	}
});

Otras opciones disponibles

asynjax.post('index.php', {
    withCredentials: true, // Utilizar credenciales. Default false.
    asJson: true, // Obtener la respuesta como un objeto JSON. Default false.
    contentType: 'application/json; charset=UTF-8', // Default 'application/x-www-form-urlencoded; charset=UTF-8'.
    progress: function (porcentaje) {
   	console.log('Progreso: ' + porcentaje + '%');
    }
}, function (exitoso, respuesta) {
    console.log('Éxito: ' + exitoso + ', Respuesta: ' + respuesta);
});

Ejemplo práctico

Subir archivos al servidor:

<input id="inputArchivo" type="file" lang="es" accept="*" multiple="multiple">

/**
 * evento() Añade un evento a un objeto del DOM
 *
 * @param {String} txtEvento
 * @param {Element} elemento
 * @param {Function} funcion
 */
function evento(txtEvento, elemento, funcion) {
	try {
		if (elemento) {
			if (elemento.addEventListener) {
				// W3C DOM
				elemento.addEventListener(txtEvento.toLowerCase(), funcion, false);
			} else if (elemento.attachEvent) {
				//IE 9 - 10 DOM only <Deprecated>
				elemento.attachEvent("on" + txtEvento, funcion);
			} else {
				throw new Error('No es posible añadir el evento ' + txtEvento);
			}
		} else {
			throw new Error('No se encontró el objeto que implementa la interfaz del evento ' + txtEvento);
		}
	} catch (e) {
		throw new Error(e.message);
	}
}

//Añadimos el evento Change al elemento inputArchivo para que ejecute la función enviarArchivo:
evento('Change', document.getElementById('inputArchivo'), enviarArchivo);

function enviarArchivo() {
	const input = document.getElementById('inputArchivo');
	if (input.files) {
		var formData = new FormData();
		formData.append('Detalle', '¡Hola server!');

		const cant = input.files.length;
		for(var i=0; i<cant; ++i) formData.append("arrayArchivos[]", input.files[i], input.files[i].name);

		asynjax.post('index.php', {
                    formData: formData,
                    progress: function (porcentaje) {
                        console.log('Progreso: ' + porcentaje + '%');
                    }
                }, function (exitoso, respuesta) {
                    if (exitoso) {
                        console.log('Éxito: ', respuesta);
                    } else {
                        console.error('Error: ' + respuesta);
                    }
                });
	}
}

---

🗃️ GET