Portada » Informática » Introducción a las Tecnologías Web: XMLHttpRequest, Fetch, Promesas, Almacenamiento Web y Drag & Drop
Representa una interacción completa con el servidor: envío de petición–
Recepción de respuesta.
Lo primero para lo que lo vamos a usar es para construir la petición. Una vez construida y antes de enviarla hemos de configurar cual será el callback con el que trataremos la respuesta. Esto es muy importante ya que el método de envío es asíncrono y no podemos esperar a hacer el envío para diseñar como queremos que sea la recepción de los datos.
Vamos con la primera parte: crear un nuevo objeto a partir de XMLHttpRequest.
Realmente valdría con crearlo usando new como un objeto más pero el resto del código lo ponemos para, en caso de que este objeto no exista como pasa en las versiones más antiguas de Internet Explorer, se siga creando el objeto alternativo en estos navegadores.
con let req , terminar el código , y del proceso de envío. Para preparar la respuesta asignamos un manejador de eventos al evento onreadystatechange del objeto petición. En el código inferior se puede ver que este método hace uso de dos propiedades más del objeto petición.
if (window.XMLHttpRequest) {req=new XMLHttpRequest();
req.Onreadystatechange = function(){ if(req.ReadyState == 4) { if (req.Status == 200) { /* la respuesta estará contenida en la propiedad req.ResponseText */}}}
Cuando usemos AJAX un elemento que podemos configurar son las cabeceras de la petición saliente. Igualmente podemos consultar el valor de las cabeceras que nos lleguen en la respuesta del servidor. Para ambos casos tenemos funciones del objeto XMLHttpRequest que nos permitirán ambas operaciones, enumerar y explicar ambas.
setRequestHeader(): Recibe tanto el nombre de la cabecera a configurar como el nuevo valor que queramos configurar.
getResponseHeader(): Recibe el nombre de la cabecera de la respuesta que queremos comprobar y retorna su valor.
Se reduce en gran medida la cantidad de código que tenemos que usar para realizar una petición. Esto ayuda a tener un código más mantenible y saneado. El único problema que podemos tener a estas alturas para utilizar este método es que se basa en un concepto novedoso también introducido en esta nueva versión del estándar que son las promesas.
Una promesa es un objeto que recibe uno o varios callbacks que se ejecutarán cuando el código de esa promesa haya sido ejecutado en su totalidad.
Más adelante hablaremos de las promesas en profundidad y las usaremos en más contextos pero por ahora nos vale con su definición para saber como utilizar fetch.
B.- Al igual que pasaba con XML contamos con multitud de librerías que permiten codificar y descodificar en JSON para cualquier lenguaje de forma sencilla.
contamos con 2 métodos ¿Cuales son ?
Stringify()
: un objeto complejo (array u objeto) y devuelve un string con la codificación en JSON.
5: Para realizar una petición contra un servidor simplemente usaremos la función fetch a la que le pasaremos un objeto con toda la configuración para esa petición y la URL a la que queremos enviar dicha petición.
La función nos retornará un objeto promesa a la que asociaremos el callback que queremos que se ejecute cuando finalice la petición.
Este callback será, al igual que antes, quien reciba la respuesta del servidor y la procese.Escribir el ejemplo completo.
var url = ‘http://servidor.Com‘
var params ={ method:’POST’, body:’este es el cuerpo de la petición’ }
fetch(url, params) .Then(function(respuesta){ // tratamos la respuesta })
fetch(‘http://servidor.Com‘) .Then(function(respuesta){ return respuesta.Text() }) .Then(function(datos){ /* Datos sera un string con el cuerpo de la respuesta */ consolé.Log(datos) })
\w = Cualquier palabra
\s = Cualquier espacio
\S = Cualquier carácter que no sea un espacio
\d = Cualquier dígito
\D = Cualquier carácter que no sea dígito
? = Una o ninguna vez. Equivale a {0,1}
+ = Al menos una vez.
* = Al menos cero veces. Equivale a {0,}
ˆ = Inicio de línea
$ = Fin del línea «»DEC»»
Una cookie es un fragmento de información que el cliente envía al servidor en la petición HTTP. Estas cookies son muy útiles pues HTTP se diseño con peticiones o mensajes denominados autocontenidos, que quiere decir que cada petición es independiente de las demás y lleva toda la información necesaria para ser procesada, no requiere o depende de otras para ser procesadas. Para que el servidor pueda identificar y relacionar una serie o secuencia de peticiones HTTP el cliente puede «marcarlas» todas ellas con una o varias cookies. Esto se usa mucho con las conocidas como sesiones de trabajo. Estas cookies serán consultadas por el servidor y de esta manera este puede tener separado y relacionado el tráfico de diferentes clientes simultáneos a pesar de que el origen de red sea el mismo. Los 2 son :
8: Dentro del almacenamiento web, usaremos dos APIs gemelas llamadas localstorage y sesionstorage . Ambas comparten los mismos métodos y su única diferencia sería la persistencia de sus datos.
Nos permite introducir un nuevo ítem y su valor en este banco de datos.
Recupera el valor a través del nombre con el que lo guardamos.
Elimina ese dato.
Limpia todos los datos.
Nos da el nombre del dato que se guarda en esa posición del banco de datos.
Los principales eventos que lanzará el objeto arrastrado serán:
Se lanza cuando se inicia el arrastre.
Se lanza de forma periódica mientras el objeto es arrastrado.
Se lanza cuando finaliza el arrastre.
El objeto o caja que recepcionará el objeto arrastrado, llamado contenedor, no debe tener ningún atributo específico definido. Este objeto lanzará normalmente los siguientes eventos:
Se lanza cuando un objeto draggable entra en su área.
Se lanza cuando un objeto draggable es soltado en el.
Se lanza cuando un objeto draggable abandona su área.
async function cocinando() {
let url = ‘xxx.Json’;
try {
let res = _await fetch(url)_;
return await _res.Json()_;
} catch (error) {
consolé.Log(error); }}
function pedirComida() {
let recibo = new _promise(function (éxito,error) )_{
let _pedido_ = cocinando();
consolé.Log(pedido);
let pedidoOK = false;
if (pedidoOK) {
éxito(pedido);
} else {
error(«Faltan cosas en el pedido»);
} })
return _recibo_; }
let ticket = pedirComida();
let comida = comer(_ticket_)
;
ticket
._then_(function (comida) {
consolé.Log(«Que hamburguesa tan rica!»)
}).Catch(function (_error_)
{
consolé.Log(«Protesto porque » + error)
})