Creative Commons 3.0 RSS CSS 2.1 XHTML 1.0
Login  
Registro
 
Escrito por Yosi_ el miércoles, 16 de abril de 2008

Esto, siguiendo la línea general de este blog, no pretende ser un artículo que trate profundamente la tecnología AJAX, ni que aborde los pormenores y características más remotas de la misma. En este caso el objetivo es proponer de la forma más clara y detallada posible una forma de implementación de AJAX empleando la librería jQuery y manejando las respuestas en formato JSON, a mi juicio el más conciso de cara al uso general.


1. ¿Qué es AJAX?


En primer lugar deberíamos partir haciendo una descripción de en que consiste concretamente el manido acrónimo omnipresente en la web actual. Posiblemente el artículo de Wikipedia de una explicación más correcta e inteligible de lo que yo pueda decir, pero resumiendo digamos que se trata de una tecnología basada en JavaScript que permite establecer conexiones con un servidor, enviando y recibiendo datos que dan la posibilidad de realizar operaciones en una base de datos y cambiar el contenido de parte de una web sin necesidad de recargar la página, de forma totalmente transparente para el usuario.

La principal ventaja de este sistema es que da una sensación de agilidad e inmediatez (el tiempo para realizar una misma operación cargando toda la página o mediante una petición AJAX varía considerablemente) que rompe de forma notable con el formato tradicional de la web, donde cada acción correspondía necesariamente a una carga completa de página, ofreciendo una experiencia de usuario novedosa que introduce posibilidades realmente útiles. El uso de dicha técnica ya está ampliamente implantado en la web 2.0, como se puede observar al enviar un comentario en cualquier blog actual, al utilizar gestores de correo como Gmail, Google Maps, varios servicios de Flickr... Y lo mejor de todo es que es realmente fácil de integrar en cualquier web, ya que en muchas ocasiones incluso simplifica las tareas llevadas a cabo de la forma tradicional.

2. Sintaxis de AJAX con jQuery


Como ya he señalado en alguna otra ocasión, jQuery es una librería JavaScript muy ligera (apenas 15kb comprimida) que ofrece una enorme variedad de funcionalidades, entre las que se cuenta proporcionar una cómoda plataforma para utilizar AJAX de forma fiable y sencilla. En la documentación oficial se da una explicación muy detallada de todos y cada uno de los parámetros que se pueden configurar, pero en este caso vamos a ir a lo práctico, empleando la configuración por defecto (válida para la mayor parte de las ocasiones), trabajando únicamente sobre la plantilla que reproduzco a continuación:

function Plantilla(){
    valor1=10;
    valor2=5;
    $.post(
        "http://www.dominio.com/ruta/al/archivo.php",
        {variable1:valor1,variable2:valor2},
        function FuncionRecepcion(respuesta) {
            // contenido para procesar la respuesta
        }

    );
}


Como vemos en el fragmento anterior, "Plantilla" sería el nombre de la función JavaScript (asignado arbitrariamente por nosotros) a la que habría que llamar, y que en este caso se ocupa exclusivamente de hacer la petición AJAX contenida en $.post(), una función de la librería jQuery que se ocupa de realizar la conexión con el servidor y gestionar el envío y la recepción de datos. Los argumentos que requiere la función post son:
  1. La parte remarcada en azul corresponde a la dirección en la que se encuentra el archivo que deseamos que reciba la petición, en el ejemplo "http://www.dominio.com/ruta/al/archivo.php". Para evitar problemas innecesarios es conveniente utilizar rutas absolutas (como la descrita) en lugar de relativas. Posteriormente explicaré las características del archivo (en este caso PHP) que se debe emplear para recibir la petición.

  2. El segundo argumento, resaltado en rojo, es una lista de las variables que queremos enviar, estructurada en formato JSON (del que hablaremos luego, pero es tan fácil como repetir el modelo marcado para cuantas variables se desee).

  3. En último lugar, marcado en verde, debemos definir de forma un tanto peculiar una función que sera la encargada de recibir los datos enviados por el servidor ("respuesta") y a partir de ellos hacer las operaciones que sean necesarias. Tanto la definición como el contenido de dicha función ha de colocarse en el interior de la llamada a $.post, como si de un argumento típico se tratase.


3. Atendiendo la petición con PHP y generando la respuesta JSON


