Ajax y jQuery 3/6 – Utilizando GET y POST

11 comentarios / Ajax, JavaScript, jQuery / Por

Usando Ajax con jQuery para peticiones GET y POST

Habiendo visto los artículos anteriores sobre la introducción a jQuery para la utilización de Ajax y sobre implementación de Hijax, y habiendo entendido la diferencia entre los métodos GET y POST, veremos como realizar llamadas asíncronas con la librería jQuery que nos facilita ampliamente el trabajo.

Veamos un ejemplo sobre el cual trabajaremos usando el Firebug del Firefox.

[html highlight=»6,12,13,14,15,16,17,23″ title=»Archivo: test.php»]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">

</script>

<style type="text/css">
#test{
border: solid #000 1px;
width:300px;
height: 350px;
overflow: auto;
}
</style>

</head>
<body>

<div id="test">contenido inicial</div>

</body>
</html>
[/html]

Tenemos entonces una página con html que contiene la librería jQuery incluída, un div con id igual a test y un CSS que da formato a dicho div. Abramos el Firebug y comencemos con unos métodos del objeto Element de jQuery que nos permiten manipular el DOM del documento.

A continuación detallo los métodos que básicamente podríamos usar para reemplazar dinámicamente el contenido de la página una vez recibida la respuesta del Ajax:

A continuación detallo los métodos que básicamente podríamos usar para reemplazar dinámicamente el contenido de la página una vez recibida la respuesta del Ajax:

  • Element.text(): Nos permite cambiar el contenido del elemento pasando por argumento el nuevo texto.
  • Element.html(): Nos permite cambiar el contenido del elemento pasando por argumento el nuevo texto HTML.
  • Element.append(): Agrega el texto pasado por argumento dentro del elemento usado pero al final de todo el contenido.
  • Element.prepend(): Agrega el texto pasado por argumento dentro del elemento usado pero al principio de todo el contenido.
  • Element.after(): Agrega el texto pasado por argumento después del elemento usado.
  • Element.before(): Agrega el texto pasado por argumento antes del elemento usado.

Para obtener el elemento div con id=test del ejemplo directamente con JavaScript seria document.getElementById('test') y con jQuery lo haríamos así jQuery('#test'). Por lo general vamos a usar el método jQuery('#test').text('nuevo texto') o jQuery('#test').text('nuevo html') para reemplazar su contenido. Abramos el Firebug y empecemos a probar.

Como vemos al abrir el navegador, el div contiene un texto por defecto que le puse de ejemplo que dice «contenido inicial», perfectamente lo podemos dejar en blanco. Al escribir en el Firebug jQuery('#test').text('hello world!') veremos que el contenido del elemento cambia y lo hace en el lado del cliente por ser una ejecución JavaScript. Refrescando el navegador volveremos a tener el ejemplo desde su inicio. Ahora que ya sabemos como cambiar el contenido de los elementos pasemos a la utilización de Ajax.

Utilizando Ajax con jQuery para peticiones asíncronas GET y POST

Si recordamos el artículo 1 sobre estas serie de Ajax y jQuery, veíamos que para ejecutar una petición con POST usabamos el método post() del objeto jQuery. Recibía los siguientes parámetros.

  1. La página que va a procesar los datos enviados
  2. Los datos en sí en formato JSON o un string que los represente. En caso de no tener se envía un objeto vacío {} o un string vacío ” o null
  3. Una función, también denominada callback, que se ejecutará cuando el proceso haya finalizado.

Para poder hacer las pruebas crearemos otra página que va a simular nuestro proceso en el servidor.

[php htmlscript=»true» title=»Archivo: procesadora.php»]
<?php
echo ‘POST: ‘ . print_r($_POST, true);

echo ‘GET: ‘ . print_r($_GET, true);
?>
[/php]

Lo único que hará esta página será imprimir el contenido de los arrays superglobales $_GET y $_POST. Recuerden que la respuesta que devolverá la llamada asíncrona será lo que se haya escrito en la página procesadora.

