ajax problem

Pompiuses

05-30-2006, 09:35 AM

I've made a small AJAX script (see below). All it does is make a request to server (when onblur on the input box), gets some xml back from the server and then prints a div-tag on the html page based on the xml.

This all works fine, but it only works one time. Then I have to reload the page for it to work again. Why?? (i'm using IE6 on winxp)

The code is based on this tutorial:
http://www.webpasties.com/xmlHttpRequest/xmlHttpRequest_tutorial_1.html

Perhaps the problem lies within the getHTTPObject() method (which I've just copied from the tutorial)?

</html>
<head>
<script language="javascript" type="text/javascript">

// The url to post to
var url = "http://localhost:8080/secrets/webServices/ajaxValidation.jsp";

// Posts the username to server for validation using AJAX (the http object)
function validateUsername() {
var usernameValue = document.getElementById("username").value;
var ajaxValue = "true";
var registerValue = "true";

var parameters = "username=" + encodeURI(usernameValue) +
"&ajaxValidation=" + encodeURI(ajaxValue) +
"&registerValidation=" + encodeURI(registerValue);

http.onreadystatechange = handleUsernameHttpResponse;

http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.send(parameters);
}

// handles the response from the server
function handleUsernameHttpResponse() {
if (http.readyState == 4) { // wait until request is completed
if(http.status == 200) { // check that request is ok
var xmlDocument = http.responseXML; // Use the XML DOM to unpack the xml
var error = xmlDocument.getElementsByTagName('error').item(0).firstChild.data;
document.getElementById('usernameErr').innerHTML = "";

if(error == -1){ // -1 means no error.
document.getElementById('usernameErr').innerHTML = "";
document.getElementById('usernameOK').innerHTML = "Legal username";
}else{
document.getElementById('usernameOK').innerHTML = "";
document.getElementById('usernameErr').innerHTML = "Illegal name";
}
}
}
}

// Creates an HTTP object to enable communication to the server
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // Create the HTTP object

</script>
</head>

<body>
<div style="color:#FF0000;" id="usernameErr"></div>
<div id="usernameOK"></div>
<br />
<table border="0" width="100%">
<tr>
<td><input type="text" size="20" value="" name="username" id="username" onblur="validateUsername();"></td>
</tr>
</table>
</body>
</html>

jskaar

05-30-2006, 10:06 AM

Pompiuses

05-30-2006, 11:32 AM

When javascipt related things just works once in IE, it is often because something fails some place during the first execution. Is there any error messages? You could also try using Firefox and open the Javascript console. This often makes error finding much easier...

I tried to run the same code in firefox as you suggested, and got this error message:
Uncaught execption: Permission denied to call method XMLHttpRequest.open.

So it's the line "http.open("POST", url, true);" that failes in method validateUsername() with a "Permission denied" error.

The question now is why?

jskaar

05-30-2006, 11:39 AM

http.open("POST", url, true);

Why are you using POST and not GET as the tutorial?

The method could have GET or POST (or PUT). We use GET when we want to get some data and POST when we are sendign data. If we are sending more data than 512 byte we have to use POST.

Perhaps you could send the username with the url? In the query string? I'm not jet that familiar with sending a form that way.

Pompiuses

05-30-2006, 12:19 PM

Found this: http://www.webdeveloper.com/forum/showthread.php?t=97916

So I change method validateUsername(), see code below, and got it to work in IE. But Firefox and Opera still gives me permission denied though :confused:!??

function validateUsername() {

var usernameValue = document.getElementById("username").value;
var ajaxValue = "true";
var registerValue = "true";

var parameters = "username=" + encodeURI(usernameValue) +
"&ajaxValidation=" + encodeURI(ajaxValue) +
"&registerValidation=" + encodeURI(registerValue);

try {
http.open("POST", url, true);
http.onreadystatechange = handleUsernameHttpResponse;
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded;");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.send(parameters);
} catch (e) {
alert("An error occured: "+e);
}
}

Pompiuses

05-30-2006, 12:54 PM

Found the problem: http://www.captain.at/howto-ajax-permission-denied-xmlhttprequest.php

Isn't ajax fun :mad:....

jskaar

05-30-2006, 12:56 PM

ahhhhh, doh!

A1ien51

05-30-2006, 01:16 PM

The problem with IE is not the XDomain thing that Firefox has an issue with. It is rather simple. You create the XMLHttpRequest object once and reuse it. Problem is you are reusing it wrong.

In order to reuse it these two lines:

http.onreadystatechange = handleUsernameHttpResponse;
http.open("POST", url, true);

need to be in this order:
http.open("POST", url, true);
http.onreadystatechange = handleUsernameHttpResponse;

If you do not do this, IE will work only once as you have seen.

Eric