sintesis

Ajax Logo
Códigos disponibles en git

Contexto

contexto

Descripción

  • Antecedentes:

    • Objetos iframe en 1996 y layer en 1997

    • Remote Scripting de Microsoft en 1998

    • Applets Java, de Sun Microsystems en 1993

    • XMLHttpRequest en 2002

  • Tecnologías:

    • HTML y CSS, para el diseño de la presentación

    • DOM, para mostrar e interactuar con los datos presentados

    • JSON ó XML, para el intercambio, manejo y presentación de los datos con el servidor

    • XMLHttpRequest, para el intercambio asíncrono con el servidor

    • JavaScript, para unir todas las tecnologías anteriores

  • La petición y recepcción asíncrona de los datos del servidor se realizan a través del objeto XMLHttpRequest con las siguientes propiedades:

    • readyState, devuelve el estado del objeto: 0 = sin inicializar, 1 = abierto, 2 = cabeceras recibidas, 3 = cargando y 4 = completado.

    • responseType, si se asigna el valor json el objeto realiza la llamada al método JSON.parse de manera automática, evitando que el programador lo haga.

    • onload, se dispara cuando la propiedad readyState == 4, con lo que se puede evitar esa comprobación en el procesamiento de la respuesta

    • status, devuelve el estado como un número:

      • 404 para Not Found

      • 200 para OK

    • response, contendrá la respuesta después de ser tratada dependiendo del valor de responseType. Es el equivalente a responseText o responseXML

  • y con los métodos:

    • open(método, URL[, asíncrono [, usuario [, clave]]]), para configurar la petición con los parámetros:

      • método, toma los valores GET, POST o HEAD

      • URL, destino de la petición

      • asíncrono, si toma valor true, el script continúa la ejecución después del método send(), y si es false el script se detiene hasta que termine la operación

      • usuario y clave, para autenticar

    • send(), para envíar al servidor la petición

 
<!DOCTYPE html>
<html>
  <head>
    <title>AJAX</title>
    <script>
      let url =
        "https://restcountries.eu/rest/v2/all";
      let httpRequest =
        new XMLHttpRequest();

      function request() {
        httpRequest.open("GET",
            encodeURI(url), true);
        httpRequest.responseType = "json";
        httpRequest.onload = () => {
        if (httpRequest.status === 200){
          document.getElementById("data").innerHTML
            = JSON.stringify(httpRequest.response);
        } else {
          alert("No hay conexión");
        }};
        httpRequest.send();
      }

    </script>
  </head>
  <body onload="request();">
    <p id="data"></p>
  </body>
</html>

  • encodeURI codifica un Identificador de Recurso Uniforme (Uniform Resource Identifier, URI) reemplazando cada instancia de ciertos carácteres por uno, dos o tres secuencias de escape representando el carácter codificado en UTF-8.
Aplicaciones

Sintesis

sintesis

Bibliografía

Obra, Autor y Edición Portada Obra, Autor y Edición Portada

Ponente

  • Luis Fernández Muñoz

setillo

  • Doctor en Inteligencia Artificial por la UPM

  • Ingeniero en Informática por la UMA

  • Diplomado en Informática por la UPM

  • Profesor Titular de ETSISI de la UPM