Olá,
peguei um exemplo para fazer AJAX mas não chama o servlet e não carrega list box com informações o que estou fazendo de errado....
O que fiz : (Tomcat 6,Eclipse Version: 3.4.0)
criei um projeto Dynamic Web
criei a servlet embaixo do src default ServletAjax
criei o jsp em WebContent --> index.jsp
quando clico no estado não chama o servlet e portanto não carrega as cidades no list box ????
duvida o que faz nessa linhavar url = "ajax?uf="+escape(uf);
Onde estou errando ....
se alguém puder me ajudar ...
abs
--servlet
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ServletAjax extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println("to no servlet....");
String uf = request.getParameter("uf");
String retorno = "<?xml version='1.0' ?><root>";
if(uf.equalsIgnoreCase("CE")){
retorno += "<estado>"+
"<cidade nome='Caucaia'>"+
"<javaneses>15</javaneses>"+
"</cidade>"+
"<cidade nome='Fortaleza>"+
"<javaneses>400</javaneses>"+
"</cidade>"+
"<cidade nome='Sobral'>"+
"<javaneses>1</javaneses>"+
"</cidade>"+
"</estado>";
}else if(uf.equalsIgnoreCase("PB")){
retorno += "<estado>"+
"<cidade nome='João Pessoa'>"+
"<javaneses>200</javaneses>"+
"</cidade>"+
"</estado>";
}else if(uf.equalsIgnoreCase("PE")){
retorno += "<estado>"+
"<cidade nome='Recife'>"+
"<javaneses>550</javaneses>"+
"</cidade>"+
"<cidade nome='Olinda'>"+
"<javaneses>30</javaneses>"+
"</cidade>"+
"</estado>";
}
retorno += "</root>";
response.setContentType("text/xml;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write(retorno);
}
}
------index.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/JavaScript">
var req;
var isIE;
function initRequest(url) {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function atualizaCidades(uf){
if(uf != ''){
var url = "ajax?uf="+escape(uf);
initRequest(url);
req.onreadystatechange = processRequest;
req.open("GET", url, true);
req.send(null);
}else{
var html = "<SELECT NAME='Cidades'><OPTION value=''>----</OPTION></SELECT>";
document.getElementById("DivCidades").innerHTML = html;
}
}
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var xml = req.responseXML;
var html = "<SELECT NAME='Cidades' onChange='if(this.value!=\"\"){alert(\"Javaneses = 32.\"+this.value);}'><OPTION value=''>--Selecione Cidade--</OPTION>";
var documento = xml.childNodes[0].nodeName;
var estados = xml.getElementsByTagName("estado");
for(i = 0; i < estados.length; i++){
var cidades = estados[i].getElementsByTagName("cidade");
for(j = 0; j < cidades.length; j++){
var nomeCidade = cidades[j].getAttribute("nome"); 39. var javaneses = cidades[j].getElementsByTagName("javaneses").item(0).firstChild.data;
html += "<OPTION value='"+javaneses+"'>"+nomeCidade+"</OPTION>";
}
}
html += "</SELECT>";
document.getElementById("DivCidades").innerHTML = html;
}
}
}
</script>
</head>
<body>
<form method="post" name="frm">
<h2>Tutorial de Ajax - Cejug 4Java</h2>
<h4>Estado:</h4>
<SELECT NAME='Estados' onchange="atualizaCidades(this.value);">
<OPTION value=''>--Selecione--</OPTION>
<OPTION value='CE'>Ceará</OPTION>
<OPTION value='PB'>Paraíba</OPTION>
<OPTION value='PE'>Pernambuco</OPTION>
</SELECT>
<h4>Cidade:</h4>
<div id="DivCidades" style="position: static;">
<SELECT NAME='Cidades'><OPTION value=''>----</OPTION></SELECT>
</div>
</form>
</body>
</html>
-------web.xml
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>ServletAjax</display-name>
<servlet-name>ServletAjax</servlet-name>
<servlet-class>ServletAjax</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServletAjax</servlet-name>
<url-pattern>/ServletAjax</url-pattern>
</servlet-mapping>