Sé que quizás existan miles de tutoriales, manuales para principiantes y mucha documentación sobre el tema del jquery, ajax y ambos inclusive... En todo caso lo que quiero es mostrar un poco y de la forma más sencilla como pueden usar esta herramienta que "saca las patas del barro" (venezolanismo para indicar que algo puede ser muy útil en un momento oportuno). Primero voy a explicar sin mucho tecnicismo y a mi manera como estoy acostumbrado, de que trata esto del jquery y el ajax. Es conveniente que sepas algo de HTML y javascript para entender este artículo. Sino aprende y vuelve.
jquery
Es un framework de trabajo, plataforma, plugin, addon, o como quieras llamarle (aunque el correcto es framework), basado y programado en lenguaje javascript, ese lenguaje que está inmerso en el HTML (páginas web) para realizar cosas asombrosas. La realidad es que un sitio web que no tenga javascript por algún lado ya está obsoleto y seguramente no está condicionado para las nuevas tendencias visuales y de funcionalidad. El propósito básicamente de usar jquery "en vez" de javascript, y coloco "en vez" entre comillas porque jquery = javascript, es facilitar la programación y unificar las diferencias que puedan existir en la forma que los navegadores interpretan el javascript plano, en otras palabras ahorrar tiempo, de hecho su lema es Write less, do more (Escribe menos, haz mas).
Existen varios frameworks poderosos similares, como el mootools y yum, pero yo empecé trabajando con jquery y no me ha ido mal, además que la cantidad de documentos y addons derivados que existen sobre él abundan en la web.
Instalación y uso del jquery
El jquery gracias a sus creadores es un simple archivo, de formato .js, que puedes colocar en tu sitio.
Ha sido mejorado con el paso de los tiempos en versiones que puedes descargar en su página oficial http://jquery.com/.
La instalación no es más que agregar la línea de código:
<script src="jquery.js"></script>
(Generalmente en la sección <head> pero esto no es obligatorio). Otra forma de agregarlo sería desde la web de google code, y siempre vas a tener la última versión.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Quizás esto pueda causarte problemas si combinas jquery para hacer función de otro framework. Así que te recomiendo la primera forma.
Para usar el jquery puedes empezar por la función ready que es cuando finaliza la carga de la página, de la siguiente forma
<script> $(document).ready( function(){ alert('el jquery funciona') });</script>
fíjense que se usa el símbolo $ luego entre paréntesis el objeto a manipular, en este caso document, que es una palabra o variable reservada para el script que indica el objeto página como tal, luego viene el método ready y dentro de él viene una función que es donde se pudieran inicializar condiciones, variables, otras funciones de la página, etc.
Podemos probar con una suerte de ejemplo "Hola mundo" con un botón, un div y un input al cual le cambiaremos el valor. Estudien el ejemplo:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">Esto es un div común y silvestre</div>
<input type="text" id="input1" value="Esto es un input corriente"/>
<button onclick="holamundo();" >Hola</button>
</body>
<script>
function holamundo(){
$('#div1').html('Hola mundo');
$('#input1').val('Hola mundo')
alert('Hola mundo, usted ha cambiado con jquery los valores de un input y de un div');
}
</script>
</html>
En el ejemplo anterior, lo que hacemos es decirle al botón que al presionarlo (onclick) ejecute la función holamundo, esta función realiza 3 actividades, primero cambia el html interno del div1 por "Hola mundo", luego cambia el contenido de la caja de texto por "Hola mundo" también y luego muestra un simple alerta. Ahora bien, fíjense que a diferencia de $(document) el div y el input son referenciados con $('#div1') y $('#input1') respectivamente, eso es hacerles referencia con el ID del elemento, hay que colocar entre comillas simples o dobles, un numeral (#) y el nombre del elemento. Luego vemos que para el DIV usamos el método .html() y para el input usamos el método .val(); esto es porque el div es un contenedor y el input un control que manipula valores (values).
Ha sido muy sencillo eso verdad ?, cuando empiece a explicar con Ajax se complica un poco las cuestión pero no te asustes todavía. La cantidad de funciones y operaciones que se pueden realizar con jquery son inmensas, pero con asignar valores y operaciones sencillas se le va agarrando confianza al framework.
Ajax
Bien, entramos en ese monstruo llamado Ajax, muy usado en las tendencias actuales para cargar contenido. Y bien, pero que es Ajax?, pues es una técnica de programación en sí, es un acrónimo de Asynchronous JavaScript and XML y permite cargar contenido de forma asíncrona en una web.
Te preguntaras que es esto de síncrono, asíncrono, y como se come. Bueno en términos gruesos una operación síncrona es una petición cliente-servidor, que al momento de ser ejecutada el cliente debe esperar la respuesta del servidor para continuar las operaciones. un ejemplo claro es un formulario de contacto, de esos que cuando le das enviar después de colocar los datos, la página se tarda unos segundos (o minutos) en actualizar y te da una respuesta. O Cuando abres una página nueva en el navegador es de por si una operación síncrona, es decir viene de sincronía, tiempo continuo, simultaneidad.
Una operación asíncrona, a diferencia de su antónima permite en "destiempos" realizar operaciones y mientras el cliente espera la respuesta del servidor la página no pierde "sincronía" puedes seguir trabajando en ella. Cualquier aplicación web actual utiliza este método, por ejemplo cuando agregas un comentario o publicas un status en tu red social, la página mientras agrega ese comentario, puedes seguir navegando y usando la página y quizás realizando otras operaciones que ejecuten más eventos asíncronos. Digamos que son peticiones cliente-servidor de segundo plano.
Ajax+jquery
Ahora, como entra aquí nuestro ahora querido amigo jquery ? pues bien, dado que Ajax es una técnica de programación en sí, usando javascript, y jquery es un framework para facilitar codificación en javascript, no podían estar separados. jquery permite realizar las operaciones de Ajax muy sencillas y crossbrowser, es decir, el mismo código para los distintos navegadores. En el siguiente ejemplo voy a mostrar un código sencillo para cargar contenido de una operación Ajax.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">Esto es un div común y silvestre</div>
<button onclick="operacionAjax();" >Hola</button>
</body>
<script>
function operacionAjax(){
$('#div1').html('<p>Cargando</p><img src="ajax-loader.gif" />');
$.ajax({
cache: false,
type: 'post',
url: 'proceso.php',
data:{
variable1:'Hola',
variable2:'Mundo'
},
success: function(response) {
$('#div1').html(response);
}
});
}
</script>
</html>
Fíjense bien que el botón Hola ahora llama a la función operacionAjax(), que realiza 3 actividades, la primera es cambiar el contenido del div1 a una imagen gif de loading (puedes conseguir varios aquí www.ajaxload.info/), la segunda es la petición de ajax como tal, o sea una petición cliente servidor asíncrona, de tipo post, a la url proceso.php con 2 variables (variable1 y variable2) con sus respectivos valores ("Hola" y "Mundo"), y la tercera actividad (success) es la respuesta de dicha solicitud, que como es asíncrona, será aplicada cuando el servidor responda, y se cambiara el contenido del div1 por lo que trae la variable response.
la url proceso.php va a ser el postsrcipting del servidor, y puede ser en este ejemplo algo como
<?php
$var1 = $_POST['variable1'];
$var2 = $_POST['variable2'];
echo $var1.' '.$var2;
?>
lo que quiere decir que procesará la petición leyendo las dos variables de tipo POST enviadas por el Ajax y las concatenara como respuesta. cuando el servidor ejecute esas sentencias sucederá el evento "success" del Ajax y la variable response contendrá lo escrito por el echo del php "Hola Mundo" contenido en las variables previamente mencionadas.
Bueno queridos lectores hasta aquí dejo la lección, espero que les hayan sido útil estos sencillísimos pasos para usar el ajax de jquery. De todos modos deben seguir documentándose sobre el tema, bajar tutoriales y archivos con ejemplo.
Cualquier duda sobre los ejemplos o el tema en si pueden escribirme a mi correo juanpgarciac@gmail.com, mi twitter @juanpgarciac o en ask.fm http://ask.fm/juanpgarciac Gracias por su atención, no olviden comentar!
Contacto:
www.juanpgarciac.com
juanpgarciac@gmail.com
@juanpgarciac
@solucionesTech
jquery
Es un framework de trabajo, plataforma, plugin, addon, o como quieras llamarle (aunque el correcto es framework), basado y programado en lenguaje javascript, ese lenguaje que está inmerso en el HTML (páginas web) para realizar cosas asombrosas. La realidad es que un sitio web que no tenga javascript por algún lado ya está obsoleto y seguramente no está condicionado para las nuevas tendencias visuales y de funcionalidad. El propósito básicamente de usar jquery "en vez" de javascript, y coloco "en vez" entre comillas porque jquery = javascript, es facilitar la programación y unificar las diferencias que puedan existir en la forma que los navegadores interpretan el javascript plano, en otras palabras ahorrar tiempo, de hecho su lema es Write less, do more (Escribe menos, haz mas).
Existen varios frameworks poderosos similares, como el mootools y yum, pero yo empecé trabajando con jquery y no me ha ido mal, además que la cantidad de documentos y addons derivados que existen sobre él abundan en la web.
Instalación y uso del jquery
El jquery gracias a sus creadores es un simple archivo, de formato .js, que puedes colocar en tu sitio.
Ha sido mejorado con el paso de los tiempos en versiones que puedes descargar en su página oficial http://jquery.com/.
La instalación no es más que agregar la línea de código:
<script src="jquery.js"></script>
(Generalmente en la sección <head> pero esto no es obligatorio). Otra forma de agregarlo sería desde la web de google code, y siempre vas a tener la última versión.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Quizás esto pueda causarte problemas si combinas jquery para hacer función de otro framework. Así que te recomiendo la primera forma.
Para usar el jquery puedes empezar por la función ready que es cuando finaliza la carga de la página, de la siguiente forma
<script> $(document).ready( function(){ alert('el jquery funciona') });</script>
fíjense que se usa el símbolo $ luego entre paréntesis el objeto a manipular, en este caso document, que es una palabra o variable reservada para el script que indica el objeto página como tal, luego viene el método ready y dentro de él viene una función que es donde se pudieran inicializar condiciones, variables, otras funciones de la página, etc.
Podemos probar con una suerte de ejemplo "Hola mundo" con un botón, un div y un input al cual le cambiaremos el valor. Estudien el ejemplo:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">Esto es un div común y silvestre</div>
<input type="text" id="input1" value="Esto es un input corriente"/>
<button onclick="holamundo();" >Hola</button>
</body>
<script>
function holamundo(){
$('#div1').html('Hola mundo');
$('#input1').val('Hola mundo')
alert('Hola mundo, usted ha cambiado con jquery los valores de un input y de un div');
}
</script>
</html>
En el ejemplo anterior, lo que hacemos es decirle al botón que al presionarlo (onclick) ejecute la función holamundo, esta función realiza 3 actividades, primero cambia el html interno del div1 por "Hola mundo", luego cambia el contenido de la caja de texto por "Hola mundo" también y luego muestra un simple alerta. Ahora bien, fíjense que a diferencia de $(document) el div y el input son referenciados con $('#div1') y $('#input1') respectivamente, eso es hacerles referencia con el ID del elemento, hay que colocar entre comillas simples o dobles, un numeral (#) y el nombre del elemento. Luego vemos que para el DIV usamos el método .html() y para el input usamos el método .val(); esto es porque el div es un contenedor y el input un control que manipula valores (values).
Ha sido muy sencillo eso verdad ?, cuando empiece a explicar con Ajax se complica un poco las cuestión pero no te asustes todavía. La cantidad de funciones y operaciones que se pueden realizar con jquery son inmensas, pero con asignar valores y operaciones sencillas se le va agarrando confianza al framework.
Ajax
Bien, entramos en ese monstruo llamado Ajax, muy usado en las tendencias actuales para cargar contenido. Y bien, pero que es Ajax?, pues es una técnica de programación en sí, es un acrónimo de Asynchronous JavaScript and XML y permite cargar contenido de forma asíncrona en una web.
Te preguntaras que es esto de síncrono, asíncrono, y como se come. Bueno en términos gruesos una operación síncrona es una petición cliente-servidor, que al momento de ser ejecutada el cliente debe esperar la respuesta del servidor para continuar las operaciones. un ejemplo claro es un formulario de contacto, de esos que cuando le das enviar después de colocar los datos, la página se tarda unos segundos (o minutos) en actualizar y te da una respuesta. O Cuando abres una página nueva en el navegador es de por si una operación síncrona, es decir viene de sincronía, tiempo continuo, simultaneidad.
Una operación asíncrona, a diferencia de su antónima permite en "destiempos" realizar operaciones y mientras el cliente espera la respuesta del servidor la página no pierde "sincronía" puedes seguir trabajando en ella. Cualquier aplicación web actual utiliza este método, por ejemplo cuando agregas un comentario o publicas un status en tu red social, la página mientras agrega ese comentario, puedes seguir navegando y usando la página y quizás realizando otras operaciones que ejecuten más eventos asíncronos. Digamos que son peticiones cliente-servidor de segundo plano.
Ajax+jquery
Ahora, como entra aquí nuestro ahora querido amigo jquery ? pues bien, dado que Ajax es una técnica de programación en sí, usando javascript, y jquery es un framework para facilitar codificación en javascript, no podían estar separados. jquery permite realizar las operaciones de Ajax muy sencillas y crossbrowser, es decir, el mismo código para los distintos navegadores. En el siguiente ejemplo voy a mostrar un código sencillo para cargar contenido de una operación Ajax.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="div1">Esto es un div común y silvestre</div>
<button onclick="operacionAjax();" >Hola</button>
</body>
<script>
function operacionAjax(){
$('#div1').html('<p>Cargando</p><img src="ajax-loader.gif" />');
$.ajax({
cache: false,
type: 'post',
url: 'proceso.php',
data:{
variable1:'Hola',
variable2:'Mundo'
},
success: function(response) {
$('#div1').html(response);
}
});
}
</script>
</html>
Fíjense bien que el botón Hola ahora llama a la función operacionAjax(), que realiza 3 actividades, la primera es cambiar el contenido del div1 a una imagen gif de loading (puedes conseguir varios aquí www.ajaxload.info/), la segunda es la petición de ajax como tal, o sea una petición cliente servidor asíncrona, de tipo post, a la url proceso.php con 2 variables (variable1 y variable2) con sus respectivos valores ("Hola" y "Mundo"), y la tercera actividad (success) es la respuesta de dicha solicitud, que como es asíncrona, será aplicada cuando el servidor responda, y se cambiara el contenido del div1 por lo que trae la variable response.
la url proceso.php va a ser el postsrcipting del servidor, y puede ser en este ejemplo algo como
<?php
$var1 = $_POST['variable1'];
$var2 = $_POST['variable2'];
echo $var1.' '.$var2;
?>
lo que quiere decir que procesará la petición leyendo las dos variables de tipo POST enviadas por el Ajax y las concatenara como respuesta. cuando el servidor ejecute esas sentencias sucederá el evento "success" del Ajax y la variable response contendrá lo escrito por el echo del php "Hola Mundo" contenido en las variables previamente mencionadas.
Bueno queridos lectores hasta aquí dejo la lección, espero que les hayan sido útil estos sencillísimos pasos para usar el ajax de jquery. De todos modos deben seguir documentándose sobre el tema, bajar tutoriales y archivos con ejemplo.
Cualquier duda sobre los ejemplos o el tema en si pueden escribirme a mi correo juanpgarciac@gmail.com, mi twitter @juanpgarciac o en ask.fm http://ask.fm/juanpgarciac Gracias por su atención, no olviden comentar!
Contacto:
www.juanpgarciac.com
juanpgarciac@gmail.com
@juanpgarciac
@solucionesTech
