Introducción a Ajax

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

RetaxMaster

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

R0Y3R

⚫Dark Mode

caramirezc

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>

Bikatti

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

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

Lucas Alvarez

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

Carlos Nassif Trejo Garcia

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>

william andres rodriguez borja

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.

christian_sc96

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

Juan Enrique Rodriguez Garcia

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

Ivan Alexis Carbajal Sandin

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

Carlos Nassif Trejo Garcia

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

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

eduk2

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.

Harold Celis

hace 2 años

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

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

Migrant Cyborg

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

Jonnathan Ramiro Juma Jara

Angular llego y cambio muchas cosas

Edkar Chachati

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

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

Ricardo Oriel Cuan Sánchez

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

Edgar Ramón González Contreras

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>

Paul Cortes

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.

Paul Cortes

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.

Paul Cortes

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

German Vera