El ejemplo que di es una aplicación cuando un usuario corporativo se registra. Cuando el usuario se registra, verifica si el nombre de usuario y el nombre corporativo están disponibles. El método anterior era agregar un botón al lado, hacer clic en "Verificar" y enviar una solicitud. al servidor, y luego Espere... el servidor devuelve información y continúa la operación.
Si utilizamos la tecnología AJAX para implementar las operaciones anteriores, no tenemos que esperar a que el servidor devuelva información. Cuando el usuario ingresa el nombre de usuario o el nombre de la empresa, cuando el cuadro de texto de entrada pierde el foco, se enviará automáticamente una solicitud a. El servidor y el usuario continuarán realizando las siguientes operaciones. No es necesario hacer clic en "Verificar" ni esperar a que el servidor devuelva información. La verificación y la operación del usuario son asincrónicas y se pueden realizar al mismo tiempo. Cuando se devuelve la información del servidor, la información devuelta se mostrará automáticamente en la ubicación correspondiente de la página sin actualizar la página, lo que equivale a un efecto de actualización parcial. Veamos el código a continuación.
El código completo de la página HTML es el siguiente:
El siguiente es un fragmento citado:
1＜ %@page language="java" contentType="text/html;charset=GBK"%＞
2＜lenguaje de escritura="javascript" tipo="texto/javascript">
3＜!--
4/**//**Ajax iniciado por Alpha 2005-12-31*/
5
6 var http = getHTTPObject();
7
8 funciones handleHttpResponse(){
9 si(http.readyState == 4){
10 si(http.status == 200){
11 var xmlDocument = http.responseXML;
12 si(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }más{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
veintiuno }
22 más {
23 alerta ("¡La página que solicitó es anormal, lo que puede afectar su navegación de la información en esta página!");
alerta 24 (http.status);
25}
26}
27}
28
29 función handleHttpResponse1(){
30 si(http.readyState == 4){
31 si(http.status == 200){
32 var xmlDocument = http.responseXML;
33 si(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }más{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42 }
43 más {
44 alerta ("¡La página que solicitó es anormal, lo que puede afectar su navegación de la información en esta página!");
45 alerta (http.status);
46 }
47 }
48 }
49
50 función chkUsuario(){
51 var URL = "/chkUserAndCom";
52 var nombre = document.getElementById("userName").value;
53 URL += ("&userName="+nombre+"&oprate=chkUser");
54 http.open("OBTENER",url,verdadero);
55 http.onreadystatechange = handleHttpResponse;
56 http.enviar (nulo);
57 regresan;
58 }
59 función chkComNm(){
60 var URL = "/chkUserAndCom";
61 var nombre = document.getElementById("comNm").value;
62 URL += ("&comName="+nombre+"&oprate=chkCom");
63 http.open("OBTENER",url,verdadero);
64 http.onreadystatechange = handleHttpResponse1;
65 http.enviar (nulo);
66 regresan;
67 }
68
69 //Esta función puede crear el objeto XMLHttpRequest que necesitamos
70 función getHTTPObject(){
71 var xmlhttp = falso;
72 si(ventana.XMLHttpRequest){
73 xmlhttp = nuevo XMLHttpRequest();
74 si(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('texto/xml');
76 }
77 }
78 más {
79 intentar {
80 xmlhttp = nuevo ActiveXObject("Msxml2.XMLHTTP");
81 }captura(e){
82 intento {
83 xmlhttp = nuevo ActiveXObject("Microsoft.XMLHTTP");
84 }captura(E){
85 xmlhttp = falso;
86}
87 }
88}
89 devolver xmlhttp;
90}
91/**//**Ajax termina*/
92
93//Formulario de detección
94función chkcontraseña()
95{
96 var m=documento.form1;
97 if(len(m.contraseña.valor) ＞ 20 || len(m.contraseña.valor) ＜ 5 || !isStr(m.contraseña.valor))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("contraseña").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "Lo sentimos, la contraseña debe contener letras, números o guiones bajos en inglés, ¡y la longitud debe ser de 5 a 20!";
102 }
103 más
104 {
105 document.getElementById("contraseña").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107 }
108}
109
110función chkconfirmContraseña()
111{
112 var m=documento.form1;
113 si (m.contraseña.valor!= m.confirmarContraseña.valor)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "¡Lo sentimos, la contraseña no coincide con la contraseña repetida!";
118 }
119 más
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123 }
124}
125
126 campo de verificación de función ()
127{
128 var m=documento.form1;
129 si (m.nombredeusuario.valor.longitud==0)
130 {
131 alert("Lo sentimos, el nombre de usuario debe contener letras, números o guiones bajos en inglés y la longitud debe ser de 5 a 20.");
132 m.nombredeusuario.focus();
133 devuelven falso;
134}
135 si (m.contraseña.valor.longitud==0)
136 {
137 alert("Lo sentimos, la contraseña debe contener letras, números o guiones bajos en inglés y la longitud debe ser de 5 a 20.");
138 m.contraseña.focus();
139 devuelven falso;
140 }
141 si (m.contraseña.valor!= m.confirmarContraseña.valor)
142 {
143 alert("¡Lo sentimos, la contraseña no coincide con la contraseña repetida!");
144 m.confirmPassword.focus();
145 devuelve falso;
146 }
147 si(m.comNm.valor.longitud==0)
148 {
149 alert("¡Lo sentimos, el nombre de la empresa no puede estar vacío!");
150 m.comNm.focus();
151 devuelven falso;
152 }
153 m.enviar();
154}
155
156//-->
157＜/guion＞
158＜cuerpo topmargin="0">
159＜nombre del formulario="form1" método="post" action="/Control?act=Register"＞
160＜ancho de tabla="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Programa de demostración Ajax＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Registro empresarial por Alpha＜/td＞＜/tr＞
163＜/mesa＞
164
165＜HR＞
166 ＜ancho de tabla="400" border="0" cellpadding="1" cellpacing="1" align="center" ＞
167 ＜tr＞
168 ＜td＞＜color de fuente="rojo"＞*＜/fuente＞＜/td＞
169 ＜td＞Cuenta de usuario:＜/td＞
170 ＜td＞
171 ＜tipo de entrada="texto" nombre="nombre de usuario" maxlength="20" estilo="fondo:#FFFFFF" onBlur="chkUser()" valor=""/＞
172 ＜div id="showStr" style="fondo-color:#FF9900;display:none"＞＜/div＞
173 ＜/td＞
174 ＜/tr＞
175 ＜tr＞
176 ＜td＞＜color de fuente="rojo"＞*＜/font＞＜/td＞
177 ＜td＞Nombre de la empresa:＜/td＞
178＜td＞
179 ＜tipo de entrada="texto" nombre="comNm" maxlength="100" estilo="fondo:#FFFFFF" onBlur="chkComNm()" valor=""/＞
180 ＜div id="comNmStr" style="fondo-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/td＞
183 ＜/tr＞
184 ＜tr＞
185 ＜td＞＜color de fuente="rojo"＞*＜/fuente＞＜/td＞
186 ＜td＞Contraseña de usuario: ＜/td＞
187 ＜td＞＜tipo de entrada="contraseña" nombre="contraseña" maxlength="20" estilo="fondo:#FFFFFF" onBlur="chkcontraseña()"/＞
188 ＜div id="passwordStr" style="fondo-color:#FF9900;display:none"＞＜/div＞
189 ＜/td＞
190 ＜/tr＞
191 ＜tr＞
192 ＜td＞＜color de fuente="rojo"＞*＜/font＞＜/td＞
193 ＜td＞Confirmar contraseña: ＜/td＞
194 ＜td＞＜tipo de entrada="contraseña" nombre="confirmarContraseña" maxlength="20" estilo="fondo:#FFFFFF" onBlur="chkconfirmContraseña()"/＞
195 ＜div id="confirmPasswordStr" style="fondo-color:#FF9900;display:none"＞＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/mesa＞
199
200 <div align="centro">
201 <tipo de entrada="botón" nombre="ok" valor="OK" onclick="checkfield()">
202
203 ＜tipo de entrada="reset" nombre="reset" valor="Cancelar"＞
204 ＜/div＞
205
206＜/formulario＞
207＜/cuerpo＞
208＜/html＞
Utilice JavaScript para crear la clase XmlHttpRequest Después de enviar una solicitud HTTP al servidor, el siguiente paso es decidir qué se debe hacer después de recibir la respuesta del servidor. Esto requiere decirle al objeto de solicitud HTTP qué función de JavaScript usar para manejar la respuesta.
Puede configurar el atributo onreadystatechange del objeto con elnombre de la función JavaScript
que se utilizará, de la siguiente manera:
Creado después de onreadystatechange.Llamamos request.open(): abre el canal de socket con el servidor, utilizando un verbo HTTP (GET o POST) como primer parámetro y la URL del proveedor de datos como segundo parámetro. El último parámetro de request.open() está establecido en verdadero: indica la naturaleza asincrónica de la solicitud. Tenga en cuenta que la solicitud aún no se ha enviado. Con la llamada a request.send(), comienza el envío; esto proporciona cualquier carga útil necesaria para la POST. Cuando usamos solicitudes asincrónicas, debemos usar la propiedad request.onreadystatechanged para asignar la función de devolución de llamada de la solicitud. (Si la solicitud es sincrónica, deberíamos poder procesar los resultados inmediatamente después de llamar a request.send, pero también podemos bloquear al usuario hasta que se complete la solicitud).
Al observar la URL del proveedor de datos, url = "/chkUserAndCom", el servlet es el siguiente:
El siguiente es un fragmento de referencia:
1/**//*
2 * Creado el 31/12/2005
3*
4 * TODO Para cambiar la plantilla para este archivo generado, vaya a
5 * Ventana - Preferencias - Java - Estilo de código - Plantillas de código
6*/
7paquete com.event;
8
9importar javax.servlet.ServletException;
10importar javax.servlet.http.HttpServletRequest;
11importar javax.servlet.http.HttpServletResponse;
12
13importar com.beans.EBaseInfo;
14
15/** *//**
16 * @autor Alfa 2005-12-31
17*
18 * ＜P＞Demostración de Ajax---Comprobación del nombre de usuario y el nombre de la empresa durante el registro empresarial＜/P＞
19*
20 * TODO Para cambiar la plantilla para este tipo de comentario generado, vaya a
21 * Ventana - Preferencias - Java - Estilo de código - Plantillas de código
Veintidós */
23clase pública CheckUserAndComNm {
24 cadena privada msgStr = "";
25 doGet vacío protegido (solicitud HttpServletRequest, respuesta HttpServletResponse)
26 lanzamientos de ServletException
27 {
28
29 EComBaseInfo info=nueva EComBaseInfo();
30 Cadena oprate=request.getParameter("oprate")).trim();
31 Cadena nombre de usuario = request.getParameter ("nombre de usuario");
32 Cadena passWord=request.getParameter("contraseña");
33 Cadena comName=request.getParameter("comName");
34
35 intento
36 {
37 si(oprate.equals("chkUser"))
38 {
39 respuesta.setContentType("text/html;charset=GB2312");
40 if(nombredeusuario.longitud()<5||nombredeusuario.longitud()>20)
41 {
42 msgStr = "Lo sentimos, el nombre de usuario debe contener letras, números o guiones bajos, ¡y la longitud debe ser de 5 a 20 caracteres!";
43}
44 más
45 {
46 boolean bTmp=info.findUser(userName); //Comprueba si el nombre de usuario existe en la base de datos.
47 si(bTmp)
48 msgStr = "Lo sentimos, este nombre de usuario ya existe, ¡cámbielo para registrarse!";
49 más
50 msgStr="";
51 }
52 respuesta.getWriter().write(msgStr);
53}
54 más si(oprate.equals("chkCom"))
55 {
56 respuesta.setContentType("text/html;charset=GB2312");
57 if(nombrecom.longitud()<6||nombrecom.longitud()>100)
58 {
59 msgStr = "Lo sentimos, el nombre de la empresa tiene entre 6 y 100 caracteres (sin incluir los espacios dentro de los caracteres)!";
60 }
61 más
62 {
63 boolean bTmp=info.findCom(comName); //Comprueba si el nombre de la empresa existe en la base de datos.
64 si(bTmp)
65 msgStr = "Lo sentimos, el nombre de esta empresa ya existe. ¡Cambie el nombre de la empresa para registrarse!";
66 más
67 msgStr="";
68 }
69 respuesta.getWriter().write(msgStr);
70
71 }
72 }
73 capturas (Excepción ex)
74 {
75 }
76 finalmente
77 {
78 request.setAttribute("url",url);
79 }
80}
81
82 doPost vacío protegido (solicitud HttpServletRequest, respuesta HttpServletResponse)
83 lanza ServletException
84 {
85 doGet(solicitud,respuesta);
86}
87}
88
Resumen de tecnología AJAX
1. AJAX (JavaScript asíncrono y Xml) es una tecnología de programación que combina tecnología Java, Xml y JavaScript. Le permite crear aplicaciones web basadas en tecnología Java y rompe la convención de usar la recarga de páginas.
2. AJAX, JavaScript asíncrono y Xml, es un método de desarrollo de aplicaciones web que utiliza scripts del lado del cliente para intercambiar datos con el servidor web. De esta forma, la página Web se puede actualizar dinámicamente sin interrumpir el proceso de interacción y volver a editarla. Con AJAX, puede crear una interfaz de usuario web directa, de alta disponibilidad, más rica y más dinámica, similar a las aplicaciones de escritorio nativas.
3. Para Mozilla.Netscape, Safari, Firefox y otros navegadores, el método para crear XmlHttpRequest es el siguiente:
Xmlhttp_request=
new XmlHttpRequest()
4. IE y otros navegadores para crear XmlHttpRequest de la siguiente manera:
ActiveXObject("Microsoft.XmlHTTP"); 5.Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. El primer parámetro de open() es el método de solicitud HTTP: GET, POST o cualquier método que admita su servidor. Según la especificación HTTP, este parámetro está en mayúscula; de lo contrario, es posible que algunos navegadores (como Firefox) no puedan manejar la solicitud. El segundo parámetro es la URL de la página solicitada. El tercer parámetro establece si la solicitud está en modo asíncrono. Si es VERDADERO, la función JavaScript continuará ejecutándose sin esperar una respuesta del servidor. Esta es la "A" en "AJAX".
Si la tecnología AJAX se utiliza bien, agregará muchos efectos amigables a nuestras páginas web y brindará a los usuarios una mejor sensación. AJAX es algo bueno.