Documentos de Académico
Documentos de Profesional
Documentos de Cultura
com
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
Manual del alumno
Ajax con Java
Curso de
Versión 1.1
© Copyright Cédric Simon, 2005-2009
Curso de Ajax con Java Pagina 2 / 13
Índice de contenido
1. Introducción al curso..............................................................................................................................3
1.1. Objetivo de este curso...................................................................................................................3
1.2. Manual del alumno.........................................................................................................................3
1.3. Ejercicios prácticos........................................................................................................................3
1.4. Requisitos para atender a este curso.............................................................................................3
1.5. Soporte después del curso.............................................................................................................3
2. Introducción...........................................................................................................................................4
2.1. Definición 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 selección automática.....................................................................................................9
4.4. Ajax y seguridad...........................................................................................................................10
5. Ejercicios.............................................................................................................................................11
6. Esquema de la base de datos.............................................................................................................12
1. Introducción al curso
1.1. Objetivo de este curso
En este curso vamos a aprender el uso de la tecnología Ajax, que nos permitirá crear páginas web más
dinámicas y más atractivas.
También, el alumno podrá copiar sus códigos en una memoria flash al fin del curso para llevarse, con fin
de seguir la práctica en su hogar.
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 mínimos para este curso, por respeto a los otros
alumnos que ya poseen esta materia, el alumno podría ser traslado para otro curso en el futuro, cuando
el cumplirá con los requisitos.
2. Introducción
2.1. Definición y uso
Ajax significa “Asynchronous Javascript and XML”.
Basicamente, la tecnología Ajax permite comunicar con sistemas remotos y/o refrescar partes de una
página si necesidad de recargar la página.
Los marcos de trabajo te permiten usar códigos/efectos con Javascript/Ajax sin necesidad de entender
todo el código que va atrás.
Muy probablemente estarás 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.
3. Javascript avanzado
3.1. Javascript y CSS
El Javascript interactua con las hojas de estilo para modificar la presentación de los datos.
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>
<input type="radio" name="FontSz" value="14" onclick="changeFontSz(this.value)">14<br>
<input type="radio" name="FontSz" value="8" onclick="changeFontSz(this.value)">8<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;
}
Ajax permite comunicarse con fuentes externas, ya sea archivos de texto, páginas HTML, PHP, JSP,
servlet, o cualquier typo de archivo remoto.
Para llamar a una página remota sin refrescar la página corriente, hay que crear una consulta usando
una función, 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 parámetros: el modo de
transmisión (generalmente get o post) y el URL del objeto a llamar. Opcional se puede mencionar si la
llamada es asíncrona (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 sincrónica y
usando texto en vez de XML.
Generalmente, nos interesa ejecutar nuestro código cuando la consulta está completa y con estado OK.
%>
<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>
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>
En el ejemplo abajo, vamos a recuperar los datos de un paciente sin salir de la página.
Ejemplo:
ajax_java.jsp
<%@include file="include/cabecera.jspf" %>
<title>www.solucionjava.com | Curso de Ajax | Primera llamada Ajax con Java</title>
</head>
<body onload="focusIn( );">
<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>
<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>
<%@include file="include/pie.jspf" %>
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 javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bd.LeerDB;
import com.solucionjava.db.ConnectDB;
@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;
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>
...
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:
<%@include file="include/cabecera.jspf" %>
<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>
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;
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" />
Nota:
– En caso de tener varias listas en una misma página, 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 búsqueda 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.
Como las llamadas Ajax se hacen desde el navegador, por una consulta HTML, es posible recuperar la
sesión del usuario y entonces validar si el tiene acceso a este recurso (o no).
5. Ejercicios
1. Crear una página con un titulo (h1) y una tabla con 8 celdas de colores diferentes. Al pasar el
ratón 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 válida (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 párrafo y un botón. Haciendo clic sobre el botón hace
aparecer/desaparecer el párrafo de la vista y cambia el texto del botón.
4. Crear una página con un bloque de texto y un botón. Cada vez que se presiona el botón, se tiene
que agregar los números del 1 al 10 al final del bloque de texto, sin refrescar la pagina.
5. Crear una página con un contador=1 y un botón. Cada vez que se presiona el botón, se tiene
que aumentar de 1 el contador, sin refrescar la pagina.
6. Crear una página con la lista de empleados y su salario. Permitir cambiar el salario directamente,
sin salir de la página (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 página (Ajax).