jQuery AJAX
eugeniaperez.es
eugeniaperez.es
AJAX
eugeniaperez.es
AJAX
eugeniaperez.es
jQuery
AJAX implica conexión cliente servidor sin necesidad de recargar la página del navegador.
AJAX
eugeniaperez.es
AJAX
eugeniaperez.es
Todo el mundo...¿q
AJAX
eugeniaperez.es
JQuery AJAX
jQuery proporciona un envolotorio sobre JavaScript para realizar llamadas AJAX al servidor de una manera más comprensible y elegante.
El método principal es $.ajax(), aunque también existen varios shortcuts, siendo los más utilizados $.get() y $.post()
La función $.ajax() puede ser utilizada con gran cantidad de parámetros: http://api.jquery.com/jquery.ajax/
eugeniaperez.es
JQuery AJAX
eugeniaperez.es
$.ajax({
type:“POST”,
url:“some.php”,
data:{ name:“Òscar”, location:“Pamplona”}
}).done(function(msg){
alert(“Data Saved: “+msg);
});
Se envía una petición de tipo POST a la URL some.php pasándole el objeto JSON asociado a data. Cuando se produzca la respuesta del servidor, se mostrará en un alert la respuesta
$.post('some.php', { name:"Òscar", location:"Pamplona"}, function(msg){
alert(“Data Saved: “+msg);
});
JQuery AJAX
eugeniaperez.es
$.ajax({
url: '/ruta/pagina.php',
type: 'POST',
data: 'parametro1=valor1&metro2=valor2',
success: procesaRespuesta,
error: muestraError
});
Además de la función $.ajax() genérica, existen varias funciones relacionadas que son versiones simplificadas y especializadas de esa función.
Las funciones $.get() y $.post() se utilizan para realizar de forma sencilla peticiones GET y POST
JQuery AJAX
JQuery AJAX
Crea un proyecto, donde importes:
<script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
$.ajax({
type: "POST",
url: "some.php",
data: {name: "Òscar", location: "Pamplona"}
}).done(function (msg) {
alert("Data Saved: " + msg);
});
</script>
JQuery AJAX
Probamos que realmente no se recarga:
<h1>No recargo la página</h1>
<script>
$.ajax({
type: "POST",
url: "some.php",
data: {name: "Òscar", location: "Pamplona"}
}).done(function (msg) {
$("body").append("Data Saved: " + msg);
});
</script>
JQuery AJAX
También podemos utilizar otras funciones de callback:
$.ajax({
type: "POST",
url: "some.php",
data: {name: "Òscar", location: "Pamplona"}
}).done(function (msg) {
$("body").append("Data Saved: " + msg);
}).fail(function () {
$("body").append("Error!");
}).always(function () {
$("body").append("<br />Siempre se escribe esto");
});
JQuery AJAX
eugeniaperez.es
Como hacemos llamadas al servidor (código PHP) deben estar en un servidor de aplicaciones: C:\xampp\htdocs
JQuery AJAX
eugeniaperez.es
EJEMPLO CON GET
El cliente llama a un servicio PHP a través de una llamada AJAX por GET. El servidor contesta enviando texto plano
https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut2.ajax.get.git
JQuery AJAX
eugeniaperez.es
EJEMPLO CON POST
De manera similar al anterior pero enviando una llamada por POST. Se envían parámetros en formato JSON y se obtiene una respuesta en texto plano
https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut2.ajax.post.git
JQuery AJAX
eugeniaperez.es
var helloDAM1 = function() {
$.get("get-ajax1.php",
function(data) {
//$("body").html(data);
$("body").append(data);
}
);
};
Petición de una página php e interpretación de la respuesta.
<?php
echo "<h1>Hola 2º DAM!</h1>";
?>
JQuery AJAX
eugeniaperez.es
//Método2: AJAX por POST con $.post
$(document).ready(function () {
$("button").click(function () {
$.post("post-ajax.php",
{
name: "Óscar",
location: "Pamplona"
},
function (data, status) {
alert("Data: " + data +
"\nWe can receive the status as well: " + status);
});
});
});
Envió de información en JSON e interpretación de la respuesta.
<?php
if (isset($_POST['name']) && isset($_POST['location'])) {
echo "- Hola 2 DAM: Soy " . $_POST['name'] . " de "
. $_POST['location'];
echo "\n Información enviada por AJAX mediante un GET";
}
?>
JQuery AJAX
eugeniaperez.es
TIPOS DE RESPUESTA
Las llamadas AJAX, al igual que un formulario, envían y reciben información de un servidor. Este puede contestar en varios formatos (texto plano, HTML, XML, JSON, etc)
Hoy en día el formato JSON es el más utilizado
JQuery AJAX
eugeniaperez.es
JSON
Es más compacto que XML, por lo que se necesita retransmitir menos información a través de la red. En XML todos los elementos constan de etiquetas de apertura y cierre
person = {
"age" : 20,
"name" : "Samuel"
}
<person>
<age>20</age>
<name>Samuel</name>
</person>
JSON
XML
JQuery AJAX
eugeniaperez.es
JSON
El parseo desde JavaScript es directo. En XML "no tanto"
var person = {
"age" : 20,
"name" : "Samuel"
}
person.age; // 20
person.name; // Samuel
var person = $.parseXML("<person><age>20</age><name>Samuel</name></person>");
person.getElementsByTagName("person")[0].getElementsByTagName("age")[0].innerHTML // 20
JQuery AJAX
eugeniaperez.es
JQuery AJAX
eugeniaperez.es
La mayoría de las APIs hoy en día soportan JSON
La gran mayoría de servicios de Internet tienen disponible API REST
Suelen requerir autenticación
JQuery AJAX
eugeniaperez.es
Vamos a consultar la API de Spotify, para obtener información de los artistas, y también de sus álbumes.
JQuery AJAX
eugeniaperez.es
Web API Base URL: https://api.spotify.com
Endpoint
JQuery AJAX
eugeniaperez.es
Spotify: https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut3.ajax.apispotify.git
Github: https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut3.ajax.apigithub.git
JQuery AJAX
eugeniaperez.es
https://api.spotify.com/v1/search?type=artist&q=nombre_artista
https://api.spotify.com/v1/search?type=track&q=nombre_cancion
JQuery AJAX
eugeniaperez.es
Por ejemplo, vamos a consultar información de Github a través de su API:
JQuery AJAX
eugeniaperez.es
No requiere autenticación para consumir algunos de sus servicios
JQuery AJAX
eugeniaperez.es
{
"login": "PresidentObama",
"id": 10196880,
"avatar_url": "https://avatars.githubusercontent.com/u/10196880?v=3",
"gravatar_id": "",
"url": "https://api.github.com/users/PresidentObama",
"html_url": "https://github.com/PresidentObama",
"followers_url": "https://api.github.com/users/PresidentObama/followers",
"following_url": "https://api.github.com/users/PresidentObama/following{/other_user}",
"gists_url": "https://api.github.com/users/PresidentObama/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PresidentObama/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PresidentObama/subscriptions",
"organizations_url": "https://api.github.com/users/PresidentObama/orgs",
"repos_url": "https://api.github.com/users/PresidentObama/repos",
"events_url": "https://api.github.com/users/PresidentObama/events{/privacy}",
"received_events_url": "https://api.github.com/users/PresidentObama/received_events",
"type": "User",
"site_admin": false,
"name": "Barack Obama",
"company": "America Bald Eagle Foundation",
"blog": "http://whitehouse.gov",
"location": "'Murica",
"email": null,
"hireable": null,
"bio": null,
"public_repos": 6,
"public_gists": 0,
"followers": 148,
"following": 144,
"created_at": "2014-12-15T15:04:27Z",
"updated_at": "2015-09-05T18:02:41Z"
}
JQuery AJAX
eugeniaperez.es
Realizaremos 2 consultas:
GET /repos/:owner/:repo/issues
JQuery AJAX
eugeniaperez.es
Realizaremos 2 consultas:
https://api.github.com/repos/jquery/jquery/issues
JQuery AJAX
eugeniaperez.es
Descargar proyecto en:
https://eugenia_perez@bitbucket.org/eugenia_perez/dw.ut3.ajax.apigithub.git
JQuery AJAX
Incluye una caja de texto para poder buscar información acerca de una canción. La llamada a la API la puedes encontrar aquí:
https://developer.spotify.com/web-api/search-item/
Es muy parecido a lo realizado con el artista, pero ahora deberás indicar que el tipo de la búsqueda es un track. Por ejemplo, para la canción “Thriller”:
https://api.spotify.com/v1/search?q=thriller&type=track
Muestra la información que te parezca más relevante.