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
- weather icons: https://erikflowers.github.io/weather-icons/
- payload response: http://openweathermap.org/forecast5
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