Vous êtes sur la page 1sur 9

Introduccin a JavaScript y Ajax.

1. Validacin de Formularios Web 1.0.


1.1. Funcionamiento.

Cuando se hace clic en Enviar dejando en blanco el nombre se obtiene:

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

1/9

Introduccin a JavaScript y Ajax.

1.2. Archivo HTML.


Crea este archivo en el mismo proyecto del servlet SpSaludo.
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="es"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>Validacin de Formularios</title> 7 </head> 8 <body> 9 <script type="text/javascript"> 10 <!-11 /* Se pone entre comentarios de HTML para que no sea mostrado por navegadores 12 * que no soportan el elemento SCRIPT. */ 13 function valida(forma) { 14 if (forma.nombre.value == "") { 15 window.alert("Nombre en blanco.") 16 return false; 17 } else { 18 return true; 19 } 20 } 21 --> 22 </script> 23 <h1>Validacin de Formularios</h1> 24 <!-- El mtodo "onsubmit" tambin se puede usar con el mtodo "get". --> 25 <form action="SpSaludo" method="post" onsubmit="return valida(this)"> 26 <div> 27 <div><label>Nombre:</label></div> 28 <div><input type="text" name="nombre"></div> 29 <div><input type="submit" value="Enviar"></div> 30 </div> 31 </form> 32 </body> 33 </html>

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

2/9

Introduccin a JavaScript y Ajax.

2. EM, STRONG y DOM.


El Document Object Model (DOM) es una conjunto de clases y funciones estandarizadas para procesar documentos XML y HTML desde lenguajes de programacin, inclujento a JavaScript. Tiene una estructura de rbol. Cada elemento o texto de un documento se conoce como nodo. Los atributos del elemento corresponden a los atributos del nodo. Cada uno de los elementos y textos que conforman el contenido de un elemento son los hijos (children) del nodo.

2.1. Funcionamiento.

Al hacer clic en Procesa se obtiene:

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

3/9

Introduccin a JavaScript y Ajax.

2.2. Archivo cpDom.html.


1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="es"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>Ejemplo de EM, STRONG y DOM</title> 7 <!-- Utiliza el archivo "ctrlDom.js" que contiene cdigo en JavaScript. --> 8 <script type="text/javascript" src="ctrlDom.js"></script> 9 </head>

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

4/9

Introduccin a JavaScript y Ajax.


10 <body> 11 <h1>Ejemplo de EM, STRONG y DOM</h1> 12 <p> 13 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 14 incididunt ut labore et dolore magna aliqua. 15 </p> 16 <!-- En este prrafo se usan los elementos EM y STRONG son elementos de lnea. Se 17 usan para resaltar parte de un bloque. Solo pueden contener elementos de lnea y 18 texto. Pueden usar los atributos ms comunes, como "id", "class", "lang" y los 19 eventos comunes como "onclick", "onmouseover", etc. Se usan para lo siguiente: 20 * EM. nfasis. Resaltar contenido. Normalmente se hace con letra itlica. 21 * STRONG. nfasis Ms fuerte. Resaltar ms fuerte el contenido. Normalmente se 22 hace con texto en negritas. --> 23 <p id="segundo"> 24 Curabitur <em>pretium tincidunt</em> lacus. Nulla gravida orci a odio. Nullam 25 varius, <strong>turpis et commodo pharetra,</strong> est eros bibendum elit, 26 nec <em>luctus magna felis</em> sollicitudin mauris. Integer in mauris eu nibh 27 euismod gravida. <em id="x">Duis ac tellus et risus vulputate vehicula.</em> 28 <strong id="y">Donec lobortis risus a elit.</strong> Etiam tempor. Ut 29 ullamcorper, <strong>ligula eu tempor congue,</strong> eros est euismod turpis, 30 id tincidunt sapien risus a quam. 31 </p> 32 <!-- Este "div" contiene un botn que procesa clics invocndo la funcin 33 "procesa". --> 34 <div><input type="button" value="Procesa" onclick="procesa()"></div> 35 </body> 36 </html>

2.3. Archivo ctrlDom.js.


1 colores = ["blue", "fuchsia", "gray", "green", "lime", "color", "navy", "olive", 2 "purple", "red", "silver", "teal"]; 3 function procesa() { 4 // Crea un elemento h1. 5 var encabezado = document.createElement("h1"); 6 // Agrega un nodo de texto al encabezado. 7 encabezado.appendChild(document.createTextNode("Elementos STRONG encontrados")); 8 // Agrega el encabezado al cuerpo del documento. 9 document.body.appendChild(encabezado); 10 var ul = document.createElement("ul"); 11 document.body.appendChild(ul); 12 // Obtiene el nodo cuyo id es "segundo" 13 var segundo = document.getElementById("segundo"); 14 // Obtiene un arreglo con los hijos del nodo "segundo" que sean del tipo "strong". 15 var ems = segundo.getElementsByTagName("strong"); 16 for (i = 0; i < ems.length; i++) { 17 var em = ems[i]; 18 // "childNodes" es un arreglo con todos los hijos de un nodo. 19 var texto = em.childNodes[0]; 20 var li = document.createElement("li"); 21 /* Se usa el atributo "style"; corresponde a CSS y asigna el atributo "color". 22 * Si se quiere asignar "background-color", se cambia el guin por mayscula: 23 * li.style.backgroundColor = colores[i % 12]; 24 * Se puede asignar cualquier otro atributo de HTML; por ejemplo: 25 * li.id ="xxx" */ 26 li.style.color = colores[i % 12]; 27 // "cloneNode(true)" hace una copia del nodo y sus hijos.

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

5/9

Introduccin a JavaScript y Ajax.


28 29 30 31 32 33 34 35 36 37 } li.appendChild(texto.cloneNode(true)); ul.appendChild(li); } var fin = document.createElement("div") // Se asigna el contenido en HTML del nodo "fin". fin.innerHTML = "Este es el <strong>final</strong>."; document.body.appendChild(fin) // Borra el segundo nodo del BODY. El primero es texto y el segundo es H1. document.body.removeChild(document.body.firstChild.nextSibling)

