Curso de Ajax Con Java

Versin 1.
Copyright Cdric Simon, 2005-2009
SolucionJava.com
Manual del alumno
Ing. Cedric Simon Tel: 2268 0974 Cel: 8888 2387 Email: c e d r i c @ s o l u c i o n j a v a . c o m Web: www.solucionjava.com
Curso de
Ajax con Java
Curso de Ajax con Java
Pagina 2 / 13
ndice de contenido
1. Introduccin al curso..............................................................................................................................3
1.1. Objetivo de este curso...................................................................................................................3
1.2. Manual del alumno.........................................................................................................................3
1.3. Ejercicios prcticos........................................................................................................................3
1.4. Requisitos para atender a este curso.............................................................................................3
1.5. Soporte despus del curso.............................................................................................................3
2. Introduccin...........................................................................................................................................4
2.1. Definicin y uso..............................................................................................................................4
2.2. Marcos de trabajo..........................................................................................................................4
3. Javascript avanzado..............................................................................................................................5
3.1. Javascript y CSS............................................................................................................................5
4. Ajax con Java........................................................................................................................................6
4.1. Llamada Ajax con HTML................................................................................................................6
4.2. Llamada Ajax con Java..................................................................................................................7
Servlet para Ajax..............................................................................................................................7
4.3. Listas con seleccin automtica.....................................................................................................9
4.4. Ajax y seguridad...........................................................................................................................10
5. Ejercicios.............................................................................................................................................11
6. Esquema de la base de datos.............................................................................................................12
Versin 1.1
Pagina 2 / 13
Pagina 3 / 13
1. Introduccin al curso
1.1. Objetivo de este curso
En este curso vamos a aprender el uso de la tecnologa Ajax, que nos permitir crear pginas web ms
dinmicas y ms atractivas.
1.2. Manual del alumno

Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual
contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debera de
tomar notas personales para completas este manual.
1.3. Ejercicios prcticos

Para captar mejor la teora, se harn muchos ejercicios con los alumnos, para probar la teora y verificar
la integracin de la materia.
Tambin, el alumno podr copiar sus cdigos en una memoria flash al fin del curso para llevarse, con fin
de seguir la prctica en su hogar.
1.4. Requisitos para atender a este curso

El conocimiento de los lenguaje HTML, CSS, Java, y Javascript es requerido para poder atender a este
curso.
Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones
adicionales al profesor.
Pero si aparece que el alumno no posee los requisitos mnimos para este curso, por respeto a los otros
alumnos que ya poseen esta materia, el alumno podra ser traslado para otro curso en el futuro, cuando
el cumplir con los requisitos.
1.5. Soporte despus del curso

Si tienes preguntas sobre la materia del curso en tus ejercicios prcticos, puedes escribir tus
preguntas a cedric@solucionjava.com .
Para informaciones sobre otros cursos, visita el sitio web www.solucionjava.com.
Versin 1.1
Pagina 3 / 13
Pagina 4 / 13
2. Introduccin
2.1. Definicin y uso
Ajax significa Asynchronous Javascript and XML.
Basicamente, la tecnologa Ajax permite comunicar con sistemas remotos y/o refrescar partes de una
pgina si necesidad de recargar la pgina.
Algunos ejemplos del uso de Ajax:
Lista con seleccin automtica de valor.

Aplicaciones de chat
'Drag and drop'
Validaciones extensas de formulario
Mens dinmicos
Personalizacin de pgina
...
2.2. Marcos de trabajo

