Ajax com Java - um exemplo que não carrega

Programação Java
#1

Bom dia, povo do Guj.

Estou fazendo um estudo sobre Ajax com Java, mas logo no primeiro exemplo do livro, deu crepe e não funcionou. O livro é meio antigo (2007 se não me engano) e eu criei um projeto Dynamic Web Project no Eclipse para trabalhar com três arquivos, por enquanto. Mas não está carregando a tela que o livro desenvolveu com html, ajax e um pouco de JavaScript. São três arquivos, os quais eu vou mandar nesta mensagem. Ainda não tem nenhum arquivo .java mas vai ter no futuro. Tentei carregar pelo Chrome (navegador) mas apenas mudou a cor da tela (background). Gente, se vocês puderem dizer o que está errado com os arquivos e porque ele não carrega, eu agradeço. Aí vão os três arquivos (index.html, ajax.js e style.css):

Arquivo: index.html

<!DOCTYPE html>
<html>
<head>

<meta charset="ISO-8859-1">

<link rel="stylesheet" type="text/css" href="style.css" />
<SCRIPT language="JavaScript" src="ajax.js" />
<title>Ajax com Java</title>

</head>

<body onload="focusIn();">

	<h1>DECODIFICADOR DE CARACTERES DO AJAX</h1>
	<h2>Pressione uma tecla para encontrar seu valor.</h2>

	<table>
		<tr>
			<td>
				Entrar com a tecla aqui ->
				<input type="text" id="key" onkeyup="convertToDecimal();" />
			</td>
		</tr>
	</table>

	<br/>

	<table>
		<tr>
			<td	colspan="5" style="border-bottom:solid black 1px;">
				Tecla Pressionada:
				<input type="text" readonly id="keypressed" />
			</td>
		</tr>
		<tr>
			<td>
				Decimal
			</td>
		</tr>
		<tr>
			<td>
				<input type="text" readonly id="decimal" />
			</td>
		</tr>
	</table>

</body>
</html>

Arquivo: ajax.js

var req;
function convertToDecimal() {
	var key = document.getElementById("key");
	var keypressed = document.getElementById("keypressed");
	keypressed.value = key.value;
	var url = "/ajaxdecimalconverter/response?key="+escape(key.value);
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP");	
	}
	req.open("Get", url, true);
	req.onreadystatechange = callback;
	req.send(null);
}

function callback() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			var decimal = document.getElementById("decimal");
			decimal.value = req.responseText
		}
	}
	clear;
}

function clear() {
	var key = document.getElementById("key");
	key.value="";
}

function focusIn() {
	document.getElementById("key").focus();
}

Arquivo: style.css

@charset "ISO-8859-1";

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: center;
	background: #cbdada;
}

#keypressed {
	width: 30;
	border: none;
}

#key {
	width: 20px;
	padding: 0;
	margin: 0;
	border: none;
	text-align: left;
}

h1, h2 {
	font-size: 120%;
	text-align: center;
}

h2 {
	font-size: 110%;
}

table, input {
	margin-left: auto;
	margin-right: auto;
	padding: 0px 10px;
	text-align: center;
	background: #a0f6f5;
	border: solid black 1px;
}

td {
	margin: 10px 10px;
	padding: 0px 5px;
	border: none;
}

input {
	width: 80;
	border: none;
	border-top: solid #999999 1px;
	font-size: 80%;
	color: #555555;
}

Fico muito agradecido,
Atenciosamente,
Ronaldo

#2

Está aparecendo algum erro no console do navegador?

#3

O que devo fazer?

#4

Abra a página que vc fez no navegador e use o atalho F12 para abrir o console (talvez seja necessário seleciona a aba console caso ela não venha aberta). Depois só ver se está aparecendo algum erro.