[AJAX] [Ajax|JSP] Problème de récéption
Bonjour.
Dans le cadre d'un devoir scolaire j'essaye de faire un Morpion avec Ajax et JSP.
Bon le JSP n'est pas le problème, le soucis réside au niveau de mon code ajax, j'ai dû mal à le faire fonctionner correctement !
Voici le code:
index.html
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="author" content="Miloud BELKACEM" />
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<title> My first ajax page </title>
</head>
<body> <center>
<p>
<h1>Morpion</h1>
</p>
<script type="text/javascript" src="stuff.js"></script>
<table border="1">
<tr>
<td> <input id="b1" style="width:40px;" type="button" value = "-" onclick="Checked(1);"/> </td>
<td> <input id="b2" style="width:40px;" type="button" value = "-" onclick="Checked(2);"/> </td>
<td> <input id="b3" style="width:40px;" type="button" value = "-" onclick="Checked(3);"/> </td>
</tr>
<tr>
<td> <input id="b4" style="width:40px;" type="button" value = "-" onclick="Checked(4);"/> </td>
<td> <input id="b5" style="width:40px;" type="button" value = "-" onclick="Checked(5);"/> </td>
<td> <input id="b6" style="width:40px;" type="button" value = "-" onclick="Checked(6);"/> </td>
</tr>
<tr>
<td> <input id="b7" style="width:40px;" type="button" value = "-" onclick="Checked(7);"/> </td>
<td> <input id="b8" style="width:40px;" type="button" value = "-" onclick="Checked(8);"/> </td>
<td> <input id="b9" style="width:40px;" type="button" value = "-" onclick="Checked(9);"/> </td>
</tr>
</table>
<br/>
<div id="ResDiv"></div>
<br/>
<input id="btnRestart" type="button" value = "Restart" onclick="Restart();"/>
</center>
</body>
</html> |
stuff.js
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
|
var xmlHttp;
function CreateAjaxObject ()
{
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
alert("Your browser does not support AJAX!");
xmlHttp = null;
}
}
}
return xmlHttp;
}
function SetCheck (BtnID, player)
{
document.getElementById(BtnID).value = player;
}
function Show (what)
{
var obj = document.getElementById("ResDiv");
document.getElementById("ResDiv").innerHTML = what;
}
function onReady()
{alert("aplha");
if(xmlHttp.readyState==4){
var response = xmlHttp.responseText;
if (response == '10') // You win
{
Show("<p style=\"color:green;\">Nice !</p>");
}
else
if (response == '20')// He win
{
Show("<p style=\"color:red;\">Loooooser !</p>");
}
else
{
SetCheck ('b'+response, 'X');
}
}
}
function getCombo ()
{
var combo = '';
var bid;
var i;
for (i=1; i<10; i++){
bid = document.getElementById('b'+i).value;
if (bid == '-')
combo = combo + '0';
else
if (bid == 'O')
combo = combo + '1';
else
if (bid == 'X')
combo = combo + '2';
}
return combo;
}
function isChecked (ischck)
{
return (document.getElementById('b'+ischck).value != '-');
}
function Checked (check)
{
if (isChecked(check))
{
alert ("Don't think you could fool me !");
}
else
{
SetCheck ('b'+check, 'O');
xmlHttp = CreateAjaxObject();
if (xmlHttp != null){
xmlHttp.onreadyStatechange = onReady();
xmlHttp.open("GET","page.jsp?combo=" + getCombo(),true);
xmlHttp.send(null);
}
}
}
function Restart()
{
var i;
for (i=1; i<10; i++)
document.getElementById('b'+i).value = '-';
} |
page.jsp
j'ai uniquement mis dedans: "10" pour tester j'ai pas encore incorporé mon code.
Alors le problème c'est que je reçoit pas de réponse après avoir xmlHttp.send(null), alors j'ai essayé de modifier genre mettre l'assignation du onStateChange après le send et là magique ça marche, MAIS ça ne marche que si je met un alert('quelque chose'); au début de ma fonction onReady().
Cependant avec le code ci dessus, rien ne va j'ai jamais le status 4.
Est-ce normal ?
Merci d'avance