I'm trying to insert a script to make a div refresh with javascript/ajax. I found the following code. I don't put prova.asp page because it contains only a response.write "Hello" (then I will modify with database query). This code returns a 404 error and I do not understand why. The only URL is prova.asp and this file is in the same folder.
Anyone can tell me where I'm wrong? the mistake is mine but I don't know what it is.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
//If our user enters data in the username input, then we need to enable our button
function OnChangedUsername(){
if(document.form1.newuserid.value == ""){
document.form1.btnCheckAvailability.disabled = true;
}
else
{
document.form1.btnCheckAvailability.disabled = false;
}
}
function OnCheckAvailability(){
if(window.XMLHttpRequest){
oRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
oRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
oRequest.open("POST", "prova.asp", true);
oRequest.onreadystatechange = UpdateCheckAvailability;
oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oRequest.send("strCmd=availability&strUsername=" + document.form1.newuserid.value);
}
function UpdateCheckAvailability(){
if(oRequest.readyState == 4){
if(oRequest.status == 200){
document.getElementById("Available").innerHTML = oRequest.responseText;
}
else
{
document.getElementById("Available").innerHTML = "Asynchronous Error";
}
}
}
</script>
</head>
<body>
<form method="post" action="javascript:void(0);" name="form1">
<table cellspacing="0">
<tr>
<th><label for="newuserid">Username:</label></th>
<td><input type="newuserid" name="newuserid" id="newuserid" size="20" onKeyUp="OnChangedUsername();"/></td>
<td><input id="btnCheckAvailability" type="button" disabled="disabled" value="Check Availability" onClick="OnCheckAvailability();"></td>
<td><div id="Available"></div></td>
</tr>
</table>
</form>
</body>
</html>Maybe, the browser try to first execute the script.
Add your script before closing div tag.
<body>
...
...
<script .... >
.....
</script>
</body>
Or try to add defer
<body>
...
...
<script .... defer>
.....
</script>
</body>
Or async
<body>
...
...
<script .... async >
.....
</script>
</body>