Ejercicio 12

......

Objetivo

Recibir JSON desde el servidor, y modificar el documento utilizando HttpXmlRequest()(AJAX). Luego, en el servidor configurar un URL que devuelva JSON y mostrar el contenido en algún elemento de la página.

App.js

app.get('/ejercicio12', routes.ejercicio12);
app.get('/ejercicio12json', routes.ejercicio12json);

En este caso ambas sentencias, se encargan de renderizar el formulario.

Index.js

exports.ejercicio12 = function(req, res) {
  res.render('eje12');
}

exports.ejercicio12json = function(req,res) {
  res.send(new Date);
}

En esta sección, por un lado se renderiza un formulario; y por otro, se envía (como objeto) la fecha que es tomada desde el sistema.

eje12.jade

html
  head
    meta(charset = 'utf-8')
  body
    form

      time(for='Hora', id='hora')
      br
      
      script
        function getAjax(url, actualizar){

          var http_request = new XMLHttpRequest();

          http_request.onreadystatechange = handle_json;
          http_request.open('GET', url, true);
          http_request.send(null);

          function handle_json() {
            if(http_request.readyState == 4) {
              if(http_request.status == 200) {
                var json_data = http_request.responseText;
                var the_object = JSON.parse(json_data);
                actualizar(the_object);
              } 
              else {
                alert('Ocurrió un problema con la URL');
              }            
              http_request = null;  
            }
          }
        }
        
    :coffeescript
      setInterval (-> 
        getAjax 'http://localhost:8000/ejercicio12json',(t)-> 
          document.getElementById('hora').innerHTML = t)
        , 1000

En el body del formulario se definen label, que permitirá posteriormente; mostrar la fecha y la hora actual en el navegador.

Luego, definimos la función getAjax(url, actualizar) el parámetro URL es donde se muestra los datos en formato JSON. Un XMLHttpRequest se envía al servidor, y sugerencias de nombres se devuelven (a partir de un archivo en el servidor).

http_request.readyState == 4 representa la función al que se llamará de forma asíncrona, cuando el servidor envía una copia de su respuesta. En primer lugar, usted necesita aprender en qué estado de la solicitud se encuentra con cada estado listo.

• 0- La petición está sin inicializar (antes de que hayas llamado open().
• 1- La petición está configurado, pero no se envía (antes de que hayas llamado send ().
• 2- El pedido fue enviado y está en proceso (por lo general, puede obtener los encabezados de contenido de la respuesta en este punto).
• 3- La petición está en proceso, a menudo se sirve de la respuesta de algunos datos parciales, pero el servidor no ha terminado con su respuesta.
• 4- La respuesta es completa, se puede obtener la respuesta del servidor y utilizarlo.

Por su parte, http_request.status == 200 es la respuesta estándar para las solicitudes HTTP éxito. La respuesta real dependerá del método de solicitud utilizado. En caso de ser afirmativa la respuesta, transforma el resultado en formato JSON JSON.parse(json_data).

Por último, modifica dinámicamente el formulario en formato HTML, mostrando la fecha y la hora actual en el navegador.