Podemos hacer una prueba ingresando directamente a la página procesadora desde el navegador pasando un parámetro por la URL: http://localhost/ajax_y_jquery/procesadora.php?nombre_parametro=valor_parametro. De esta manera se ejecuta una llamada GET normal y la página quedaría con el siguiente contenido: POST: Array ( ) GET: Array ( [nombre_parametro] => valor_parametro ).

Dentro de nuestro Firebug entonces ejecutemos el siguiente código:

[js highlight=»3″]
jQuery.post(‘procesadora.php’, {}, function(data){

jQuery(‘#test’).text(data);

});
[/js]

Como habíamos explicado el método post del objeto jQuery recibe los tres parámetros, la página que va a procesar el pedido, los parámetros (vacío por el momento) y una función que se ejecutará cuando reciba la respuesta.

Al ejecutar este código en el Firebug obtendremos el texto POST: Array ( ) GET: Array ( ) que será escrito dentro de nuestro DIV ya que la función que enviamos como tercer argumento al método post() dice que el texto que vuelve de la llamada asíncrona almacenado en la variable “data” reemplace el contenido de nuestro div usando el método text().

Pantalla de ejemplo del Firebug

Es muy interesante notar que el Firebug es una herramienta realmente útil para hacer pruebas de Ajax. Si vemos en la parte inferior izquierda de nuestra pantalla veremos que la segunda línea que aparece nos indica que se ejecutó un proceso Ajax de tipo POST y al darle click encima podemos acceder al detalle viendo 4 pestañas internas de información:

  1. Encabezados: Headers del request y del response
  2. Post: los parámetros enviados al servidor. En este caso estará vacío ya que solo enviamos {}
  3. Respuesta: El texto que retornó la solicitud
  4. HTML: El texto que retornó la solicitud intentando representarlo en HTML. Nos sirve cuando el texto devuelto es con HTML incluido.

POST Headers

Ahora enviemos algúnos parámetro de prueba cambiando nuestro código JavaScript para que envie un nombre y un apellido. Para esto lo podríamos poner como un objeto JSON: {nombre: 'John', apellido: 'Doe'}, o como un string: 'nombre=John&apellido=Doe'

[js highlight=»1″]
jQuery.post(‘procesadora.php’, {nombre: ‘John’, apellido: ‘Doe’}, function(data){

jQuery(‘#test’).text(data);

});
[/js]

Ahora pasando esos parámetros nos retornaría esta respuesta POST: Array ( [nombre] => John [apellido] => Doe ) GET: Array ( ) y en la consola del Firebug veríamos las siguientes pantallas

POST Info

Ahora si vemos en la pestaña “Post” los parámetros enviados y que la devolución tanto en la pestaña “Respuesta” como “HTML” es lo que se almacena dentro de la variable data que terminamos reemplazando por el contenido de nuestro div.

Por supuesto la respuesta muestra el contenido del array superglobal $_POST pero el $_GET está vacío ya que nuestra petición fue usando POST. Para hacer una llamada asíncrona GET con jQuery, mágicamente, la única diferencia sería llamar al método get en lugar de post de la siguiente manera.

[js highlight=»1″]
jQuery.get(‘procesadora.php’, {nombre: ‘John’, apellido: ‘Doe’}, function(data){

jQuery(‘#test’).text(data);

});
[/js]

Al verlo en el Firebug tenemos la diferencia que ahora nos dice que una llamada Ajax se ejecutó. Las pestañas son las mismas que en el anterior pero con un orden diferente (esto podría variar de acuerdo a la versión del Firebug). Ahora nuestra respuesta nos muestra que el array superglobal $_GET recibió parámetros *POST: Array ( ) GET: Array ( [nombre] => John [apellido] => Doe )*.

Probemos algo interesante

Solo a nivel de prueba, cambiemos el nombre de la página procesadora.php en el script por una página que no exista y veremos que al ejecutar la llamada (POST o GET) el Firebug nos mostrará en rojo diciéndonos que error 404, lo que indica que la página procesadora no fue encontrada.

También podemos poner en la página procesadora.php un sleep(5) antes de escribir los datos, lo que hará que en esa línea el servidor espere 5 segundos para escribir los datos simulando la carga de la página, y veremos como el Firebug queda aguardando la respuesta.

POST Info

Firebug rocks!!!.

Tipos de respuestas

Por lo general una petición hecha por POST será de avisar al usuario si la acción se completó exitosamente o no ya que como hablabamos en el artículo métodos GET y POST el concepto de POST es actualizar o insertar información en el servidor mientras que GET sería para obtener la información. Por lo tanto con una respuesta de éxito o no podría bastar, tal como lo vimos en el primer artículo de la serie.

Cuando usamos GET, que sí es para obtener información, la idea sería que la respuesta sea mostrada en alguna parte de nuestra página. Esta respuesta podría ser en formato XML (de ahí la letra X final del nombre Ajax), JSON (algunos lo llaman Ajaj), un simple texto o HTML. En el caso de enviar un XML o JSON deberíamos, por medio de JavaScript, procesar esos datos y hacer lo que sea necesario. En el caso de querer mostrar datos simplemente y cuando la respuesta sea HTML o texto simplemente lo mostramos.

Mostremos los datos de las peticiones GET

Hagamos este cambio en nuestra página procesadora.php.

[php highlight=»15″ htmlscript=»true»]
<?php

//– supongamos aquí una conexión a la base de datos obteniendo un parámetro GET
// por ejemplo $_GET[‘noticia_id’]

$noticiaObtenida = <<<TEXT
<h2>Italian prosecutors seek trial of Berlusconi</h2>

<p><strong>Rome (CNN)</strong> — Italian prosecutors Wednesday formally requested a trial of Prime Minister Silvio Berlusconi for alleged abuse of power and sex with an underage prostitute, they said.</p>
<p>Judge Cristina di Censo has five days to make a decision on how to proceed now that Milan chief prosecutor Edmundo Bruti Liberati has filed the application.</p>
<p>She can accept the request, putting the trial in motion without a traditional preliminary hearing; or dismiss it, allowing investigations to continue to determine whether there is enough evidence for trial.</p>
<p>She could also refer the case to another court. Berlusconi’s lawyers have argued that the Milan courts do not have jurisdiction — because of where the alleged crimes were committed — or the authority to try a prime minister.</p>
TEXT;

echo $noticiaObtenida;

?>
[/php]

Ahora si ejecutamos nuestro script en el Firebug veremos que nos devuelve la noticia obtenida y que se carga en el div pero posiblemente veremos que convierte los signos < > en carateres < y $gt; por lo que vamos a modificar nuestro script y en lugar de usar el método text() usaremos el html().

[js highlight=»3″]
jQuery.get(‘procesadora.php’, {nombre: ‘John’, apellido: ‘Doe’}, function(data){

jQuery(‘#test’).html(data);

});
[/js]

Ejemplo HTML

Ya tenemos nuestra noticia dentro del div con el HTML devuelto por nuestra llamada Ajax.

Hagámoslo más fácil

Ya que el concepto del método GET es obtener información y por lo general lo vamos a cargar dentro de un elemento, jQuery nos provee otro método Element.load() que ejecuta la llamada Ajax y carga la respuesta dentro del Element. Este método recibe como primer argumento la página procesadora y como segundo argumento opcional los parámetros que quiera enviar. Es útil saber que si envío parámetros en formato de texto ‘nombre=John&apellido=Doe’ se ejecutará una llamada GET y si lo envío como un objeto JSON {nombre: ‘John’, apellido: ‘Doe’} será POST. Veamos el código:

[js]
//– Llamada GET
jQuery(‘#test’).load(‘servidor.php’);
//– Llamada GET
jQuery(‘#test’).load(‘servidor.php’, ‘nombre=John&amp;apellido=Doe’);
//– Llamada POST
jQuery(‘#test’).load(‘servidor.php’, {nombre: ‘John’, apellido: ‘Doe’});
[/js]

Como podemos ver, jQuery nos ahorra mucho trabajo para realizar tareas con Ajax y aún existen muchas posibilidades que iremos viendo en artículos posterior, entre las cuales se encuentra por ejemplo el loading…

Con este artículo dimos un repaso de los conceptos sobre el GET y POST y utilizamos jQuery para hacer ambas peticiones.

Espero sus comentarios para saber que otros temas les interesaría ir viendo.

Puedes ver el siguiente artículo sobre esta serie aquí.

Descubre más desde Neurosimbiosis

Suscríbete y recibe las últimas entradas en tu correo electrónico.

11 comentarios en “Ajax y jQuery 3/6 – Utilizando GET y POST”

  2. Jesús

    Gracias Juan, estoy terminando de leer las páginas de este tema, y me parecen muy didácticas, que es lo que olvidan muchos sitios con mucha información desordenada. He realizado aplicaciones simples y deseo incluir estos conceptos en nuevos trabajos. Agradeceria un ejemplo completo con PHP MySql Hijax jQuery Ajax para envio e inserción de formulario de contacto.
    Excelente Sitio Web, Gracias Nuevamente.

    Responder
    1. Juan Ardissone

      De la misma manera que el ejemplo Jmacc.

      Lo que imprimas en la respuesta vuelve a tu función jQuery y lo manipulas con JavaScript. Puedes usar la función json_encode en la página procesadora y haces echo de ese resultado entonces lo manejas como un JSON dentro del jQuery.get()

      Responder
  4. Gustavo Moran

    Estoy intentando por todos los medios pasar un XML generado desde mi web a otra URL, pero no lo consigo

    El codigo viene a ser algo así:

    xml = «DATOS»;

    $.ajax({
    type: «POST»,
    async: false,
    url: url,
    dataType: «xml»,
    data: xml,
    error: function (jqXHR, textStatus, errorThrown){
    alert(«No se ha podido establecer comunicacion con» +
    «n – jqXHR: » + jqXHR +
    «n – textStatus: » + textStatus +
    «n – errorThrow: » + errorThrown);
    },
    success: function (ws){
    alert(«Datos enviados:» + ws);
    }

    });

    Pero lo máximo que obtengo es:
    – jqXHR: [object Object]
    – textStatus: error
    – errorThrow: [Exception… «Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)» nsresult: «0x80004005 (NS_ERROR_FAILURE)» location: «JS frame :: http://lib/js/jquery.js :: :: line 18″ data: no]

    PD: por cierto buenisimo los tutoriales he aprendido algunas cosillas que no sabía.

    Responder
  5. phipex

    soy algo nuevo en ajax y tengo una pregunta, cual es la forma mas elegante de enviar por post datos sin que sea json o como convertir a json, para ser mas preciso, tengo que enviar unos datos que tengo en un array y otros que tengo en un xml, el xml si es fijo pero el array si varia mucho, de echo lo tengo que enviar cada vez que se actauliza, encontre un par de metodos pero no me parecen los mas optimos, si sabes de alguno te lo agradeceria, te envio los que encontre y me comentas que te parece

    el primero era convertir un array en un objeto

    var myObject = [];
    myObject.push(1);
    myObject.push(2);

    var jObject={};
    for(i in myObject)
    {
    jObject[i] = myObject[i];
    }

    y el otro es

    data: { inputxml: escape(»)}, aunque me funciona mejor sin escape

    agradezco de antemano cualquier ayuda

    p.d experimentando con esto, hice un descubrimiento que gracias a mi ignorancia me parecio curioso, es poder hacer en una misma peticion post y get, esto lo logre mandando parametros mientras hacia un post con un objeto 😛

    Responder
    1. Juan Ardissone

      Hola phipex

      Algo que me gusta mucho de JavaScript es lo dinámico que es con los arrays y objetos. De hecho los objetos en realidad son arrays asociativos. Si mal no recuerdo en el libro ‘Introducción a Ajax’ publicado en http://www.librosweb.es se habla de JSON. Te recomendaría darle una mirada, creo que va a darte una gran introducción a JSON y creo que hasta te gustara más

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *