Un objeto fetch de texto
La función fetch() permite incorporar recursos a la página web sin necesidad de que el navegador la vuelva a cargar. Puede usarse para traer una imagen, un video e incorporarlo a la página. Puede también ser útil para enviar datos a una función php para que los procese (por ejemplo gardarlos en una base de datos) o para pdile datos leídos de la una tbla SQL.
Es un sucesor de AJAX, pero más fácil de utilizar. También tiene control sobre los errores del proceso. Se basa en el uso del mecanismo asíncrono promise (promesas)
Este objeto trata de simpilificar aún más su uso. El obejtivo es utilizarlo para encíos y peticiones de tipo texto a una url que puede ser una función php.Solución
<script>
class TxtFetch{
constructor(url, data, res, err){
this.url = url;
this.data = data;
this.tipo = 'text';
this.resolve = res;
this.reject = err;
}
exec(){
let options = {
method:'POST',
headers: {"Content-Type":"application/x-www-form-urlencoded charset=UTF-8"},
body: this.data};
fetch(this.url,options)
.then (response=>{
if(!response.ok){
throw Error(response.status);
}
return response.text() }).then(this.resolve)
.catch(this.reject)
}
}
</script>
<body>
<div>Se envían como datos doto1=valor1 y dato2=valor2</div>
<div id="resultado"></div>
<script>
/*Uso de esta clase Javascript*/
function exito(data){
document.getElementById("resultado").innerHTML = data;
}
function error(data){
document.getElementById("resultado").innerHTML = "¡Oh! error:"+data;
}
objFetch = new TxtFetch( "./apps/ofetch.php",
"dato1=valor1&dato2=valor2",
exito,
error);
objFetch.exec();
</script>
</body>
Explicación
Esta clase Javascript es utilizable para enviar y recibir datos tipo texto a un script (puede ser un script php) que los procesará y puede devolver un valor también tipo texto.
Incorpora la definición de la clase a tu página, a continuación sigue estos pasos:
- Crea una función para los datos devueltos si la operación se ejecuta correctamente (resuelta)
- Crea otra para manejar los errores que pueda producirse (rechazada). El parámetro es el código de error http devuelto (404, 403, 500)
- Instancia un objeto de esta clase pasándole la url, los datos que enviará y los nombres de las funciones para la promesa cumplida y la de rechazada.
- Ejecuta con el método exec()
Puedes emplear los nombres que quieras para las funciones.
El script php usado aquí es muy simple, solo para muestra:
$respuesta = "Procesados ".$_POST['dato1']." y ".$_POST['dato2'];
echo $respuesta;