O exemplo que dei é uma aplicação quando um usuário corporativo se cadastra Quando o usuário se cadastra, ele verifica se o nome do usuário e a razão social estão disponíveis. O método anterior era adicionar um botão ao lado, clicar em “Verificar”, enviar uma solicitação. para o servidor e depois Aguarde...o servidor retorna informações e continua a operação.
Se usarmos a tecnologia AJAX para implementar as operações acima, não teremos que esperar que o servidor retorne as informações. Quando o usuário inserir o nome de usuário ou o nome da empresa, quando a caixa de texto de entrada perder o foco, uma solicitação será enviada automaticamente para. o servidor, e o usuário continuará a realizar as seguintes operações, não há necessidade de clicar em "Verificar" ou esperar que o servidor retorne as informações. A verificação e a operação do usuário são assíncronas e podem ser realizadas ao mesmo tempo. Quando as informações do servidor são retornadas, as informações retornadas serão exibidas automaticamente no local correspondente da página sem atualizar a página, o que equivale a um efeito de atualização parcial. Vejamos o código abaixo.
O código completo da página HTML é o seguinte:
A seguir está um fragmento citado:
1＜ %@page idioma="java" contentType="text/html;charset=GBK"%＞
2＜linguagem script="javascript" type="text/javascript">
3＜!--
4/**//**Ajax iniciado por Alpha 31/12/2005*/
5
6 var http = getHTTPObject();
7
8 funções handleHttpResponse(){
9 se(http.readyState == 4){
10 se(http.status == 200){
11 var xmlDocument = http.responseXML;
12 if(http.responseText!=""){
13 document.getElementById("showStr").style.display = "";
14 document.getElementById("userName").style.background= "#FF0000";
15 document.getElementById("showStr").innerText = http.responseText;
16 }outro{
17 document.getElementById("userName").style.background= "#FFFFFF";
18 document.getElementById("showStr").style.display = "none";
19}
20
vinte e um }
22 outros{
23 alert("A página que você solicitou é anormal, o que pode afetar sua navegação nas informações desta página!");
24 alerta(http.status);
25}
26}
27}
28
29 função handleHttpResponse1(){
30 se(http.readyState == 4){
31 se(http.status == 200){
32 var xmlDocument = http.responseXML;
33 if(http.responseText!=""){
34 document.getElementById("comNmStr").style.display = "";
35 document.getElementById("comNm").style.background= "#FF0000";
36 document.getElementById("comNmStr").innerText = http.responseText;
37 }outro{
38 document.getElementById("comNm").style.background= "#FFFFFF";
39 document.getElementById("comNmStr").style.display = "none";
40}
41
42}
43 outros{
44 alert("A página que você solicitou é anormal, o que pode afetar sua navegação nas informações desta página!");
45 alerta(http.status);
46}
47}
48}
49
50 função chkUser(){
51 var url = "/chkUserAndCom";
52 var nome = document.getElementById("userName").value;
53 url += ("&userName="+nome+"&oprate=chkUser");
54 http.open("GET",url,true);
55 http.onreadystatechange = handleHttpResponse;
56 http.enviar(nulo);
57 retorno;
58}
59 função chkComNm(){
60 var url = "/chkUserAndCom";
61 var nome = document.getElementById("comNm").value;
62 url += ("&comName="+nome+"&oprate=chkCom");
63 http.open("GET",url,true);
64 http.onreadystatechange = handleHttpResponse1;
65 http.enviar(nulo);
66 retorno;
67}
68
69 //Esta função pode criar o objeto XMLHttpRequest que precisamos
70 função getHTTPObject(){
71 var xmlhttp = falso;
72 if(window.XMLHttpRequest){
73 xmlhttp = novo XMLHttpRequest();
74 if(xmlhttp.overrideMimeType){
75 xmlhttp.overrideMimeType('texto/xml');
76}
77}
78 mais{
79 tente{
80 xmlhttp = novo ActiveXObject("Msxml2.XMLHTTP");
81 }pegar(e){
82 tente{
83 xmlhttp = novo ActiveXObject("Microsoft.XMLHTTP");
84 }pegar(E){
85 xmlhttp = falso;
86}
87}
88}
89 retornar xmlhttp;
90}
91/**//**Ajax termina*/
92
93 //Formulário de detecção
94função chkpassword()
95{
96 var m=document.form1;
97 if(len(m.senha.valor) ＞ 20 || len(m.senha.valor) ＜ 5 || !isStr(m.senha.valor))
98 {
99 document.getElementById("passwordStr").style.display = "";
100 document.getElementById("senha").style.background= "#FF0000";
101 document.getElementById("passwordStr").innerText = "Desculpe, a senha deve conter letras, números ou sublinhados em inglês e o comprimento é de 5 a 20!";
102}
103 mais
104 {
105 document.getElementById("senha").style.background= "#FFFFFF";
106 document.getElementById("passwordStr").style.display = "none";
107}
108}
109
110função chkconfirmPassword()
111{
112 var m=documento.form1;
113 if (m.password.value! = m.confirmPassword.value)
114 {
115 document.getElementById("confirmPasswordStr").style.display = "";
116 document.getElementById("confirmPassword").style.background= "#FF0000";
117 document.getElementById("confirmPasswordStr").innerText = "Desculpe, a senha é inconsistente com a senha repetida!";
118}
119 mais
120 {
121 document.getElementById("confirmPassword").style.background= "#FFFFFF";
122 document.getElementById("confirmPasswordStr").style.display = "none";
123}
124}
125
Campo de verificação de 126 funções()
127{
128 var m=documento.form1;
129 if(m.userName.value.length==0)
130 {
131 alert("Desculpe, o nome de usuário deve conter letras, números ou sublinhados em inglês e o comprimento é de 5 a 20.");
132 m.userName.focus();
133 retorna falso;
134}
135 if(m.senha.valor.comprimento==0)
136 {
137 alert("Desculpe, a senha deve conter letras, números ou sublinhados em inglês e o comprimento é de 5 a 20.");
138 m.password.focus();
139 retorna falso;
140}
141 if (m.password.value! = m.confirmPassword.value)
142 {
143 alert("Desculpe, a senha é inconsistente com a senha repetida!");
144 m.confirmPassword.focus();
145 retorna falso;
146}
147 if(m.comNm.valor.comprimento==0)
148 {
149 alert("Desculpe, o nome da empresa não pode ficar vazio!!");
150 m.comNm.focus();
151 retorna falso;
152}
153 m.submit();
154}
155
156//-->
157＜/roteiro＞
158＜corpo topmargin="0">
159＜form name="form1" method="post" action="/Control?act=Register"＞
160＜largura da tabela="100%">
161 ＜tr＞＜td align="center"＞ ＜H2＞Programa de demonstração Ajax＜/H1＞＜/td＞＜/tr＞
162 ＜tr＞＜td align="center"＞ ------ Registro Empresarial por Alpha＜/td＞＜/tr＞
163＜/mesa＞
164
165＜RH＞
166 ＜table width="400" border="0" cellpadding="1" cellpacing="1" align="center" ＞
167＜tr＞
168 ＜td＞＜cor da fonte="vermelho"＞*＜/font＞＜/td＞
169 ＜td＞Conta de usuário:＜/td＞
170 ＜td＞
171 ＜input type="text" name="userName" maxlength="20" style="background:#FFFFFF" onBlur="chkUser()" value=""/＞
172 ＜div id="showStr" style="background-color:#FF9900;display:none"＞＜/div＞
173 ＜/td＞
174 ＜/tr＞
175 ＜tr＞
176 ＜td＞＜font color="red"＞*＜/font＞＜/td＞
177 ＜td＞Nome da empresa:＜/td＞
178＜td＞
179 ＜input type="text" name="comNm" maxlength="100" style="background:#FFFFFF" onBlur="chkComNm()" value=""/＞
180 ＜div id="comNmStr" style="background-color:#FF9900;display:none"＞＜/div＞
181
182 ＜/td＞
183＜/tr＞
184＜tr＞
185 ＜td＞＜cor da fonte="vermelho"＞*＜/font＞＜/td＞
186 ＜td＞Senha do usuário: ＜/td＞
187 ＜td＞＜input type="password" name="password" maxlength="20" style="background:#FFFFFF" onBlur="chkpassword()"/＞
188 ＜div id="passwordStr" style="background-color:#FF9900;display:none"＞＜/div＞
189 ＜/td＞
190 ＜/tr＞
191＜tr＞
192 ＜td＞＜cor da fonte="vermelho"＞*＜/font＞＜/td＞
193 ＜td＞Confirmar senha: ＜/td＞
194 ＜td＞＜input type="password" name="confirmPassword" maxlength="20" style="background:#FFFFFF" onBlur="chkconfirmPassword()"/＞
195 ＜div id="confirmPasswordStr" style="background-color:#FF9900;display:none"＞＜/div＞
196 ＜/td＞
197 ＜/tr＞
198 ＜/tabela＞
199
200 <div alinhar="centro">
201 <input type="button" name="ok" value=" OK" onclick="checkfield()">
202
203 ＜input type="reset" nome="reset" valor="Cancelar"＞
204 ＜/div＞
205
206＜/formulário＞
207＜/corpo＞
208＜/html＞
Use JavaScript para criar a classe XmlHttpRequest Depois de enviar uma solicitação HTTP ao servidor, a próxima etapa é decidir o que precisa ser feito após receber a resposta do servidor. Isso requer informar ao objeto de solicitação HTTP qual função JavaScript usar para lidar com a resposta.
Você pode definir o atributo onreadystatechange do objeto como onome da função JavaScript
a ser usada, como segue:
Criado após onreadystatechange.Chamamos request.open() - ele abre o canal de soquete com o servidor, usando um verbo HTTP (GET ou POST) como primeiro parâmetro e a URL do provedor de dados como segundo parâmetro. O último parâmetro de request.open() é definido como true - indica a natureza assíncrona da solicitação. Observe que a solicitação ainda não foi enviada. Com a chamada para request.send(), o envio começa - isso fornece qualquer carga útil necessária para o POST. Ao usar solicitações assíncronas, devemos usar a propriedade request.onreadystatechanged para atribuir a função de retorno de chamada da solicitação. (Se a solicitação for síncrona, poderemos processar os resultados imediatamente após chamar request.send, mas também podemos bloquear o usuário até que a solicitação seja concluída.)
Observando o URL do provedor de dados, url = "/chkUserAndCom" , o servlet é o seguinte:
A seguir está um fragmento de referência:
1/**//*
2 * Criado em 31/12/2005
3*
4 * TODO Para alterar o modelo deste arquivo gerado vá para
5 * Janela - Preferências - Java - Estilo de código - Modelos de código
6*/
7pacote 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 31/12/2005
17*
18 * ＜P＞Demonstração Ajax---Verificando o nome de usuário e o nome da empresa durante o registro da empresa＜/P＞
19*
20 * TODO Para alterar o modelo deste tipo de comentário gerado vá para
21 * Janela - Preferências - Java - Estilo de código - Modelos de código
vinte e dois */
23classe pública CheckUserAndComNm {
24 string privada msgStr = "";
25 void protegido doGet (solicitação HttpServletRequest, resposta HttpServletResponse)
26 lança ServletException
27 {
28
29 EComBaseInfo info=new EComBaseInfo();
30 String oprate=request.getParameter("oprate")).trim();
31 String userName=request.getParameter("userName");
32 String passWord=request.getParameter("senha");
33 String comNome=request.getParameter("comNome");
34
35 tentativas
36 {
37 if(oprate.equals("chkUser"))
38 {
39response.setContentType("text/html;charset=GB2312");
40 if(userName.length()<5||userName.length()>20)
41 {
42 msgStr = "Desculpe, o nome de usuário deve conter letras, números ou sublinhados e o comprimento deve ser de 5 a 20 caracteres!";
43}
44 mais
45 {
46 boolean bTmp=info.findUser(userName); //Verifica se o nome de usuário existe no banco de dados
47 se(bTmp)
48 msgStr = "Desculpe, este nome de usuário já existe, altere o nome de usuário para registrar!";
49 mais
50 msgStr="";
51}
52 resposta.getWriter().write(msgStr);
53}
54 senão if(oprate.equals("chkCom"))
55 {
56response.setContentType("text/html;charset=GB2312");
57 if(comNome.comprimento()<6||comNome.comprimento()>100)
58 {
59 msgStr = "Desculpe, o nome da empresa tem de 6 a 100 caracteres (excluindo espaços entre os caracteres)!";
60}
61 mais
62 {
63 boolean bTmp=info.findCom(comName); //Verifica se o nome da empresa existe no banco de dados
64 se(bTmp)
65 msgStr = "Desculpe, o nome desta empresa já existe, por favor altere o nome da empresa para registrar!";
66 mais
67 msgStr="";
68}
69 resposta.getWriter().write(msgStr);
70
71}
72}
73 captura (exceção ex)
74 {
75}
76 finalmente
77 {
78 request.setAttribute("url",url);
79}
80}
81
82 protegido void doPost (solicitação HttpServletRequest, resposta HttpServletResponse)
83 lança ServletException
84 {
85 doGet(solicitação,resposta);
86}
87}
88
Resumo da tecnologia AJAX
1. AJAX (Asynchronous JavaScript and Xml) é uma tecnologia de programação que combina tecnologia Java, Xml e JavaScript. Ela permite construir aplicativos da Web baseados na tecnologia Java e quebra a convenção de uso de recarregamento de página.
2. AJAX, JavaScript assíncrono e Xml, é um método de desenvolvimento de aplicativos da Web que usa scripts do lado do cliente para trocar dados com o servidor da Web. Desta forma, a página Web pode ser atualizada dinamicamente sem interromper o processo de interação e reeditá-la. Usando AJAX, você pode criar uma interface de usuário da Web direta, altamente disponível, mais rica e mais dinâmica, próxima aos aplicativos de desktop nativos.
3. Para Mozilla.Netscape, Safari, Firefox e outros navegadores, o método para criar XmlHttpRequest é o seguinte:
Xmlhttp_request=
new XmlHttpRequest();
;5. Xmlhttp_request.open('GET', URL, true); Xmlhttp_request.send(null);
6. O primeiro parâmetro de open() é o método de solicitação HTTP - GET, POST ou qualquer método que seu servidor suporte. De acordo com a especificação HTTP, este parâmetro está em maiúscula, caso contrário, alguns navegadores (como o Firefox) podem não conseguir lidar com a solicitação. O segundo parâmetro é o URL da página solicitada. O terceiro parâmetro define se a solicitação está em modo assíncrono. Se for TRUE, a função JavaScript continuará a execução sem esperar por uma resposta do servidor. Este é o "A" em "AJAX".
Se a tecnologia AJAX for bem utilizada, ela adicionará muitos efeitos amigáveis às nossas páginas da web e proporcionará aos usuários uma sensação melhor. AJAX é uma coisa boa.