AJAX CON Vainilla y JQUERY

Nota

Lista:

- Item 1

- Item 2

- Item 3

Párrafo normal

Subtítulo

Título

class Hola
  def self.hi
    puts "Hello world!"
  end
end

Heading text

Label

Monoespaciado

0. Contexto

1. AJAX CON JS PLANO

2. AJAX CON JQUERY

3. EJERCICIO: Un WIDGET del tiempo

Contenidos

¿qué es ajax?

Contexto

- Interacción asíncrona del cliente con el servidor

- El término parece de forma oficial en 2005

- Google con Gmail y Maps dierom un empujón a su expansión

¿Asíncrona?

Contexto

Interfaz

NAVEGADOR

Webserver

CLIENTE

SERVIDOR

Interfaz

NAVEGADOR

Webserver

CLIENTE

SERVIDOR

AJAX

OK!

Espera...

AJAX RESPONSE

ARQUITECTURA SÍNCRONA:

ARQUITECTURA ASÍNCRONA:

AJAX REQUEST

Tráfico HTTP

Tráfico HTTP

¿POR QUÉ AJAX?

Contexto

- Inyectar HTML en una página

- Recibir JSON de un servidor

- Enviar datos (JSON) a un servidor

- Sin bloqueos! (o no...)

UN POCO DE HTTP

Contexto

- La información viaja en paquetes a través del protocolo HTTP

- Cada paquete tiene una identificación que especifica qué va a hacer con la información que tiene

- Request method:

    - GET

    - POST

    - PUT

    - DELETE

    - ...

- Es el nivel más bajo al que podemos operar con AJAX con JS

- Como todo objeto, posee una serie de atributos y métodos

- Vamos a echar un vistazo a su estructura:

EL OBJETO XMLHttpRequest

1. AJAX COn JS PLANO

el primer intento

1. AJAX COn JS PLANO

- Vamos a cargar de forma asíncrona una parte de nuestra página web

- Para ello contamos con dos html's

    - index.html

    - aside.html

index.html

aside.html

AJAX request

HTML response

el primer intento

1. AJAX COn JS PLANO

1. Crear objeto XMLHttpRequest


var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        // hacer algo
    }
};

xhr.open(HTTP_METHOD, content);

2. Abrir petición

3. Crear funcion de callback


xhr.send();

4. Enviar petición

TODO JUNTo

var xhr = new XMLHttpRequest();
xhr.open('GET', 'aside.html'); 

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      document.getElementById('aside').innerHTML = xhr.responseText;
    }
};

function sendAJAX() {
    xhr.send();
}

1. AJAX COn JS PLANO


<aside id="aside">
    <button type="button" onClick="sendAJAX()">Cargar contenido</button>
</aside>

UNDER THE HOOD

1. AJAX COn JS PLANO

onreadystatechange

event listener

readyState

propiedad

V |      State
--------------------
0 | Unsent
1 | Opened
2 | Headers recieved
3 | Loading
4 | Done

 

listen

change

callback


xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        // hacer algo
    }
};

fires

posibles valores de readyState 

¿Por qué jquery?

2. AJAX CON JQUERY

- jQuery reduce considerablemente el número de líneas.

 

- Posee varios shorthands para hacer operaciones concretas (cargar html, leer json, hacer llamadas get/post, etc).

 

- Podemos aprovechar la manipulación del DOM.

 

- Como todo gran poder, conlleva una gran responsabilidad. Hay que usarlo con cautela, o caeremos en el lado oscuro de los programadores de jQuery.

SHORTHANDS

- Para insertar un trozo de HTML externo:


$(selector).load('path/to/content.html');

2. AJAX CON JQUERY

- Para cargar un JSON externo:


$.getJSON('paht/to/content.json', callback);

- Para hacer una petición GET/POST:


$.get(url, data, callback);
$.post(url, data, callback);
url: 'path/to/resource'
data : {
  property : value,
  ...
}
callback = function() { }

WHAT IS THE MATRIX? $.AJAX()

- Lo que en realidad hacemos con los shorthands, es una llamada genérica AJAX, pero con parámetros predefinidos.

 

- Esta llamada genérica se realiza a través de $.ajax();

 

- Veamos qué parámetros admite:

2. AJAX CON JQUERY

$.ajax(url [, settings]);

$.ajax([settings]);
url: 'path/to/resource'
settings : {
  property : value,
  ...
}

$.AJAX([settings])

2. AJAX CON JQUERY


var settings = {
    url : 'path/to/resource',
    beforeSend: function() {},
    data : {
        property : value,
        ...
    },
    method : [GET|POST],
    success : function() {},
}

var settings = {
    url : 'aside.html',
    method : 'GET',
    success : function(data) {
        $('#aside').html(data);
    }
}

function sendAJAX() {
    $.ajax(settings);
}

FORMULARIOS

2. AJAX CON JQUERY

var form = $('form');
var settings = {
    url : $form.attr('action'),
    beforeSend: function() {},
    data : $form.serialize(),
    method : POST,
    success : function(response) {
        // hacer algo con la respuesta
    },
}

$form.submit(function(e){
    e.preventDefault();
    $.ajax(settings);
});

<form action="/upload">
    <input type="text" name="nombre">
    <input type="text" name="apellidos">
    <input type="submit" value="Enviar">
</form>

Un widget del tiempo

3. Mini Ejercicio

- Vamos a usar la API pública de un servicio meteorológico para construir un pequeño widget que use AJAX para mostrar la información

- OpenWeather Map: http://openweathermap.org/api

- Construiremos un pequeño HTML y a través de una llamada AJAX, cargaremos la info de la temperatura y un pequeño icono

Un widget del tiempo

3. Mini Ejercicio

Recursos:

HTML

3. Mini Ejercicio

<div class="widget-wrapper">
  <div class="text">
    <div class="city"></div>
    <div class="tem">
      <span class="max"></span>
      <span class="min"></span>
    </div>
  </div>
  <div class="icon">
    <i class="wi"></i>
  </div>
  <form>
    <input type="text" name="city" placeholder="Ciudad">
    <input type="submit" value="get info">
  </form>
</div>

JS

3. Mini Ejercicio

var $widget = $('.widget-wrapper');
var APPID =  '0b4134c5cf71dd5ed778bf417ddc09ce';
var getCurrentWeather = function(city) {
  
  var url = 'http://api.openweathermap.org/data/2.5/forecast?q='+city+'&APPID='+APPID+'&units=metric';
  $.ajax({
    url : url,
    success : function(response){
      setTemp(response);
      setWeather(response);
    }
  });

};

var setTemp = function(data){
  $widget.find('.max').html(Math.floor(d.list[0].main.temp_max)+'º');
  $widget.find('.min').html(Math.floor(d.list[0].main.temp_min)+'º');
  $widget.find('.city').html(d.city.name);
};
var setWeather = function(data){               
  $widget.find('.icon i').addClass('wi-owm-day-'+d.list[0].weather[0].id);
};

$('form').submit(function(e){
  e.preventDefault();
  var city = $(this).find('input[name="city"]').val();
  getCurrentWeather(city);
})


             

Further Reading

AJAX con JS y jQuery

By mgmerino

AJAX con JS y jQuery

  • 1,200