AJAX

Ejecuta el siguiente código y explica como funciona.

<!DOCTYPE html>
<html>
  <head>
    <title>Hola Mundo con AJAX</title>

    <script type="text/javascript">
      function descargaArchivo() {
        // Obtener la instancia del objeto XMLHttpRequest
        if(window.XMLHttpRequest) {
          peticion_http = new XMLHttpRequest();
        }
        else if(window.ActiveXObject) {
          peticion_http = new ActiveXObject("Microsoft.XMLHTTP");
        }

        // Preparar la funcion de respuesta
        peticion_http.onreadystatechange = muestraContenido;

        // Realizar peticion HTTP
        peticion_http.open('GET', 'http://localhost:8888/ejercicios_js/holamundo.txt', true);
        peticion_http.send(null);

        function muestraContenido() {
          if(peticion_http.readyState == 4) {
            if(peticion_http.status == 200) {
              alert(peticion_http.responseText);
            }
          }
        }
      }

    window.onload = descargaArchivo;
    </script>

  </head>
  <body></body>
</html>

Dada la siguiente refactorización del ejercicio anterior comenta los cambios

<!DOCTYPE html>
<html>
  <head>
    <title>Hola Mundo con AJAX</title>

    <script type="text/javascript">
      var READY_STATE_UNINITIALIZED=0;
      var READY_STATE_LOADING=1;
      var READY_STATE_LOADED=2;
      var READY_STATE_INTERACTIVE=3;
      var READY_STATE_COMPLETE=4;

      var HTTP_STATUS_OK = 200;

      var peticion_http;

      function cargaContenido(url, metodo, funcion) {
        peticion_http = inicializa_xhr();

        if(peticion_http) {
          peticion_http.onreadystatechange = funcion;
          peticion_http.open(metodo, url, true);
          peticion_http.send(null);
        }
      }

      function inicializa_xhr() {
        if(window.XMLHttpRequest) {
          return new XMLHttpRequest();
        }
        else if(window.ActiveXObject) {
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
      }

      function muestraContenido() {
        if(peticion_http.readyState == READY_STATE_COMPLETE) {
          if(peticion_http.status == HTTP_STATUS_OK) {
            alert(peticion_http.responseText);
          }
        }
      }

      function descargaArchivo() {
        cargaContenido("http://localhost/holamundo.txt", "GET", muestraContenido);
      }

      window.onload = descargaArchivo;
    </script>

  </head>
  <body></body>
</html>

Usando el código siguiente realiza los siguiente ejercicios:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Ejercicios AJAX 3</title>
    <style type="text/css">
      body { font: 13px Arial, Helvetica, sans-serif; }
      h2 { margin-bottom: 0; font-size: 1.2em; }
      #recurso, #enviar { padding: .3em; font-size: 1.2em; }
      #principal { float: left; width: 70%; }
      #secundario { float: right; width: 25%; }
      #contenidos, #estados, #cabeceras, #codigo {
        border: 2px solid #CCC;
        background: #FAFAFA;
        padding: 1em;
        white-space: pre;
      }
      #contenidos {
        min-height: 400px;
        max-height: 600px;
        overflow: scroll;
      }
      #estados { min-height: 200px; }
      #cabeceras { min-height: 200px; }
      #codigo { min-height: 100px; font-size: 1.5em; }
    </style>
    <script type="text/javascript">
    </script>
  </head>
  <body>
    <form action="#">
      URL: <input type="text" id="recurso" size="70" />
      <input type="button" id="enviar" value="Mostrar contenidos" />
    </form>

    <div id="principal">
      <h2>Contenidos del archivo:</h2>
      <div id="contenidos"></div>

      <h2>Cabeceras HTTP de la respuesta del servidor:</h2>
      <div id="cabeceras"></div>
    </div>

    <div id="secundario">
      <h2>Estados de la petición:</h2>
      <div id="estados"></div>

      <h2>Código de estado:</h2>
      <div id="codigo"></div>
    </div>
  </body>
</html>

En el input URL debe aparecer la URL de la propia página al cargar por primera vez
Al clicar en el botón Mostrar Contenido mediante AJAX deberemos hacer una petición a la URL que haya en el input URL y cargar la respuesta en el apartado "Contenidos del archivo"
En la caja de texto estados de la petición se debe mostrar en cada momento el estado actual de la petición
En la caja de texto cabeceras HTTP de la respuesta del servidor se debe de mostrar las cabeceras de respuesta de la petición
En código de estado se ha de mostrar el código y el texto del estado de la respuesta

AJAX

AJAX

Menú de navegació

Cerca