3. Ajax.
En esta tecnologa el sistema de scripting se conecta al servidor web y este contesta solo con datos. La ventana no se refresca. Si hay que actualizar alguna parte de la pgina, se usa DOM.

3.1. Funcionamiento.

Al hacer clic en enviar se obtiene la siguiente secuencia de alertas. La apariencia y opciones de estas vara con cada navegador.

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

6/9

Introduccin a JavaScript y Ajax.

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

7/9

Introduccin a JavaScript y Ajax.

3.2. Archivo cpAjax.html.


1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="es"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 6 <title>Ajax</title> 7 <script type="text/javascript" src="ctrlAjax.js"></script> 8 </head> 9 <body> 10 <h1>Ajax</h1> 11 <div> 12 <label>Nombre:</label> 13 <input type="text" id="nombre"> 14 <input type="button" value="Enviar" onclick="envia()"> 15 </div> 16 </body> 17 </html>

3.3. Archivo ctrlAjax.js.


1 function envia() { 2 try { 3 /* Crea el objeto que comunica con el servidor. No funciona en Internet Explorer 6 4 * o versiones anteriores. */ 5 var xhr = new XMLHttpRequest(); 6 // Obtiene la caja de texto con el id "nombre". 7 var nombre = document.getElementById("nombre"); 8 /* Arma la URL para enviar el valor capturado en la caja de texto. Usa el mtodo 9 * GET con el parmetro "nombre", el cual no debe llevar espacios. */ 10 var uri = "ServicioSaludo?nombre=" + nombre.value; 11 /* Abre una conexin a la uri indicada al mtodo GET. El valor false indica que 12 * la conexin se administra en modo sncrono, lo cual significa que enviar los 13 * datos y esperar a recibir la respuesta. */ 14 xhr.open("GET", uri, false); 15 /* Antes de enviar los datos es posible definir encabezados que describan las 16 * caractersticas del envo. Un equivalente en el correo seran los sellos que 17 * indican si el envo es express o normal, el caso de material frgil o que lado 18 * v hacia arriba. En este caso se indica que espera recibir texto. */ 19 xhr.setRequestHeader("Accept", "text/plain");

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

8/9

Introduccin a JavaScript y Ajax.


20 // Enva una solicitud sin contenido. 21 xhr.send(null); 22 /* Cuando llega aqu es porque se ha recibido la respuesta del servidor web. 23 * Muestra los encabezados recibidos. */ 24 window.alert("Encabezados: " + xhr.getAllResponseHeaders()); 25 // Muestra el estado final de la conexin. Es un dato numrico. 26 window.alert("Estado: " + xhr.status); 27 // Muestra un texto que describe el estado final de la conexin. 28 window.alert("Texto de Estado: " + xhr.statusText); 29 // Muestra el texto de la respuesta. 30 window.alert("Texto de la Respuesta: " + xhr.responseText); 31 } catch (ex) { 32 window.alert(ex); 33 } 34 }

3.4. Archivo ServicioSaludo.


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 package servlets; import import import import import import import java.io.IOException; java.io.PrintWriter; javax.servlet.ServletException; javax.servlet.annotation.WebServlet; javax.servlet.http.HttpServlet; javax.servlet.http.HttpServletRequest; javax.servlet.http.HttpServletResponse;

@WebServlet(name = "ServicioSaludo", urlPatterns = {"/ServicioSaludo"}) public class ServicioSaludo extends HttpServlet { @Override protected void doGet(HttpServletRequest solicitud, HttpServletResponse respuesta) throws ServletException, IOException { String nombre = solicitud.getParameter("nombre"); String saludo = "Hola " + nombre; respuesta.setContentType("text/plain;charset=UTF-8"); respuesta.setHeader("Content-Language", "es"); PrintWriter out = respuesta.getWriter(); try { out.println(saludo); } finally { out.close(); } } @Override public String getServletInfo() { return "Servicio que responde con un saludo. Versin 1.0. " + "Copyright 2011 Gilberto Pacheco Gallegos"; } }

Copyright 2011, Gilberto Pacheco Gallegos. Todos los derechos reservados.

9/9