Una vez llegados aquí, se supone que habremos realizado la petición AJAX desde JavaScript, se habrán enviado las variables necesarias al servidor, y el navegador estará esperando una respuesta. El archivo PHP que habíamos concretado en la ruta de la función $.post será el encargado de asignar el contenido de las variables antes mencionadas y realizar las operaciones internas oportunas para generar los datos que el cliente espera. La complejidad de este PHP podrá ser variable en función de las gestiones que necesitemos realizar, pero en este caso me parece superfluo perderme en cuestiones al margen de la estructura básica, así que me limitaré a mostrar una transacción de datos bastante inútil pero ilustrativa para el fin que perseguimos:

<?php

include('./JSON.php');

$var1 = $_POST['variable1']; 
$var2 = $_POST['variable2'];

$suma = $var1+$var2;
$diferencia = $var1-$var2;

$json = new Services_JSON();
$returnArray = Array(suma=>$suma,diferencia=>$diferencia);
$myjson = $json->encode($returnArray);
echo $myjson;

?>

En primer lugar nos fijaremos en la asignacion de las variables $var1 y $var2 desde los valores que habíamos pasado mediante el método POST desde el JavaScript original. El proceso es exactamente igual para cuantas variables deseemos, solamente variando el nombre de las mismas.
Posteriormente se realizan las operaciones triviales para obtener la suma y la diferencia de ambas variables (en este punto se podrían hacer consultas a una base de datos para insertar o extraer valores, algo evidentemente mucho más práctico en un caso real), y finalmente instanciaremos la clase de la librería JSON.php que hemos incluido en la primera línea del archivo.

Creo que en este punto ha llegado el momento de comentar que JSON (JavaScript Object Notation) es un formato para intercambio de datos ligero e intuitivo que en este caso estamos utilizando para estructurar la respuesta AJAX. Esto podría hacerse también mediante XML (como de hecho se planteó originalmente, la última sigla de AJAX corresponde a "XML") o sencillamente mediante texto plano, pero en el primer caso tendríamos la desventaja de tener que manejar un código como XML, mucho mas pesado y complejo a la hora de ser interpretado por JavaScript, y en el segundo nos veríamos limitados a devolver un único paquete de datos que no tendríamos forma de separar en varios valores en el caso de que necesitásemos dar una respuesta múltiple (lo cual es bastante común).

Por lo tanto emplearemos el formato JSON, del que se puede obtener una descripción completa en wikipedia. Sin embargo para el uso que le vamos a dar no será necesario siquiera conocer la estructura, ya que sera la librería PHP antes mencionada la que, a partir de un array asociativo en PHP convencional ($returnArray), se ocupe de darle formato y transformarlo en una estructura JSON válida mediante el método encode() de la clase $json instanciada en el código mostrado anteriormente. Finalmente solo queda enviar la variable resultante ($myjson) para que sea recibida en el navegador.

Es importante tener en cuenta que dentro del archivo PHP, cualquier comando que generalmente sirve para sacar un valor por pantalla (echo, printf), en este caso lo que hace es añadir dicho valor a la cadena de texto que se va a retornar. Por tanto, ya que queremos devolver una cadena en un formato concreto, deberemos evitar mostrar cualquier dato salvo en la última línea, donde se envía la respuesta correctamente formateada. Cualquier texto antes o después convertiría la respuesta en un texto plano y estropearía la estructura JSON que hemos creado.


4. Recepción de la respuesta en JavaScript


En este último paso tendremos que recibir e interpretar la respuesta desde la función JavaScript definida al principio:

function Plantilla(){
    valor1=10;
    valor2=5;
    $.post(
        "http://www.dominio.com/ruta/al/archivo.php",
        {variable1:valor1,variable2:valor2},
        function FuncionRecepcion(respuesta) {
            arrayRespuesta=eval('(' + respuesta + ')');
            alert('Suma: '+ arrayRespuesta["suma"]);
            alert('Diferencia: '+ arrayRespuesta["diferencia"]);
        }

    );
}


Como se puede observar todo es exactamente igual, salvo porque la función "FuncionRecepcion()" responsable de procesar la respuesta ha sido completada para cumplir con su cometido. Lo que hemos hecho en la primera línea es interpretar la cadena de texto en formato JSON y transformarla en un array asociativo que contendrá las variables generadas en el PHP.

Una vez hecho esto se podrían colocar los valores en cualquier lugar de la página para ser integrados en el HTML original de forma que el usuario vea la actualización de una parte del contenido sin ser consciente de todo el proceso que se ha llevado a cabo de forma totalmente transparente. En este caso, dado que en el ejemplo no hemos incluido ningún fragmento de HTML para simplificar las cosas, nos conformaremos con mostrar el resultado mediante popups de JavaScript.
26 Comentarios Temas relacionados: JavaScript  Web  PHP 

