Bienvenidos sean a este post, hoy veremos varios temas.
$.ajax()
Esta funcion es la verdadera encargada de ejecutar todas las acciones de Ajax, ya que todas las funciones que vimos en posts anteriores solo enmascaran los llamados a esta y este se encarga de ejecutarlos facilitando nuestra tarea pero algunas veces necesitaremos mas control sobre los llamados de Ajax, por ejjemplo tomemos esta linea:
$('#diccionario').load('p.html');Esta linea se encarga de cargar el contenido de p.html en el div diccionario, su version con la funcion ajax seria la siguiente:
$.ajax({
url: 'p.html',
success: function(datos) {
$('#diccionario').html(datos);
}
});Observen que hara exactamente lo mismo, primero pasaremos el archivo a trabajar en la propiedad url, la siguiente evalua si la carga es exitosa, en caso de ser asi a traves de una funcion anomina recibiremos todos los datos y lo pasaremos al div a traves de html, estos son solo alguno de los disponibles dando una gran flexibilidad a la hora de usarlo, pero a su vez disponemos de algunas caracteristicas:
- Podemos evitar que el navegador tome respuestas cacheadas del servidor, especialmente si usamos datos dinamicos
- Suprime a los manejadores globales que se inician usualmnente con todas las interacciones de Ajax
- Podemos proveer un usuario y contraseña para conectarnos con equipos remotos
Con esto comentado podemos pasar a ver el siguiente tema.
$.ajaxSetup()
Esta funcion nos permite establecer valores predeterminados para cada una de las opciones usadas cuando las funciones Ajax son llamadas, mediante este podemos establecer los valores que usaremos en las llamadas siguientes a estas, salvo que las anulemos con valores nuevos, para entenderlo vamos a tomar el caso anterior:
$.ajaxSetup({
url: 'p.html',
type: 'POST',
dataType: 'html'
});
$.ajax({
type: 'GET',
success: function(datos) {
$('#diccionario').html(datos);
}
});Observen como a traves de ajaxSetup establecimos la url o pagina que usaremos, despues la forma de subir o conseguir los datos y por ultimo el tipo de dato, si tomamos el ajax que vimos en el ejemplo anterior ya no necesitamos el dato de la url porque lo establecimos anteriormente, pero si despues cambiamos la forma de subir o recuperar la informacion, y seguimos con la misma funcion que hablamos anteriormente, para el siguiente tema debemos trabajar con el ejemplo que vimos en el post anterior pero necesitaremos de un servidor web, en caso de no tener alguno les recomiendo primero visitar el siguiente post:
Donde les comento como crear un pc virtual y luego como instalar un linux debian, tengan en cuenta que con solo 1 GB de RAM se evitan tener conflictos en la pc por instalar mas cosas y cuando no lo necesiten mas simplemente lo borran, una vez hecho esto pasen al siguiente post:
Aqui les comento como instalar un Apache y PHP para poder ejecutar el ejemplo y de forma opcional pueden instalar mariadb pero no es necesario, con todo esto simplemente descarguen el siguiente archivo:
Extraigan los archivos y agreguenlos en el servidor para poder utilizarlos, con todo esto realizado vamos a crear un nuevo archivo con el nombre a.html y le agregaremos el siguiente codigo:
a.html
<html>
<head>
<title>Yog-sotheria</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
</head>
<body>
<div id="contenedor">
<div id="header">
<h2>Yog-sotheria</h2>
<div class="autor">por H.P. Lovecraft</div>
</div>
<div id="diccionario">
<div class="entrada">
<div class="nombre">Bast</div>
<div class="resumen">
Bast inicialmente fue adorada en la Atlántida, pero su culto era tan importante que acabó extendiéndose a Egipto. Allí fue una de las diosas más populares, e incluso contó con una ciudad dedicada a ella, Bubastis. La importancia de Bast se debió sobre todo a que, además de una deidad felina, también estaba asociada a la sexualidad y el erotismo.
</div>
</div>
<div class="entrada">
<div class="nombre">Hipnos</div>
<div class="resumen">
Dios del Sueño, Señor del Sueño, Hijo de la Noche. Hermano de Thanatos, la Muerte. Es representado como un joven somnoliento con alas en los hombros y/o en las sienes, frecuentemente lleva el cabello engalanado con amapolas, las flores del sueño. Hay quien dice que Hypnos posee asimismo una forma original más horrible que la más temible que las pesadillas.
</div>
</div>
<div class="entrada">
<div class="nombre">Nodens</div>
<div class="resumen">
Señor del Gran Abismo, El Venerable. Toma la apariencia de un ser humano masculino, con barba, montado en una concha marina tirada por varias bestias legendarias. A veces también se le describe con una barba de tentáculos. Otras veces aparece como un hombre de mediana edad, musculoso y de cabello castaño. Su comportamiento es generalmente benévolo con los humanos, pero únicamente actúa de ese modo porque está enemistado con Nyarlathotep y sabe que al proteger a los mortales logrará molestar a su rival.
</div>
</div>
</div>
</div>
</body>
</html>
Esta es una pagina donde tendremos las definiciones de los dioses arquetipicos, la tercera opcion de nuestro menu en indice.html, sera una pagina normal sin nada de jQuery pero su estructura sera similar a las vistas hasta ahora pero si cargaremos al archivo estilo.css para aplicarle los estilos a esta nueva pagina, despues tendremos la entrada dicccionario con tres entradas, ahora podemos pasar al archivo codigo.js donde modificaremos el siguiente bloque de codigo:
$(document).ready(function() {
$('#arquetipicos a').click(function(evento) {
evento.preventDefault();
$.get('a.xml', function(datos) {
$('#diccionario').empty();
$(datos).find('entrada').each(function() {
var $ent = $(this);
var html = '<div class="entrada">';
html += '<h3 class="nombre">' + $ent.attr('nombre');
html += '</h3>';
html += '<div class="resumen">';
html += $ent.find('resumen').text();
html += '</div>';
html += '</div>';
$('#diccionario').append(html);
});
});
});
});De la siguiente manera:
$(document).ready(function() {
$('#arquetipicos a').click(function(evento) {
evento.preventDefault();
$('#diccionario').load('a.html');
});
});Aqui seguimos aplicando el evento click y por medio de preventDefault seguimos evitando su conducta normal, y en lugar de cargar el xml le decimos que cargue el archivo antes creado, si lo probamos funcionara de la siguiente manera
Aqui en el video podemos ver como se cargo toda la pagina que le indicamos con titulo y todo pero nosotros podemos especificar que se debe cargar, para ello tomemos el codigo anterior y hagamos la siguiente modificacion:
$(document).ready(function() {
$('#arquetipicos a').click(function(evento) {
evento.preventDefault();
$('#diccionario').load('a.html .entrada');
});
});La modificacion fue muy simple, solamente agregamos la clase que deseamos mostrar y con eso solo obviaremos el titulo de la pagina, si lo prueban debera verse de la siguiente manera:
Esta es otra forma practica de cargar datos y permitirnos filtrar para mostrar solo lo necesario, con esto comentado les dejo los archivos del proyecto y los codigos finales en este post:
En resumen, hoy hemos visto algunas opciones mas disponibles, de forma basica como usar directamente al metodo ajax, asi como a ajaxSetup para establecer valores predeterminados, asi como un ejemplo para ver como filtrar la carga de los datos de una pagina html,, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 