AJAX

De Wiket
Salta a la navegació Salta a la cerca

volver a M06 Desarrollo web en entorno cliente

Ejercicios Ajax

  1. 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>
  2. 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>
  3. 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

Ejercicios AJAX en jQuery

  1. Utilizando el siguiente código complétalo para que al clicar el botón "calcula" con una llamada AJAX en jQuery calcule la suma y devuelva el resultado.
    • jq_ajax1.html
    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../jquery-3.2.1.js"></script>
    <script type="text/javascript">
    //asigna el valor de los inputs a variables para que las recoja el PHP
    //Se realiza una llama AJAX al fichero jq_ajax1.php con los parametros y
    //método post. Antes de enviar la llamada AJAX se ejecutará la función
    //mostrarProcesando, si la llamada tiene éxito se ejecutará la función
    // respuesta
    function realizaProceso(valorCaja1, valorCaja2){
            var parametros = {
                    "valorCaja1" : valorCaja1,
                    "valorCaja2" : valorCaja2
            };

            $.ajax({});
    }

    //En el span con id=resultado mostraremos el texto: "Procesando, espere por favor..."
    function mostrarProcesando(){

    }

    //El parámetro res ha de contener el resultado que se ha calculado en el PHP,
    //por lo tanto en el span con id=resultado mostraremos el resultado de la suma
    function respuesta(res){
    }
    </script>
  </head>
  <body>
  Introduce valor 1
  <input type="text" name="caja_texto" id="valor1" value="0"/>
  Introduce valor 2
  <input type="text" name="caja_texto" id="valor2" value="0"/>
  Realiza suma
  <input type="button" href="javascript:;" onclick="realizaProceso($('#valor1').val(), $('#valor2').val());" value="Calcula"/>
  <br/>
  Resultado: <span id="resultado">0</span>
  </body>
</html>
    • jq_ajax1.php
    <?php
$resultado = $_POST['valorCaja1'] + $_POST['valorCaja2'];
echo $resultado;
?>
  2. Utilizando el siguiente código y el método $.getJSON recoje los valores en el PHP y devuelvelos con formato JSON para pintarlos después de la linea horizontal
    • jq_ajax2.html
    <!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Obtener JSON con AJAX</title>
  </head>

  <body>
    <h1>Datos para enviar a PHP</h1>

    <input type="text" id="nombre" placeholder="Nombre" accept="text/plain"><br><br>
    <input type="text" id="apellido" placeholder="Apellido" accept="text/plain"><br><br>
    <input type="number" id="edad" placeholder="Edad" accept="text/plain">

    <div class="enviar"><h3>Enviar</h3></div>
    <hr>
    <div class="respuesta"></div>

    <script type="text/javascript" src="../jquery-3.2.1.js"></script>
    <script>
      $(function(){
        $(".enviar").click(enviarDatos);
      });

      //obtener los valores de nombre, apellido y edad, construir una variable datos con el formato K:V,
      // ej: datos = {"nombre":"lean"}
      // usar la llamada getJSON
      function enviarDatos(e){
      	e.preventDefault();
      	var nombre = $("#nombre").val(),
      	apellido = $("#apellido").val(),
      	edad = $("#edad").val(),

      	datos = {"nombre":nombre, "apellido":apellido,"edad":edad};

        $.getJSON("jq_ajax2.php",datos,mostrarRespuesta);
      }

      //Esta función se ejecutará cuando llegue la respuesta del servidor y tiene que pintar la información
      //que devuelve el servidor (en este caso los datos que le hemos pasado en formato JSON
      function mostrarRespuesta(res){
      }
    </script>
  </body>
</html>
    • jq_ajax2.php
    <?php
  //Obtenemos los datos de los input
  $nombre = $_REQUEST["nombre"];
  $apellido = $_REQUEST["apellido"];
  $edad = $_REQUEST["edad"];

  //Seteamos el header de "content-type" como "JSON" para que jQuery lo reconozca como tal
  header('Content-Type: application/json');
  //Guardamos los datos en un array
  $datos = array(
  'estado' => 'ok',
  'nombre' => $nombre,
  'apellido' => $apellido,
  'edad' => $edad
  );
  //Devolvemos el array pasado a JSON como objeto
  echo json_encode($datos, JSON_FORCE_OBJECT);
?>
  3. Dado el siguiente código utiliza la funcion .load() para cargar el resultado de los datos enviados desde la página
    • jq_ajax3.html
    <html>
  <head>
     <title>Ajax Simple</title>
    <script type="text/javascript" src="../jquery-3.2.1.js"></script>
    <script>
    //Hacemos click en "enlaceajax", cancelamos el evento click por defecto y en el div destino ejecutamos la función load
    // pasandole la URL de destino, los parámetros para el servidor y una función para recibir info de la llamada
    $(function(){
    })

    //pintamos el status de la llamada AJAX en el div "info"
    function datosRecibidos(response, status){
    }
    </script>
  </head>
  <body>
    <p>
      <label for="nombre">Introduce tu nombre</label>
      <input name="nombre" type="text" />
      <br />
      <label for="edad">Introduce tu edad</label>
      <input name="edad" type="number" />
    </p>
    <a href="#" id="enlaceajax">Haz clic!</a>
    <br>
    <div id="destino"></div>
    <br />
    <div id="info">
    </div>
  </body>
</html>
    • jq_ajax3.php
    <br>
Nombre: <?php echo $_POST["nombre"];?>
<br>
Edad: <?php echo $_POST["edad"];?>
Obtingut de «https://wiket.esteveterradas.cat/index.php?title=AJAX&oldid=4421»