Comunicación Asíncrona en Aplicaciones de una Sola Página

Clase 15 de 19 • Curso de API REST con PHP

Resumen

Es muy común tener comunicaciones con API REST al momento de tener una aplicación de una sola página o SPA, ya sea para obtener o guardar datos. Esta comunicación se realiza a través de AJAX, Asynchronous JavaScript XML. la clave es la parte de asincronismo pues el cliente no se queda bloqueado.

Franklin Rosas

student•

¿QUÉ ES BOOTSTRAP Y CÓMO FUNCIONA EN EL DISEÑO WEB?

Bootstrap, es un framework, te permite crear interfaces web con CSS y JavaScript, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tablet u otro dispositivo. Esta técnica de diseño y desarrollo se conoce como “responsive design” o diseño adaptativo.

Si quieres leer un poco más al respecto encontraras información en: https://www.arweb.com/chucherias/¿que-es-bootstrap-y-como-funciona-en-el-diseno-web/ y aquí también: https://es.wikipedia.org/wiki/Bootstrap_(framework)

Luis Abdel Rangel Castro

student•

Platzi Bootstrap

Jimmy Buriticá Londoño

student•

Super

Carlos Eduardo Gomez García

teacher•

AJAX: Asynchronus JavaScript And XML

Es una forma de relizar peticiones a servidores sin necesariamente esperar a que la petición termine, existen muchas maneras de usarlo, antes se usaban objetos de JavaScript como XMLHttpRequest (el clásico) Internet Explorer usaba otro que se llamaba ActiveXObject, pero gracias a jQuery muchos los recordamos gracias a su función sencilla que era: $.ajax (o $get, $.post), actualmente existen muchas librerías de JavaScript que te permiten hacer peticiones Ajax como lo son axios, que es una librería muy completa, existe Trae, que es otra librería muy completa desarrollada por uno de los profesores de Platzi

Pero el método nativo actualmente se llama fetch() ^^

Royer Guerrero Pinilla

student•

⚫Dark Mode

Camilo Ramirez Castillo

student•

código index.html

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <table id="booksTable" class="table">
            <thead>
                <tr>
                    <th>Titulo</th>
                    <th>Id_Autor</th>
                    <th>Id_Genero</th>
                </tr>
            </thead>
        </table>
        <tbody>
        </tbody>
        <input type="button" value="Cargar libros" id="loadBooks"/>
        <div style="display: none;" id="messages">
            <p></p>
        </div>
        <div style="display: none;" id="bookForm">
            <hr/>
            <table>
                <tr>
                    <td>Titulo:</td>
                    <td><input type="text" name="bookTitle" id="bookTitle"></td>
                </tr>
                <tr>
                    <td>ID Autor:</td>
                    <td><input type="number" name="bookAuthorId" id="bookAuthorId" min="1"></td>
                </tr>
                <tr>
                    <td>ID Genero:</td>
                    <td><input type="number" name="bookGenreId" id="bookGenreId" min="1"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="button" value="Guardar" id="bookSave"/></td>
                </tr>
            </table>
        </div>
    </body>
</html>

Juan Pablo Donayre Quintana

student•

revisar los tags de TABLE

María Sierra

student•

Introducción a Ajax

Un escenario muy común de comunicación vía Rest API lo constituye las single page application, en este escenario lo que sucede es que el cliente necesita comunicarse con el servidor para obtener más datos o hacer una actualización. Todo esto se vasa en una tecnología llamada AJAX, que significa Asynchronous Javascript XML.

Cómo funciona

El cliente hace una petición HTTP GET
Obtiene HTML + JS y el navegador interpreta todo para mostrar la página, cuando tú haces clic en algún botón o algo parecido
En ese momento, se dispara un nuevo pedido al servidor, este es el pedido que viaja vía AJAX y del otro lado, hay un servidor de tipo Restful que responderá con información JSON
Una vez que llegue el JSON al navegador del cliente, JS se va a encargar de tomar estos datos y ponerlos en la estructura

Mariano Gastón Paduani

student•

gracias!

Lucas Alvarez

student•

Mi diseño con Vanilla JavaScript y Bootstrap

He hecho un diseño incorporado en el serivor, que necesita el token de JsonWebToken para hacer cualquier acción (Leer, eliminar, añadir). Y tiene un alert-box que te avisa cada acción.

Si quieres probarlo les dejo el link a mi Repo en GitHub. Soy bastante nuevo en todo esto, así que seguro estoy lleno de códigos basura. Pero fue emocionante hacerlo ^^

Carlos Nassif Trejo Garcia

student•

Aquí esta la pagina completa, la que esta cargada en los archivos tiene errores....

