Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Introducción a Ajax

15/19
Recursos

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.

Aportes 24

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

¿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)

⚫Dark Mode

<h3>Introducción a Ajax</h3>

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.

<h4>Cómo funciona</h4>
  1. El cliente hace una petición HTTP GET
  2. 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
  3. 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
  4. Una vez que llegue el JSON al navegador del cliente, JS se va a encargar de tomar estos datos y ponerlos en la estructura

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() ^^

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>
<h3>Mi diseño con Vanilla JavaScript y Bootstrap</h3>

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 ^^

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>

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

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

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>

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

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.

El javascript debería ir dentro del body, algo así: <body> ... <script type="text/javascript" src="fichero.js"></script> </body> Aunque funcione fuera del body, no valida.

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

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

Angular llego y cambio muchas cosas

Introducción a AJAX

Al momento de usar esto suele ocurrir en el momento en que un cliente, un navegador, requiere conectarse con el servidor ya que puede necesitar mas información, aqui es donde entra AJAX (Asynchronous Javascript XML), eso quiere decir que es Javascript con XML y todo esto de forma Asincrona, por lo que el cliente no debe esperar la respuesta del servidor para que pueda funcionar, sigue haciendo lo suyo, y cuando llegue la respuesta actúa

Como Funciona

  1. El cliente hace una petición HTTP GET
  2. 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
  3. 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
  4. Una vez que llegue el JSON al navegador del cliente, JS se va a encargar de tomar estos datos y ponerlos en la estructura

No me crea el servidor al hacer

php -S localhost:8000 

¿Alguien sabe del por qué?
instalé el php con

sudo apt update
sudo apt install php
sudo apt-get install php-curl

Yo le puse un poco de estilo a mi html, se los comparto:

<html>
  <head>
    <title>API TEST</title>
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="card shadow">
            <div class="card-body ">
              <div class="form-inline">
                <div class="form-group mb-1">
                  <label for="">Titulo del libro </label>
                  <input type="text" name="bookTitle" id="bookTitle" class="form-control ml-1">
                </div>
                <div class="form-group mx-sm-3">
                 <label for="" >ID de Autor</label>
                  <input type="text" name="bookAuthorId" id="bookAuthorId" class="form-control ml-1">
                </div>
                <div class="form-group mx-sm-3">
                  <label for="">ID del Genero</label>
                  <input type="text" name="bookGenreId" id="bookGenreId" class="form-control ml-1">
                </div>
                <input type="button" value="Guardar" id="bookSave" class="btn btn-primary">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-9">
          <table id="booksTable" class="table">
            <thead>
              <tr>
                <th>Titulo</th>
                <th>Id_Autor</th>
                <th>Id_Genero</th>
              </tr>
            </thead>
            <tbody></tbody>
            
          </table>
        </div>
        <div class="col-3">
          <input type="button" value="Cargar libros" class="btn btn-primary float-left mt-2" id="loadBooks">
        </div>
      </div>
    </div>

    <!-- jQuery and JS bundle w/ Popper.js -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
  </body>
</html>

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.

Excelente por el inicio de la demostración desde un cliente web

excelente levantar el servicio con php…