Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: ajax problem

  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ajax problem

    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/xmlHttpReq...utorial_1.html

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

    Code:
    </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>
    Last edited by Pompiuses; 05-30-2006 at 09:40 AM.

  • #2
    New Coder
    Join Date
    Jan 2006
    Location
    Oslo, Norway
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Drømmejenta: Kristen jente som progger Python!

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jskaar
    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?

  • #4
    New Coder
    Join Date
    Jan 2006
    Location
    Oslo, Norway
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pompiuses
    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.
    Last edited by jskaar; 05-30-2006 at 11:47 AM.
    Drømmejenta: Kristen jente som progger Python!

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found this: http://www.webdeveloper.com/forum/sh...ad.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 !??

    Code:
    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);
      }	  
    }
    Last edited by Pompiuses; 05-30-2006 at 12:22 PM.

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    101
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found the problem: http://www.captain.at/howto-ajax-per...ttprequest.php

    Isn't ajax fun ....

  • #7
    New Coder
    Join Date
    Jan 2006
    Location
    Oslo, Norway
    Posts
    86
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ahhhhh, doh!
    Drømmejenta: Kristen jente som progger Python!

  • #8
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    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
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •