O problema de tentar usar ajax sem conhecê-lo mais profundamente, é exatamente este.
A primeira coisa a saber é que AJAX não é uma tecnologia isolada ou nova. Asynchronous Javascript and XML é uma série de ferramentas que associam Javascript e XML sobre o protocolo Http (por isso o XMLHttpRequest).
A segunda coisa a saber é que diferentes browsers tratam o Ajax de forma distinta. Afinal, temos o objeto de XMLHttpRequest e o objeto de ActiveXObject
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
A terceira coisa a saber é que o AJAX possui dois padrões de retorno, o responseText e o responseXml.
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
e
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
A quarta é o evento onreadystatechange, que indica se o estado da requisição foi alterado e, de acordo com tal alteração, irá (ou não) executar algo.
Este evento possui 5 possíveis ocorrências:
Além destes, temos os status da requisição, os mesmos que controlam coisas como a conexão ok (status 200), página não encontrada (status 404), erro interno no servidor (status 500), acesso não permitido (status 403).
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Ok, e onde tudo isso se encaixa com o java?
Bom, a primeira coisa a saber é que a mágica está no processo todo, mas, principalmente, no response. Como assim?
Qual o ciclo de vida de uma requisição a um aplicativo java web que parte de um elemento para uma Servlet que redireciona a requisição a uma jsp?
A requisição parte do html em direção a Servlet (através do método GET, pois trata-se de um link) (Passa do readystate 0 para 1).
A Servlet processará o que está programado no método doGet (readystate de 1 para 2), que invocará os métodos e fará os redirecionamentos necessários até concluir a requisição (readystate de 2 para 3).
O fim da requisição é a geração do html que será exibido como resultado do processamento da jsp (readystate 4).
Quando o readystate é 4, significa que o responseText ou responseXml está pronto e será enviado ao requisitor (browser, no caso). Sendo assim, o status da requisição poderá ser 200, 404, 403, 500.
Assim que a função javascript onde o evento onreadystatechange está sendo tratado receber o retorno da requisição (responseText ou responseXml), a mágica é finalizada de acordo com o que foi programado.
Vamos fazer um teste?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Ex Ajax</title>
<script type="text/javascript">
var ajax;
if (window.XMLHttpRequest){
ajax=new XMLHttpRequest();
}
else{
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
function chamadaAjax(url, div){
ajax.onreadystatechange = function(){
if(ajax.readyState == 1){
document.getElementById(div).innerHTML = '<h1>Aguarde, carregando...</h1>';
}
if(ajax.readyState == 4 && ajax.status == 200){
document.getElementById(div).innerHTML = ajax.responseText;
}
}
ajax.open("GET", url, true);
ajax.send(null);
}
</script>
</head>
<body>
<div id="header">
<a href="#" onclick="chamadaAjax('AjaxServlet?tmp=5000', 'corpo');">Processar</a>
</div>
<div id="corpo"></div>
</body>
</html>
AjaxServlet
package br.com.ajax.teste.servlets;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
long millis = Long.parseLong(request.getParameter("tmp"));
Thread.sleep(millis);
}catch(InterruptedException ie){
PrintWriter out = response.getWriter();
out.println("<html><body><h1>Erro: Não foi possível processar a requisição</h1></body></html>");
out.close();
}
response.sendRedirect("ajax.jsp");
}
}
ajax.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ex. Ajax</title>
</head>
<body>
<p>Se tudo deu certo, o texto será exibido no local da div corpo.</p>
<p>Será que funcionou?</p>
<a href="index.html">Voltar de forma síncrona</a>
</body>
</html>
Assim como praticamente tudo na vida, partindo destes pequenos passos, você consegue ir muito além.
Ah, ia esquecendo, a base para esta resposta foi obtida aqui