Ajax

Crear un proyecto AJAX con JSP, Servlet, JavaScript y CSS
Desarrollo de Aplicaciones III
5to Cuatrimestre

UTM

Contenido
Crear el proyecto ......................................................................................................................................2 Crear página de inicio...............................................................................................................................3 Crear JavaScript ........................................................................................................................................5 Crear archivo CSS .....................................................................................................................................6 Crear objeto XMLHttpRequest.................................................................................................................7 Creación de las clases Profesor y ConjuntoProfesores ......................................................................... 11 Creación de Servlet ............................................................................................................................... 13 Crear Página de profesores................................................................................................................... 20 Crear página para manejo de errores ................................................................................................... 22

1

Crear el proyecto
1. Crear un nuevo proyecto de la Categoría Java Web y tipo de proyecto Web Application y presionar Next.

Imagen 12. Dejar los parámetros como está por default pero poner un nombre al proyecto en la sección Project Name y presionar Next

Imagen 2

2

3. En las siguientes secciones dejar las opciones que vienen por default. 4. Al terminar de crear el proyecto nos aparecerá una estructura de archivo similar a la Imagen 3.

Imagen 3

5. Y será creado un archivo index.jsp, con el siguiente código quese muestra en la Imagen 4

Imagen 4

Crear pagina de inicio
1. Para crear una página de inicio de nuestro ejemplo como se muestra en la Imagen 5, deberemos de modificar el código del archivo index.jsp.

3

Imagen 5

2. Debemos de modificar el código del archivo index.jsp para que quede como se muestra en las Imágenes 6 y 7.

Imagen 6

4

Imagen 7

3. Ya completado el nuevocódigo de index.jsp es necesario crear el archivo javascript.js que contendrá todo los métodos y/o funciones necesarias por la aplicación.

Crear JavaScript
1. Notemos que, en el archivo index.jsp se necesitan dos funciones, init() y completar(). La función init() se encarga de inicializar algunas variables de uso global, esta función se ejecuta en forma automática cuando ocurre el evento onloadde la página, la segunda función completar() se ejecuta en el evento onkeyup del input donde se escriben el nombre del profesor a buscar. Primero que nada creamos la función init() en el archivo javascript.js y contendrá el código mostrado en la Imagen 8.

Imagen 8

5

2. Por consiguiente creamos la función completar() con el código como se muestra en la Imagen 9. Nota: Por el momento solodeclararemos esta función quedando pendiente declarar initRequest() y callback().

Imagen 9

Crear archivo CSS
1. Ahora crearemos un archivo CSS que contendrá todas las reglas de estilo necesarias para lograr la apariencia deseada en nuestra página, dicho archivo se llamará stylesheet.css. 2. Lo primero que haremos será dar el estilo de fondo al body y declarar la fuente que utilizaremos ennuestra página, escribiremos la siguiente regla como se muestra en la Imagen 10.

Imagen 10

3. Ahora lo que haremos será crear una clase de estilo de nombre .content que será el estilo aplicado al elemento que contendrá los títulos y el formulario donde se pondrán los nombres a buscar, esto se verá como en la Imagen 11.

6

Imagen 11

4. Ahora debemos de darle estilo a los títulos...