2.4 Usando AJAX por medio del método  $.post().

AJAX es la tecnología para páginas web que nos permite realizar peticiones al servidor web de una manera transparente para el usuario. Usualmente cuando se realiza una petición  al servidor web, la página que actualmente se muestra en el explorador web se elimina, sucede una pausa rápida o de varios segundos y después aparece una nueva página web. Mientras la pausa tiene lugar la ventana del explorador queda en blanco y esto se ve mal para el usuario final.Además cada vez que se realiza una petición de una página web de la forma habitual se tiene que descargar completamente una página web nueva, lo cual significa mas consumo del ancho de banda.Para eliminar estos problemas, es decir, tanto el problema de la ventana del explorador en blanco mientras se carga una nueva página, como el problema del consumo mayor de ancho de banda se ha creado la tecnología de AJAX, la cual nos permitirá descargar contenido del servidor sin la necesidad de que el usuario se de cuenta y sin la necesidad de tener que cargar una página web completa.Con Jquery la implementación de AJAX es bastante simple y se puede realizar con el método $.post().Cuando se implementa AJAX lo que sucede es que un script o programa se ejecuta en el servidor web y envía su resultado u output de vuelta a la computadora del usuario, sin que este último lo note, es decir sin volver a cargar la página web completa.El método $.post() requiere los siguientes parámetros:

$.post(“url del script”,”array con datos”,”función que procesa la respuesta”,”tipo de datos recibidos”);

• “url del script”, es la ruta del programa o script que se ejecutará en el servidor web, sin que el usuario lo note, puede ser un programa escrito por ejemplo en PHP.
• “array de datos ”, se refiere al arreglo de datos, o bien, la información que se le pasará al programa en el servidor web, para que se procese y se genere un output o salida.
• “función que procesa la respuesta”, es el programa que se ejecutará cuando se obtenga el output o salida del script que se ejecuta en el servidor web.
• “tipos de datos recibidos”, es el formato de la información, o bien, el tipo de información que se recibirá como output por parte del script en el servidor, puede ser texto, json, entre otros.

Para poder entender, supongamos que tenemos un programa en el servidor web llamado enviandoSaludo.php y esta escrito en el lenguaje de lado del servidor PHP. Este programa lo que hace es recibir un nombre y después formatearlo, de forma que se genera un mensaje similar al siguiente “Hola, Raymundo, mucho gusto!!!!”.Ahora supongamos que se tiene una pagina HTML donde  el nombre se ingresa en un campo de texto con la clase “campoNombre”, de tal manera que para obtener el valor de este campo debemos usar el siguiente código en Jquery $(“.campoNombre”).attr(“value”), hasta aquí el método post queda como se muestra a continuación:

$.post(“enviandoSaludo.php”,”{nombre:$(“.campoNombre”).attr(“value”)}”);

Como se puede observar la información se esta enviando en forma de arreglo a array {nombre:$(“.campoNombre”).attr(“value”)}, esto siempre debe realizarse de esta manera. Debemos recordar que el formato del arreglo es el siguiente:

{nombre:valor,nombre:valor,…}

Ahora bien, continuando con el ejemplo supongamos, que la función que procesa el resultado del script PHP debe de mostrar una ventana emergente conteniendo el mensaje de salida creado por el script enviandoSaludo.php, de tal forma que el código de esta función es el siguiente

function(output){
   alert(output);
}

y si añadimos este código a la función post queda de la siguiente forma:
$.post(“enviandoSaludo.php”,”{nombre:$(“.campoNombre”).attr(“value”)}”, function(output){
   alert(output);
});

Donde output hace referencia al resultado generado por el script enviandoSaludo.php.Si dejamos la función $.post() como en la parte superior, sucedería lo siguiente; una vez que el usuario haya capturado su nombre en el campo de texto y presionado un botón determinado, se ejecutaría el método $.post() entonces el valor del campo de texto se guardaría en la variable nombre, posteriormente se enviaría la variable nombre al servidor web y al mismo tiempo se haría una solicitud para que se ejecute el script enviandoSaludo.php. Posteriormente el script enviandoSaludo.php le daría formato al nombre creando un mensaje del tipo “Hola,Raymundo,mucho gusto!!!!!”, este mensaje llegaría a la función $.post() en forma de la variable con el nombre output y después se ejecutaría alert(output); lo cual mostraría una ventana emergente con el mensaje.Por último, en caso de que el script enviandoSaludo.php genere un array como salida, es decir, un array en formato JSON entonces se tendría que agregar un último parámetro al final del método $.post() que es “json”. Quedaría como sigue:

$.post(“enviandoSaludo.php”,”{nombre:$(“.campoNombre”).attr(“value”)}”, function(output){
   alert(output);
},”json”);