lunes, 12 de agosto de 2019

AJAX actua sin recargar la página

script.jsLa tecnología AJAX (Asynchronous JavaScript And XML) tiene grandes ventajas frente a la forma anterior de trabajar con páginas web donde para responder a una actuación del usuario o evento se debía racargar la página por completo. Con AJAX podemos modificar la página actuando en segundo plano, haciendo más rápida la actuación y requiriendo menos datos ya que se modifica únicamente aquellas partes o datos de la página que cambian.

Veamos un ejemplo inspidrado en w3schooles.

Nuestro ejemplo está activo en la página:



index.html

Hemos puesto la llamada al archivo script.js en el head. Se podría haber puesto en el body, al final, pero no ha sido necesario.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>ir a la Luna</title>  
   <script src="script.js"></script>  
  </head>  
  <body>  
   <div id="demo">  
    <h1>Ir a la Luna es un sueño</h1>  
    <button type="button" onclick="loadDoc()">Inténtalo</button>  
   </div>  
  </body>  
 </html>

script.js

 function loadDoc() {  
   var xhttp = new XMLHttpRequest();  
   xhttp.onreadystatechange = function() {  
    if (this.readyState == 4 && this.status == 200) {  
     document.getElementById("demo").innerHTML =  
     this.responseText;  
    }  
   };  
   xhttp.open("GET", "ajax_info.txt", true);  
   xhttp.send();  
  }

ajax_info.txt

 <h1>El sueño se hizo realidad</h1>  
 <p>El hombre pisó la Luna en julio de <strong>1969</strong>.</p>  
 <p>Armstrong fue el primer ser humano que pisó la superficie del satélite terrestre <br>  
 el 21 de julio de 1969 a las 2:56 [UTC] al sur del Mar de la Tranquilidad <br>  
 (Mare Tranquillitatis), seis horas y media después de haber alunizado.</p>
en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)