Enviado por kmilo el viernes, 6 de junio de 2008

Saludos.
que buena introduccion al uso de ajax + json, me parece bien par empezar, pero no se... he leido por ahi que el uso de eval() no es muy bueno (solo he leido y no recuerdo donde XD ).

desde eso, en ez de $.get y $.post utilizo $.ajax, que pe permite dar la opcion de decirle a jquery q tipo de dato voy a recivir del servidor, q seria en este caso, json, quedaria algo como asi.

$.ajax({
    url: "urlservidor.php",
    datType: "datos",
    data: "bar=" + foo,

    // recivimos el dato tipo json
    success: function(json){
        // accedemos como si fuese un objeto
        // a los valores
        alert (json.nodo);
    }
});

pero esta bien. me parece bueno para comenzar ;)
Enviado por kmilo el viernes, 6 de junio de 2008

ups.. en vez de:

dataType: "datos"

deberia ser

dataType: "json"

jeje, pequeño descuido.
Enviado por Yosi_ el sábado, 7 de junio de 2008

Pues muchas gracias por la puntualización kmilo, ahí queda eso. Tienes razón, siempre es más correcto especificar el tipo de datos de antemano que hacer la "chapuza" posteriormente.

La verdad es que lo expliqué así siguiendo un poco el proceso según el cual lo aprendí yo mismo, pero teniendo en cuenta la diferencia de complejidad, merece la pena hacerlo de esa forma, que queda bastante más ordenado. Lo dicho, se agradece la colaboración, siempre hay cosas que aprender y entre todos es más fácil.
Enviado por Skirla el jueves, 5 de noviembre de 2009

Hola, otra cosa que se puede hacer es utilizar la funcion $.getJSON de jQuery, esta realizada especificamente para trabajar con json.

En este ejemplo su sintaxis seria asi:
url = "http://www.dominio.com/ruta/al/archivo.php";
=10;
=5;

$.getJSON(url, { valor1: "10", valor2: "5" }, function FuncionRecepcion(respuesta) {
alert('Suma: '+ respuesta.suma);
alert('Diferencia: '+ respuesta.diferencia);
});

Saludos.
Enviado por Skirla el jueves, 5 de noviembre de 2009

Perdon se me olvido borrar algunas cosas, esta esta correcta:

url = "http://www.dominio.com/ruta/al/archivo.php";

$.getJSON(url, { valor1: "10", valor2: "5" }, function FuncionRecepcion(respuesta) {
alert('Suma: '+ respuesta.suma);
alert('Diferencia: '+ respuesta.diferencia);
});
Enviado por fvb el lunes, 27 de diciembre de 2010

Enviado por 242 el miércoles, 4 de mayo de 2011

buibuub
Enviado por jonatan el sábado, 16 de julio de 2011

muy buena introduccion! aprendí muchisimo! gracias. Por otro parte, tengo algunas consultas, si implemento la $ajax, como deberia devolver los datos desde el servidor?
Enviado por leader el martes, 13 de noviembre de 2012

Gracias tanto al autor del post como a los comentarios. Gran introducción a JQuery y JSON
Enviado por Freelander PD10 Typh el viernes, 25 de enero de 2013

its a lovely web site ,i would like it , I am glad that you simply shared this helpful information with us. iwill be back soon.
Enviado por louboutin uk el lunes, 18 de febrero de 2013

louboutin uk shoes
Enviado por goophonme i9 el viernes, 29 de marzo de 2013

Yay google is my king assisted me to find this outstanding internet site ! . "Nothing can bring you peace but yourself." by Ralph Waldo Emerson.
Enviado por mcitp el viernes, 12 de abril de 2013

MCITP
Make sure that any course you do find covers MCITP Certification Training curriculum. If you are in doubt, send an

email to the people who run the course and then double-check with the Microsoft certification center. The last thing

you want to do is waste money on a course that will not help you get certified.
70-417
Enviado por iPad Mini Foam Case el jueves, 2 de mayo de 2013

impressive post and wonderful to read it. thank you and do more
Enviado por jbs underwear el martes, 21 de mayo de 2013

Shopping for 2013 New jbs underwear - PandaHope.com
Enviado por jock underwear el martes, 21 de mayo de 2013

Shopping for 2013 New jock underwear - PandaHope.com
Enviado por jockstrap underwear el martes, 21 de mayo de 2013

Shopping for 2013 New jockstrap underwear - PandaHope.com
Enviado por vietnam single el lunes, 24 de junio de 2013

