Apuntes, resúmenes y trabajos para todos los estudiantes y cursos
Guía completa de XMLHttpRequest, JSON, Fetch y Promesas en JavaScript
Pregunta 1: ¿Qué es y para que sirve el objeto XMLHttpRequest?
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.
Pregunta 2: Escribir el ejemplo completo con objeto XMLHttpRequest, en la variable “req”con let req , terminar el código , y del proceso de envío…….
Req.Onreadystatechange = function(){
If(req.ReadyState == 4) { if (req.Status == 200) {
/* la respuesta estar´a contenida en la propiedad req.ResponseText */
} } }
Pregunta 3:
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.
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
*Ejemplos explicativos con GET y POST
Req.Open(“GET”,”http://servidor.Com?Param1=5¶m2=’hola‘) req.Send()
Req.Open(“POST”,”http://servidor.Com) req.Send(“param1=5¶m2=’hola'”)
Pregunta 4: A.-¿Qué es una promesa ?
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.
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.
JSON.Stringify(): Toma un objeto complejo (array u objeto) y nos retorna un string con la codificación en JSON
JSON.Parse(): Hace la operación inversa. Toma un string en JSON y nos retorna el objeto complejo codificado
Pregunta 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.
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){ consolé.Log(datos) }) //Datos es un string con el cuerpo de la respuesta
Pregunta 6: Expresiones Regulares. Auto completar Tabla resumen caracteres comodín
\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
Pregunta 7: ¿Qué es una cookie? Ejemplo para dar y obtener información con sus 2 métodos
Una cookie es un fragmento de información que el cliente envía al servidor en la petición HTTP
Normalmente se envía en las cabeceras
. 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 :
SetCookie()
y GetCookie()
Pregunta 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.
SetItem(nombre,valor): Nos permite introducir un nuevo ítem y su valor en este banco de datos
GetItem(nombre): Recupera el valor a través del nombre con el que lo guardamos
RemoveItem(nombre): Elimina ese dato
Clear(): Limpia todos los datos
Key(pos): Nos da el nombre del dato que se guarda en esa posición del banco de datos
Pregunta 9: Enumerar y Explicar los 3 Eventos de arrastrar y soltar (Drag&Drop):
Los principales eventos que lanzará el objeto arrastrado serán:
Dragstart: Se lanza cuando se inicia el arrastre
Drag: Se lanza de forma periódica mientras el objeto es arrastrado
Dragend: Se lanza cuando finaliza el arrastre
El objeto que recepcionará el objeto arrastrado, llamada comúnmente contenedor, no debe tener ningún atributo específico definido. Este objeto lanzará normalmente los siguientes eventos:
Dragenter: Se lanza cuando un objeto draggable entra en su área
Drop: Se lanza cuando un objeto draggable es soltado en el
Dragleave: Se lanza cuando un objeto draggable abandona su área
Async function cocinando() {Pregunta10: COMPLETAR
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) ){
// Preparo el pedido del Cliente
Let __pedido_______ = cocinando();
Consolé.Log(pedido);
Let pedidoOK = false;
If (pedidoOK) {
Éxito(pedido);
} else {
Error(“Faltan cosas en el pedido”);
} })
Return __recibo________;
}