<html>
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <body>
       <table id="booksTable" class="table">
           <thead>
               <tr>
                    <th>Titulo</th>
                    <th>Id_Autor</th>
                    <th>Id_Genero</th>
               </tr>
           </thead>
           <tbody>
           </tbody>
           <input type="button" value="Cargar libros" id="loadBooks"/>
           <div style="display: none;" id="messages">
            <p></p>
           </div>
           <div style="display: none;" id="bookForm">
                <hr/>
                <table>
                    <tr>
                        <td>Titulo</td>
                        <td> <input type="text" name="bookTitle" id="bookTitle"/> </td>
                    </tr>
                    <tr>
                        <td>Id Autor</td>
                        <td> <input type="text" name="bookAuthorId" id="bookAuthorId"/> </td>
                    </tr>
                    <tr>
                        <td>Id Genero</td>
                        <td> <input type="text" name="bookGenreId" id="bookGenreId"/> </td>
                    </tr>
                    <tr>
                        <td colspan="2"> <input type="button" value="Guardar" id="bookSave"> </td>
                    </tr>
                </table>
            </div>
       </table> 
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
</html>

YANG MENDOZA

student•

Gracias partner !!

William Rodriguez

student•

Ajax es una tecnologia y una manera de realizar peticiones asincronas desde los navegadores web utilizando el objeto XMLHttpRequest. actualmente lo navegadores modernos proveen una libreria llamada fetch para realizar estas llamadas sin necesidad de instalar nada. Lo digo por que en ocasiones la gente se confunde y cre ajax es solo la libreria de jquery. angular usa ajax, react y en la actualidad casi cualquier sitio web.

Juan David Cuervo Velasquez

student•

Hola! por que le mustra la tabla si la propiedad display esta en none?

  <div style="display: none;" id="bookFrom">

Gracias!

Massimo Di Berardino

student•

Hola @jcuervo2, podrías compartir todo el código para poder ayudarte mejor, solo esa línea de código no nos da mucho contexto

Martín S. Campos

student•

Es algo extraño, tal vez en los cursos de HTML y CSS lo mencionen. En si la tabla esta adentro de ese div y no toma el estilo de este div, sin embargo si ese estilo se lo aplicas a la tabla si te lo reconoce.

Christian David Sánchez

student•

Documentación de AJAX: https://api.jquery.com/category/ajax/

Juan Enrique Rodriguez Garcia

student•

https://getbootstrap.com/docs/4.5/getting-started/download/ bootstrap - Un poco mas abajo copiad en BootstrapCND

Ivan Alexis Carbajal Sandin

student•

Me perdí, como hizo que el servidor tuviera el HTML después de ser levantado??

Claudio Jesus Vázquez Villanueva

student•

El servidor al no tener un punto de entrada lo que hace es Buscar automáticamente un Index. Es como declarar que abriera implícitamente el index.

Jesus Gaviria Rubio

student•

Como es solo Html + JS no es necesario un servidor

Carlos Nassif Trejo Garcia

student•

Aqui esta los links que copia al inicio:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Rafael Carrillo

student•

La parte de programación de html debería saltar porque y dejar los archivos en la zona descarga, porque quita tiempo de la explicación

Gabriel De Andrade

student•

Algunas personas prefieren tener la explicación, otras prefieren ir directo al grano 🤷. De todas maneras te puedes saltar esa parte de la clase y descargar el archivo desde la sección de enlaces :D

Eduardo Jiménez

student•

El javascript debería ir dentro del body, algo así:

Aunque funcione fuera del body, no valida.

Jean Garcia

student•

Quiero compartir mi api rest: https://github.com/jeancgarciaq/api-rest-php-test tiene un pequeño front-end de una página para interactuar con mi API.

Harold Celis

student•

AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and XML). Es un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de forma asíncrona, procesando cualquier solicitud al servidor en segundo plano. Como es el proceso:

El usuario realiza una petición HTTP GET.
Obtiene como respuesta HTML + JS en ese momento es la responsabilidad del navegador interpretar el HTML, CSS, JS y dibujarlo en la página, permitiendo a su vez la interacción al usuario con los iconos de la página.
Al haber interacción por parte del usuario se realiza un nuevo pedido al servidor (HTTP GET) este viaja vía AJAX, al otro lado debe haber un servidor tipo REST FULL
Este servidor tipo RESTFULL responderá usualmente con información JSON, una vez esta información llegue, el propio JavaScript tomará esa información y actualizará la página con los nuevos datos.

Juan Guillermo Perez Cardozo

student•

jeje no se alcanzo a hacer nada de ajax en este video, vamos al siguiente

Migrant Cyborg

student•

Si ya sabes bastante Html, adelanta hasta el minuto 7:10 jeje, Saludos

Jonnathan Ramiro Juma Jara

student•

Angular llego y cambio muchas cosas