The article is very good.it is good way to market product. this is a good way to use the blogs. thanks for posting.
Enviado por shoes el martes, 25 de junio de 2013

There are many types of cheap sexy womens sandals on the market today that not only look good, they keep your feet happy with good ventilation and foot circulation. Silver Womens Sandals
Enviado por SLA manufacturer el miércoles, 3 de julio de 2013

w 3D and 3E printing have been also used to produce costume elements. By using 3E scanning technique it is possible for costume designers to produce custom-fitted design to look like real image.
Enviado por Normanasasa el lunes, 15 de julio de 2013

Dressed in a black wide leg pants with a white coat, because a round sunglasses witty glasses wiki and significantly younger.
Enviado por www el jueves, 8 de agosto de 2013

Top Replica Handbags 2013
The simpler answer to this simple question is the creation of Louis Vuitton Replica Handbags, a product that has been especially created so that you can reach out to your distant dream.
Enviado por Replica Watches el viernes, 18 de octubre de 2013

Rolex Replica Watches uk, replica Breitling, replica Omega watches ...We has been a watches worldwide business leader in selling swiss Fake Rolex Watches since 2005. we offer the best replica watches from Rolex Replica Watches UK, breitling, omega, ...
Enviado por Naxter el martes, 8 de abril de 2014

Creo que teneis problemas con los spambot, tendriais que añadir un honeypot en los comentarios, es una solucion para no tener que poner un captcha.

Un Saludo.
Enviado por guoguo el miércoles, 3 de septiembre de 2014

Coach Outlet Online For Mr. Obama, the trip is a chance to show Europeans that heCoach Outlet is dedicated to NATO at a time when Russia is challengingCoach Factory Outlet the postwar European order, built on theCoach Outlet Online principle of no border changes by force.Coach Factory Outlet The tension you’re seeing between Russia and the WestCoach Outlet Store Online is going to be put on display in Wales, and the presidentCoach Outlet Store Online is going to be leading that effort,” said Ivo H. DaalderCoach Factory Outlet the previous American ambassador to NATO and now head of theCoach Outlet Chicago Council on Global Affairs. Mr. Obama, he saidCoach Handbags Outlet wants to reaffirm the unity and strength of the alliance.Coach Outlet NATO leaders are trying this week to reassure allies that theCoach Outlet commitment to collective defense, in NATO’s Article 5, is solid.Chanel Outlet Online The alliance wants to show that it means what it says and will haveLouis Vuitton the capability to defend its most vulnerable members against RussianLouis Vuitton Outlet aggression, whether overt or more covert, or a hybrid, of the two, as in Ukraine.Gucci Belts The really ironic aspect here is that a re-energizedGucci Belt restrengthened NATO is Vladimir Putin’s worst nightmareCoach Outlet Online and yet it’s his tactical actions that have done just thatCoach Outlet said James G. Stavridis, who was NATO’s commander from 2009Coach Factory Outlet to 2013 and is dean of the Fletcher School at TuftsCoach Outlet Online University, referring to Russia’s president.Coach Outlet Store It is also an opportunity for Mr. Obama, buffeted by a cascadeCoach Outlet Store Online of international crises, to rally Europeans into whatCoach Outlet Secretary of State John Kerry has called a “global coalitionCoach Factory Online to confront an increased terrorist threat from the IslamicCoach Factory Outlet State in Iraq and Syria and other radical Islamist groups in Africa.Coach Factory Outlet Though ISIS is not on the formal agenda for the summit meetingCoach Outlet Mr. Kerry and Defense Secretary Chuck Hagel will meet EuropeanCoach Outlet Store Online counterparts to develop a strategy to counter ISIS.Chanel Outlet Online But the emphasis will be on Russia. As both American and EuropeanLouis Vuitton Outlet leaders weigh additional sanctions against Moscow,Louis Vuitton Handbags Anders Fogh Rasmussen, the NATO secretary general, said MondayGucci Belt in Brussels that the new rapid reaction force “willGucci Belts ensure that we have the right forces and the rightLouis Vuitton Outlet Online equipment in the right place, at the right time.Oakley Sunglasses Outlet Numerous leaders of NATO countries have said that any hopeLouis Vuitton Outlet Online of achieving the “strategic partnership” with Russia envisionedOakley Sunglasses Outlet as long ago as the 1990 NATO summit was finished because of RussiaCheap Oakley Sunglasses s annexation of Crimea and invasion of eastern Ukraine.Oakley Sunglasses Nevertheless, NATO is being careful not to violate the NATO-Russia

Escribe tu comentario:

Nombre:
Web personal (opcional):