Existen muchos marcos de trabajo para Ajax. La mayora son marcos de trabajo para Javascript, que
tienen una parte orientada a Ajax.
Los marcos de trabajo te permiten usar cdigos/efectos con Javascript/Ajax sin necesidad de entender
todo el cdigo que va atrs.
Muy probablemente estars interesado en varios marcos de trabajo, y trabajaras con varios al mismo
tiempo, ya que posiblemente ninguno tiene todo lo que quieres.
Ademas, el objetivo de este curso es que seas capaz de desarrollar tu propio marco de trabajo ademas
de usar los terceros.
Algunos marcos de trabajo 'libres':
Rico (http://openrico.org/)
Script.aculo.us (http://script.aculo.us/ )
Mootools (http://demos.mootools.net/ )
OAT (http://oat.openlinksw.com/ )
ZeroKonfig (http://www.zkoss.org/ )
...
Versin 1.1
Pagina 4 / 13
Pagina 5 / 13
3. Javascript avanzado
3.1. Javascript y CSS
El Javascript interactua con las hojas de estilo para modificar la presentacin de los datos.
Cualquier atributo de CSS y HTML se puede modificar usando Javascript.
Recuerden que un atributo CSS prevalece sobre atributos HTML.
js_css.jsp:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<SCRIPT language="JavaScript" src="js/soljava.js"></SCRIPT>
<SCRIPT language="JavaScript" src="js/js_css.js"></SCRIPT>
<title>www.solucionjava.com | Primera llamada con Java</title>
</head>
<body>
<h1>Prueba de javascript con CSS</h1>
<h2> Formulario</h2>
<table align="left" id="tabla">
<tr> <th valign="top">Color de fondo de la pagina:</th>
<td><input type="radio" name="bgcolor" value="#770022" onclick="changeBgColor(this.value)">Rojo<br>
<input type="radio" name="bgcolor" value="black" onclick="changeBgColor(this.value)">Negro<br>
<input type="radio" name="bgcolor" value="navy" onclick="changeBgColor(this.value)">Azul<br>
<input type="radio" name="bgcolor" value="#005500" onclick="changeBgColor(this.value)">Verde<br>
</td></tr>
<tr><th valign="top">Color de letras de la pagina:</th>
<td><input type="radio" name="fgcolor" value="red" onclick="changeFgColor(this.value)">Rojo<br>
<input type="radio" name="fgcolor" value="white" onclick="changeFgColor(this.value)">Blanco<br>
<input type="radio" name="fgcolor" value="#88aaff" onclick="changeFgColor(this.value)">Azul<br>
<input type="radio" name="fgcolor" value="#00ff44" onclick="changeFgColor(this.value)">Verde<br>
</td></tr>
<tr>
<th valign="top">Tamano de letras de la tabla:</th>
<td><input type="radio" name="FontSz" value="10" onclick="changeFontSz(this.value)">10<br>
<input type="radio" name="FontSz" value="12" onclick="changeFontSz(this.value)">12<br>
</td></tr>
<tr>
<th valign="top">Alinear la tabla:</th>
<td>
<input type="radio" name="TbAlign" value="left" onclick="changeTbAlign(this.value)">A la
izquierda<br>
<input type="radio" name="TbAlign" value="right" onclick="changeTbAlign(this.value)">A la
derecha<br>
<input type="radio" name="TbAlign" value="center" onclick="changeTbAlign(this.value)">En medio<br>
</td>
</tr>
</table>
<hr style="clear: both;">
</body>
</html>
js_css.js:
function changeBgColor(color){
document.body.style.backgroundColor=color;
}
function changeFgColor(color){
document.body.style.color=color;
}
function changeFontSz(valor){
document.getElementById("tabla").style.fontSize=valor;
}
function changeTbAlign(valor){
document.getElementById("tabla").align=valor;
}
Versin 1.1
Pagina 5 / 13
Pagina 6 / 13
4. Ajax con Java

4.1. Llamada Ajax con HTML
Con el javascript 'corriente', podemos modificar la forma y el contenido de una pgina, pero sin
comunicar con fuentes externas.
Ajax permite comunicarse con fuentes externas, ya sea archivos de texto, pginas HTML, PHP, JSP,
servlet, o cualquier typo de archivo remoto.
Para llamar a una pgina remota sin refrescar la pgina corriente, hay que crear una consulta usando
una funcin, que es diferente si usas Internet Explorer (new ActiveXObject("Microsoft.XMLHTTP"))
u otro navegador como Firefox (new XMLHttpRequest( )).
Una vez la consulta lista, se usa el metodo 'open' de la consulta con 3 parmetros: el modo de
transmisin (generalmente get o post) y el URL del objeto a llamar. Opcional se puede mencionar si la
llamada es asncrona (por defecto lo es), y un usuario y una clave para la cuenta.
A pesar de que Ajax significa Asyncronous Javascript and XML, es posible hacer llamadas sincrnica y
usando texto en vez de XML.
Una vez la llamada iniciada, se espera la respuesta usando 'onreadystatechange'.
El estado 'readyStatus' de la llamada puede tener los valores siguientes:
0 No iniciado
1 Cargando
2 Cargado
3 Interactivo
4 Completo
El estado 'status' de la llamada puede tener los valores siguientes:
200 OK
408 Request Timeout
201 Created
411 Length Required
204 No Content
413 Requested Entity Too Large
205 Reset Content
414 Requested URL Too Long
206 Partial Content
415 Unsupported Media Type
400 Bad Request
500 Internal Server Error
401 Unauthorized
501 Not Implemented
403 Forbidden
502 Bad Gateway
404 Not Found
503 Service Unavailable
405 Method Not Allowed
504 Gateway Timeout
406 Not Acceptable
505 HTTP Version Not Supported
407 Proxy Authentication Required
Generalmente, nos interesa ejecutar nuestro cdigo cuando la consulta est completa y con estado OK.
Ejemplo de llamada Ajax:
cabecera.jspf:
<%@page contentType="text/html" %>
<%@page errorPage="error.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META NAME="COPYRIGHT" CONTENT="© 2009 Cedric Simon">
<META NAME="AUTHOR" CONTENT="Cedric Simon">
Versin 1.1
Pagina 6 / 13
Pagina 7 / 13
<meta name="description" content="Curso de Ajax - SolucionJava.com">

<meta name="keywords" content="Curso,Ajax,SolucionJava, java">
<%
String currentURL=request.getRequestURI().toString().replace(request.getContextPath()+"/","");
%>
<link rel="stylesheet" type="text/css" href="css/estilo.css">

<SCRIPT language="JavaScript" src="js/soljava.js"></SCRIPT>
<SCRIPT language="JavaScript" src="js/<%=currentURL.replace(".jsp",".js") %>"></SCRIPT>
ajax_html.jsp:
<%@include file="include/cabecera.jspf" %>
<title>www.solucionjava.com | Curso de Ajax | Primera llamada Ajax con HTML</title>
</head>
<body>
<button onclick="getText();">Clic aqui</button>
<div id="texto">
Este es mi bloque de texto inicial
</div>
<%@include file="include/pie.jspf" %>
ajax_html.js:
var req;
function getText() {
var url = "nuevo_texto.txt";
if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get",url,true);
req.onreadystatechange = callback;
req.send(null);
}
function callback( ) {
if (req.readyState==4) {
if (req.status == 200) {
document.getElementById('texto').innerHTML = req.responseText;
}
}
}
nuevo_texto.txt:
<h2>Este es el texto desde el archivo en el servidor!</h2>
4.2. Llamada Ajax con Java

Ahora hemos llamado una pgina de texto 'fijo' en el servidor. Muy fcilmente se podra sacar el URL, o
la lista de URL de la base de datos, por ejemplo. Pero el Ajax permite ms todava: permite llamar a un
Servlet o pgina jsp, y traer el contenido del servlet.
1. Servlet para Ajax

Es un servlet que va a devolver un contenido estructurado o no. Puede ser texto, HTML, o XML por
ejemplo.
En el ejemplo abajo, vamos a recuperar los datos de un paciente sin salir de la pgina.
Ejemplo:
ajax_java.jsp
<title>www.solucionjava.com | Curso de Ajax | Primera llamada Ajax con Java</title>
</head>
<body onload="focusIn( );">
<table align="right">
Versin 1.1
Pagina 7 / 13
Pagina 8 / 13
<tr><td>
<h4>Detalle del paciente</h4>
<div id="empList" style="background-color: white; font-size: 11px;color:blue;">
</div>
</td></tr>
</table>
<h1>Primera llamada con AJAX </h1>
<h2> Solo pone el numero del paciente para ver sus detalle</h2>
<table align="left">
<tr>
<td>Numero de paciente :
<input type="text" id="no_patient" name="no_patient" size="5"
onchange="if (check_only_digitsNoDot(this)) {buscaPaciente(this);}">
</td>
</tr>
</table>
ajax_java.js
var req;
function buscaPaciente(campo ) {
var url = "GetPatientDetails?no_patient=" + escape(campo.value);
if (window.XMLHttpRequest) {
req = new XMLHttpRequest( );
}
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
req.open("Get",url,true);
req.onreadystatechange = callback;
req.send(null);
}
function callback( ) {
if (req.readyState==4) {
if (req.status == 200) {
document.getElementById('empList').innerHTML = req.responseText;
}
}
}
function focusIn( ) {
document.getElementById("no_patient").focus( );
}
GetPatientDetails.java:
package ajax;
import java.io.IOException;
import
import
import
import
import
import
javax.servlet.ServletException;
javax.servlet.http.HttpServlet;
javax.servlet.http.HttpServletRequest;
javax.servlet.http.HttpServletResponse;
bd.LeerDB;
com.solucionjava.db.ConnectDB;
public class GetPatientDetails extends HttpServlet {

private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
StringBuffer ajaxData=new StringBuffer("");
// Security check
boolean isSecure=true;
if (isSecure)
{
String no_patient=request.getParameter("no_patient");
LeerDB miDB = null;
Versin 1.1
Pagina 8 / 13
Pagina 9 / 13
String sql="select * from patient where no_patient="+no_patient;

try {
miDB = new LeerDB(this.getServletName());
miDB.select(sql);
if (miDB.getNext())
{
ajaxData.append("<u>Nombre y apellidos:</u> "+miDB.getStringHTML("fname")+"
"+miDB.getStringHTML("fname2")+" "+miDB.getStringHTML("lname")+""+miDB.getStringHTML("lname2")+"<br>");
ajaxData.append("<u>Fecha de nacimiento:</u> "+miDB.getDateLong("dnaiss")
+"<br>");
}
else
ajaxData=new StringBuffer("Paciente numero "+no_patient+" no encontrado.");
} catch (Exception e) {
ajaxData=new StringBuffer("Error con el SQL : "+sql);
e.printStackTrace();
}
finally{
if (miDB!=null) miDB.cleanup();
}
} else {
ajaxData=new StringBuffer("Error de seguridad. Usted no tiene acceso a esta
pagina.");
}
this.writeResponse(response, ajaxData.toString());
}
public void writeResponse(HttpServletResponse resp, String output) throws IOException {

resp.setContentType("text/plain");
resp.setHeader("Cache-Control", "no-cache");
resp.setHeader("Content", "text/html;charset=iso-8859-1");
resp.getWriter().write(output);
}
web.xml:
...
<servlet>
<description></description>
<display-name>GetPatientDetails</display-name>
<servlet-name>GetPatientDetails</servlet-name>
<servlet-class>com.solucionjava.ejemplosGetPatientDetails</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetPatientDetails</servlet-name>
<url-pattern>/GetPatientDetails</url-pattern>
</servlet-mapping>
...
4.3. Listas con seleccin automtica

Para la lista con seleccin automtica, vamos a usar el marco de trabajo Script.acuo.us con una salsa
de SolucionJava.
Agregar en la carpeta /images la imagen lista3.gif. En la carpeta /css la hoja de estilo SJajax.css, y en /
WEB-INF/lib el archivo SjFramework.jar
ajax_lista.jsp:
<script src="scriptaculous/prototype.js" type="text/javascript"></script>
<script src="scriptaculous/scriptaculous.js" type="text/javascript"></script>
<title>www.solucionjava.com | Curso de Ajax | Primera lista con seleccion automatica en Ajax con
Java</title>
</head>
<body>
<table align="right">
<tr><td>
<h4>Detalle del paciente</h4>
<div id="empList" style="background-color: white; font-size: 11px;color:blue;">
</div>
</td></tr>
</table>
Versin 1.1
Pagina 9 / 13
Pagina 10 / 13
<h1>Primera lista con seleccion automatica en Ajax con Java </h1>

<h2> Seleccione la cuidad. Tecla un minimo de 2 letras</h2>
<table align="left">
<tr>
<td>Cuidad : </td>
<td>
<input type="hidden" name="no_city" id="no_city" value='76'>
<input type="text" id="city" name="city" size="30" maxlength="200" value="Managua"
onfocus="this.select();" title="Si no hay valor que cumple con el texto entrado,
muestra ?? "/>
<img src="images/lista3.gif" border="0" height="18px" class="noprint"
onclick="document.getElementById('no_city').value=-1;document.getElementById('city').value='';"
title="Borrar el valor" style="vertical-align: text-bottom;">
<div id="autocomplete_choices2" class="autocomplete"></div>
<script type="text/javascript">
cityAjax = new Ajax.Autocompleter("city", "autocomplete_choices2", "AjaxListaDyn",
{paramName: "ajaxSQL", minChars: 2,
callback: getSql, afterUpdateElement :
getSelectionId2,autoSelect: true });
</script>
</td>
</tr>
</table>
<input type="button" value="Ver valor de no_city"
onclick="alert(document.getElementById('no_city').value);">
ajax_lista.js:
function getSql(field, value) {
return "nolimit=SI&localSQL=city&ajaxSQL="+
escape(" where city_name like #"+field.value+"@# "+
" group by city_name");
}
function getSelectionId2(text, li) {
$('no_city').value=li.id;
$("city").value=$("city").value.substring(0,$("city").value.lastIndexOf('--'));
}
AjaxListaDyn.java:
package ajax;
import javax.servlet.http.HttpSession;
public class AjaxListaDyn extends AjaxList {
private static final long serialVersionUID = 1L;
protected String checkSecurity(HttpSession session) {
return ""; // No verifico nada de seguridad
}
protected String translateSql(String localSQL, HttpSession session) {
if (localSQL.equals("city"))
localSQL = "select no_city, city_name, concat('-->',region) from city ";
return localSQL;
}
protected void initConnection() {
try {
readDB = new LeerDB(this.getServletName());
} catch (Exception e) {
e.printStackTrace();
}
}
}
4.4. Lista dinmica con accin personalizada

Usando el tag para listas dinamicas, se hace mu sencillo el uso de la lista dinmica. El tag genera todo
el HTML y el Javascript necesario, menos el include de los archivos .js de Scriptaculous.
Ejemplo:
<sj:DynamicList campo = "city" valor="<%=city %>" no_valor="<%=String.valueOf(no_city) %>"
localSQL="city" whereClause="where city_name like #\"+field.value+\"@# group by city_name" />
Versin 1.1
Pagina 10 / 13
Pagina 11 / 13
Nota:
En caso de tener varias listas en una misma pgina, usar el parametro 'div=x' con un valor de
div diferente para cada lista.
Usar el atributo autoSelect="false" para que no se selecciona automaticamente el valor cuando
solo hay 1 posibilidad.
Usar minChar="x" para que inicia la bsqueda cuando se han entrado x caracteres (por
defecto=2)
Usar nolimit="x" para que limite la lista a los x primeros registros (por defecto son 100).
En la clausula where, remplazar las simple comillas del SQL por #, los signos % por @, y
escapar las doble comillas con \. Usar \+field_value+\ para insertar el valor teclado por el
usuario.
4.5. Ajax y seguridad

Como el Ajax permite (en ciertos casos) hacer llamadas directas a la base de datos o a recursos
'seguros', deben tener en mente el aspecto relacionado a la seguridad con Ajax.
Como las llamadas Ajax se hacen desde el navegador, por una consulta HTML, es posible recuperar la
sesin del usuario y entonces validar si el tiene acceso a este recurso (o no).
Versin 1.1
Pagina 11 / 13
Pagina 12 / 13
5. Ejercicios
1. Crear una pgina con un titulo (h1) y una tabla con 8 celdas de colores diferentes. Al pasar el
ratn sobre una celda, el color de fondo del titulo se cambia al color de la celda.
2. Crear un formulario con nombre, apellido, fecha de nacimiento, sexo (radio), puesto de trabajo
(lista), y salario. Comprobar antes de que se envie el formulario:
Que los nombre y apellidos no sean nulos
Que la fecha de nacimiento es vlida (dd/mm/yyyy) es en el pasado
Que el salario es un numero>=0
Que se escogi el puesto de trabajo (Valor inicial: 'Elige')
Que se escogi el sexo
3. Crear una pagina con un prrafo y un botn. Haciendo clic sobre el botn hace
aparecer/desaparecer el prrafo de la vista y cambia el texto del botn.
4. Crear una pgina con un bloque de texto y un botn. Cada vez que se presiona el botn, se tiene
que agregar los nmeros del 1 al 10 al final del bloque de texto, sin refrescar la pagina.
5. Crear una pgina con un contador=1 y un botn. Cada vez que se presiona el botn, se tiene
que aumentar de 1 el contador, sin refrescar la pagina.
6. Crear una pgina con la lista de empleados y su salario. Permitir cambiar el salario directamente,
sin salir de la pgina (Ajax).
7. Crear una pagina con una lista de empleados. Al hacer clic sobre un empleado, muestra sus
detalle en otra parte de la misma pgina (Ajax).
Versin 1.1
Pagina 12 / 13
Pagina 13 / 13
6. Esquema de la base de datos
Versin 1.1
Pagina 13 / 13

Curso de Ajax Con Java

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Curso de Ajax Con Java

Cargado por

Copyright:

Formatos disponibles

Versin 1.

Copyright Cdric Simon, 2005-2009

Manual del alumno