Hoy os voy enseñar como podemos utilizar Ajax junto a servlets para realizar peticiones al servidor y cargar contenidos de forma dinámica.
Ajax nos permite realizar peticiones asíncronas al servidor para , por ejemplo, para recargar un select con regiones en función de un pais seleccionado a través de un select sin necesidad de recargas.
Cada día, la utilización de Ajax está más extendida y cada vez son más las Webs donde podemos ver este tipo de funcionalidades.
Para poder utilizarlo, debemos de apoyarnos en algún lenguaje de cara al servidor para realizar las operaciones por detrás como puede ser Java o PHP. En nuestro caso, utilzaremos un servlet que nos devolverá un dato en función de una variable que le pasemos.
Para empezar utilizaremos el siguiente código HTML:
<head> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <div class="idioma"><a class="esp" href="#">Espanyol</a><a class="eng" href="#">Ingles</a></div> </body>
Vamos a utilizar las funciones Ajax de JQuery ya que simplifican enormemente la tarea.
Utlizaremos la función ".get()" para hacer una petición de tipo GET al servidor cuando cliquemos sobre cada enlace y obtener un mensaje diferente en función del idioma.
jQuery(document).ready(
function() {
$(".esp").click(function(){
$.get("MiServlet", { idioma:"esp" },
function(data){
alert(data);
});
});
$(".eng").click(function(){
$.get("MiServlet", { idioma:"eng" },
function(data){
alert(data);
});
});
});
Con este script realizariamos na petición al servidor a través de Ajax y con un servlet llamado MiServlet cuando cliquemos sobre el enlace con class="esp" o con el enlace con class="eng".
Para que funcione correctamente y el servlet sepa que mensaje mostrar según el idioma le mandamos un parámetro "idioma" que será recojido por el servlet y en función de él, mostrar un mensaje u otro.
Por último la respuesta del servlet se devuelv a través de la variable "data" y es mostrado el resultado mediante un "alert".
El servlet que necesitamos deberia tener a siguiente estructura:
public class MiServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String idioma = request.getParameter("idioma");
response.setContentType("text/html");
PrintWriter out = response.getWriter();
if(idioma=="esp"){
out.println("<p>Has selecciondo el idioma Espanyol</p>");
}
else if(idioma="eng"){
out.println("<p>Has selecciondo el idioma Ingles</p>");
}
}
}
Con esto tendríamos un servlet que al hacerle la petición con Ajax nos devuelve un elemento "<p>" que contiene el mensaje.
Nosotros simplemente mostramos lo devuelvo en un "alert" pero podríamos directamente añadirlo a nuetra página y, por ejemplo, mostrar el mensaje a continuación de los enlaces de idiomas de la siguiente forma:
jQuery(document).ready(
function() {
$(".esp").click(function(){
$.get("MiServlet", { idioma:"esp" },
function(data){
$(".idioma").append(data);
});
});
$(".eng").click(function(){
$.get("MiServlet", { idioma:"eng" },
function(data){
$(".idioma").append(data);
});
});
});
A partir de aquí podreis hacer lo que querais recargando contenidos sin necesidad de recargas, pudiendo ,por ejemplo, hacer una consulta a la base de datos y actualizar algún campo de un formulario, paginar contenido o lo que vosotros querais.
Por último, decir que al igual que nosotros hemos utilizado una petición de tipo GET podríamos hacer lo mismo con POST utilizando .post() en JQuery y doPost en el servlet.
Espero que os haya gustado.