Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • 31 vistas

    Apoyo Lectura - AJAX y Consumo de APIs Desde El Cliente

    Cargado por

    Orlando Soto
    Este documento describe la tecnología AJAX y cómo usarla para consumir datos de una API. Explica los conceptos clave de AJAX, incluida la asincronía y las peticiones HTTP. Luego detalla cómo realizar peticiones AJAX utilizando el objeto XMLHttpRequest y la biblioteca jQuery, incluidos ejemplos de código. Finalmente, introduce los conceptos de API REST y cómo esta puede usarse con AJAX para recuperar y mostrar datos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd

    Apoyo Lectura - AJAX y Consumo de APIs Desde El Cliente

    Cargado por

    Orlando Soto
    31 vistas46 páginas
    Este documento describe la tecnología AJAX y cómo usarla para consumir datos de una API. Explica los conceptos clave de AJAX, incluida la asincronía y las peticiones HTTP. Luego detalla cómo realizar peticiones AJAX utilizando el objeto XMLHttpRequest y la biblioteca jQuery, incluidos ejemplos de código. Finalmente, introduce los conceptos de API REST y cómo esta puede usarse con AJAX para recuperar y mostrar datos.

    Descripción original:

    Java script

    Título original

    Apoyo Lectura - AJAX y consumo de APIs desde el cliente

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Este documento describe la tecnología AJAX y cómo usarla para consumir datos de una API. Explica los conceptos clave de AJAX, incluida la asincronía y las peticiones HTTP. Luego detalla cómo realizar peticiones AJAX utilizando el objeto XMLHttpRequest y la biblioteca jQuery, incluidos ejemplos de código. Finalmente, introduce los conceptos de API REST y cómo esta puede usarse con AJAX para recuperar y mostrar datos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    31 vistas46 páginas

    Apoyo Lectura - AJAX y Consumo de APIs Desde El Cliente

    Cargado por

    Orlando Soto
    Este documento describe la tecnología AJAX y cómo usarla para consumir datos de una API. Explica los conceptos clave de AJAX, incluida la asincronía y las peticiones HTTP. Luego detalla cómo realizar peticiones AJAX utilizando el objeto XMLHttpRequest y la biblioteca jQuery, incluidos ejemplos de código. Finalmente, introduce los conceptos de API REST y cómo esta puede usarse con AJAX para recuperar y mostrar datos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Descargar como pdf o txt
    Está en la página 1de 46

    AJAX y consumo de APIs

    desde el cliente _
    ¿Qué aprenderemos?

    Esta unidad estará dividida en dos diferentes capítulos, con tal de avanzar progresivamente sobre
    los conceptos necesarios para comprender los conceptos involucrados en la tecnología AJAX y
    cómo utilizarla para consumir información desde una API:

    ● La tecnología AJAX
    ● Consumir datos de una API usando AJAX
    Conceptos claves

    ● Asincronía
    ● AJAX
    ● Petición
    ● Promesa
    ● Evento
    La tecnología AJAX
    La tecnología AJAX

    ● Del inglés Asynchronous JavaScript And XML, Javascript y XML Asíncrono


    ● Permite actualizar el contenido de una web sin necesidad de tener que recargar la página
    La tecnología AJAX
    La tecnología AJAX

    ● La comunicación entre navegador y el servidor se hace a través del protocolo HTTP


    ● Se utilizan los diferentes verbos HTTP para realizar esta comunicación
    ○ GET
    ○ POST
    ○ PUT
    ○ DELETE
    La tecnología AJAX

    ● Una petición AJAX puede ir con información asociada, dentro del cuerpo de la petición.
    ● Esta información puede estar en 3 diferentes formatos:
    ○ Texto plano
    ○ URL codificada
    ○ JSON
    {
    "catalog": [
    Ejemplo de formato {
    "title": "Empire Burlesque",
    JSON "artist": "Bob Dylan",
    "country": USA,
    "company": "Columbia",
    "price": 10.90,
    "year": 1985
    },
    {
    "title": "Hide your heart",
    "artist": "Bonnie Tyler",
    "country": UK,
    "company": "CBS Records",
    "price": 9.90,
    "year": 1988
    }
    ]
    }
    La tecnología AJAX

    ● El servidor puede responder con información en 3 diferentes formatos:


    ○ Texto plano
    ○ JSON
    ○ XML
    <CATALOG>
    Ejemplo de formato <CD>
    <TITLE>Empire Burlesque</TITLE>
    XML <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
    </CD>
    <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
    </CD>
    </CATALOG>
    La tecnología AJAX

    ● REST es el principal protocolo de comunicación utilizado en la web moderna


    ● Del inglés Representational State Transfer, Transferencia de Estado Representacional
    ● Hace uso de los verbos HTTP para definir la comunicación entre cliente y servidor
    Asincronía

    ● Una operación asíncrona corresponde a aquella que se ejecuta de manera independiente y


    paralela al resto de las operaciones de un programa.
    ● Una operación asíncrona no requiere esperar a que otras operaciones terminen para poder
    ejecutarse
    Delegación y propagación de eventos

    ● Eventos con comportamientos nativos


    ● Comportamientos no nativos agregados a través de manejadores de eventos
    Manejador de eventos
    <div id="identificador">
    Crea una alerta del navegador al hacer click en cualquier
    parte del texto
    </div>

    <script>
    // Usando Vanilla Javascript
    var div = document.querySelector('#identificador');

    div.addEventListener('click', function(){
    alert('Hiciste click sobre alguna parte del texto!');
    });
    </script>
    Mal uso de manejadores de eventos
    <ol>
    <li class="elemento">Primer elemento</li>
    <li class="elemento">Segundo elemento</li>
    <li class="elemento">Tercer elemento</li>
    </ol>
    <script>
    var elementos = document.querySelectorAll('.elemento');
    elementos.forEach(function(elemento, i){
    elemento.addEventListener('click', function(){
    alert('Información adicional del elemento '+(i+1));
    });
    });
    </script>
    Mal uso de manejadores de eventos

    1. Mal uso de recursos


    2. No funciona si se agrega un elemento de manera dinámica
    Mal uso de manejadores de eventos
    <ol>
    <li class="elemento">Primer elemento</li>
    <li class="elemento">Segundo elemento</li>
    <li class="elemento">Tercer elemento</li>
    </ol>
    <script>
    var elementos = document.querySelectorAll('.elemento');
    elementos.forEach(function(elemento, i){
    elemento.addEventListener('click', function(){
    alert('Información adicional del elemento '+(i+1));
    });
    });

    var li = document.createElement('li');
    li.appendChild(document.createTextNode('Nuevo elemento'));
    document.querySelector('ol').appendChild(li);
    </script>
    Ciclo de vida de un evento en Javascript
    Ejemplo de la fase de burbujeo
    <style>
    body * {
    margin: 10px;
    border: 1px solid blue;
    }
    </style>

    <form onclick="alert('alerta del elemento FORM')">FORM


    <div onclick="alert('alerta del elemento DIV')">DIV
    <p onclick="alert('alerta del elemento P')">P</p>
    </div>
    </form>
    Buen uso de manejadores de eventos
    ista">
    <li class="elemento">Primer elemento</li>
    <li class="elemento">Segundo elemento</li>
    <li class="elemento">Tercer elemento</li>
    </ol>
    <script>
    var lista = document.querySelector('#lista');
    lista.addEventListener('click', function(){
    alert('Información adicional del elemento');
    });

    var li = document.createElement('li');
    li.appendChild(document.createTextNode('Nuevo elemento'));
    lista.appendChild(li);
    </script>
    Objeto XMLHttpRequest

    ● Objeto Javascript que puede ser utilizado para realizar peticiones AJAX
    ● A pesar de su nombre, puede ser utilizado para recibir información en diferentes formatos
    como:
    ○ Texto plano
    ○ XML
    ○ JSON
    Pasos para utilizar un objeto XMLHttpRequest

    1. Crear un nuevo objeto XMLHttpRequest


    2. Abrir la conexión
    3. Definir la función encargada de procesar la respuesta
    4. Enviar la petición
    Estado de una petición XMLHttpRequest

    ● 0 indica que la petición no ha sido inicializada. Esto implica que sólo se ha creado el objeto
    XMLHttpRequest, pero no se han establecido los parámetros de conexión a través del método
    open.
    ● 1 indica que la conexión con el servidor ya ha sido establecida. Este es el estado posterior a
    la ejecución del método open.
    ● 2 indica que la petición fue recibida por el servidor.
    ● 3 indica que la petición está siendo procesada por el servidor.
    ● 4 indica que la petición ha finalizado y que la respuesta está lista para ser procesada
    Consumir datos de una API usando
    AJAX
    API REST

    ● Comunicación a través del protocolo HTTP


    ● Verbos HTTP más utilizados:
    ○ GET
    ○ POST
    ○ PUT
    ○ DELETE
    Ejemplo de API REST
    <p>El pokémon Charmander tiene <span
    id='abilities'></span> habilidades</p>
    Primera petición AJAX <script>
    var peticion = new XMLHttpRequest();
    usando peticion.open('GET',
    XMLHttpRequest 'https://pokeapi.co/api/v2/pokemon/charmander/',
    true);
    var respuesta = null; // Inicialización de
    una variable para guardar la respuesta
    peticion.onreadystatechange = function() {
    if (peticion.readyState == 4 &&
    peticion.status == 200) {
    respuesta =
    JSON.parse(peticion.responseText);
    var habilidades =
    document.querySelector('#habilidades');
    habilidades.textContent =
    respuesta.abilities.length
    }
    };
    peticion.send();
    </script>
    Peticiones AJAX usando jQuery

    ● La librería jQuery posee un método que simplifica y extiende el uso del objeto
    XMLHttpRequest
    ● $.ajax
    ● Es necesario incorporar jQuery como dependencia para usar este método
    Ejemplo del método $.ajax

    $.ajax('https://pokeapi.co/api/v2/pokemon/charmander/', {
    success: function(data) {
    console.log(data);
    }
    });
    Ejemplo del método $.ajax con uso de callbacks

    $.ajax('https://pokeapi.co/api/v2/pokemon/charmand/', { // Se
    introduce un error en la URL
    success: function(data) {
    console.log(data.abilities.length);
    },
    error: function(error) {
    if(error.status == 404) {
    console.log('El recurso solicitado no existe');
    }
    }
    });
    Ejemplo del método $.ajax con métodos encadenados

    $.ajax('https://pokeapi.co/api/v2/pokemon/charmander/')
    .done(function(data){
    console.log(data.abilities.length);
    })
    .fail(function(error){
    if(error.status == 404) {
    console.log('El recurso solicitado no existe');
    }
    });
    El objeto Promise

    ● Un objeto Promise, también $.ajax('https://pokeapi.co/api/v2/pokemon/charmand


    conocido como promesa, es lo er/')
    .done(function(data){
    mismo que dice su nombre: una
    console.log(data.abilities.length);
    promesa, tal y como se conoce en })
    nuestro lenguaje natural .fail(function(error){
    ● Puede ser ejecutada tanto de if(error.status == 404) {
    manera síncrona como de manera console.log('El recurso solicitado no
    asíncrona existe');
    }
    ● Los métodos done y fail procesan
    });
    la promesa generada por el
    método $.ajax
    Estados posibles de una promesa Javascript

    1. Pendiente (pending): Corresponde al estado inicial, cuando una petición no ha sido ni


    cumplida ni rechazada.
    2. Cumplida (fulfilled): Significa que la petición fue completada de manera satisfactoria.
    3. Rechazada (rejected): Significa que la petición falló.
    Ciclo de vida de una promesa
    verifyUser = function(username, password, callback){
    dataBase.verifyUser(username, password,
    function(error, userInfo){
    Callback Hell if (error) {
    return callback(error);
    }else{
    dataBase.getRoles(username,
    function(error, roles){
    if (error){
    return callback(error);
    }else {
    dataBase.logAccess(username,
    function(error){
    if (error){
    return callback(error);
    }else{
    return callback(null,
    userInfo, roles);
    }
    })
    }
    })
    }
    })
    };
    Solución al Callback
    verifyUser = function(username, password) {
    Hell con el uso de database.verifyUser(username, password)
    Promise .then(function(userInfo){ return
    dataBase.getRoles(userInfo); })
    .then(function(rolesInfo){ return
    dataBase.logAccess(rolesInfo); })
    .then(function(finalResult){
    //Código que procesa el resultado final
    obtenido
    })
    .catch(function(error){
    //Código para manejar los errores que
    pudieran ocurrir
    });
    };
    Ciclo de vida completo de un objeto Promise
    Fetch API

    ● API nativa de Javascript para la realización de peticiones AJAX


    ● Definición genérica para peticiones y respuestas, a través de los objetos Request y Response
    Ejemplo de Fetch API

    fetch('https://pokeapi.co/api/v2/pokemon/charmander/')
    Opciones de configuración de Fetch API
    fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache,
    only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
    'Content-Type': 'application/json' // También puede ser
    'application/x-www-form-urlencoded'
    },
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // no-referrer, *client
    body: JSON.stringify(data)
    });
    Resolución de una promesa

    fetch('https://pokeapi.co/api/v2/pokemon/charmander/')
    .then(function(data){
    console.log(data);
    });
    Métodos para obtener la información de un objeto
    Response
    ● json()
    ● text()
    ● blob()
    ● formData()
    Pasos para resolver una promesa

    1. Resolver el objeto Response obtenido desde la invocación del método fetch con alguno de
    los métodos anteriores.
    2. Procesar la información resuelta desde el objeto Response.

    fetch('https://pokeapi.co/api/v2/pokemon/charmander/')
    .then(function(response){
    return response.json();
    })
    .then(function(data){
    console.log(data);
    });
    www.desafiolatam.com

    También podría gustarte