XMLHTTPRequest works fine the first time, but not again 1

resnak · Apr 15, 2005

Okay, I have been pulling my hair out trying to figure this out.
First, here is shortened version of my script that has the same problem as the big version:

Code:

<html>
	<head>
		<title>XMLHTTP</title>
		<script type="text/javascript">
			function conn(){
				var xmlhttp = null;
				try{
					xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
				}catch(mse){
					alert(mse.message);
					try{
						xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
					}catch(microsofte){
						alert(microsofte.message)
						xmlhttp = null;
					}
				}
				if (!xmlhttp&&typeof XMLHttpRequest!="undefined"){
					xmlhttp = new XMLHttpRequest()
				}return xmlhttp
			}
			
			function showReportArea(type){
				var reportArea = document.getElementById("reportArea");
				var xmlhttp = conn();
				var url = '[URL unfurl="true"]http://www.google.com';[/URL]
				xmlhttp.open("GET",url,true);
				xmlhttp.send();
				xmlhttp.onreadystatechange = function(){
					if (xmlhttp.readystate==4){
						reportArea.innerHTML=xmlhttp.responseText;
					}	
				}
			}
		</script>
	<head>
	<body>
		<select onChange="showReportArea(this.value);">
			<option value="0">Choose One</option>
			<option value="1">Option 1</option>
		</select>
		<div id="reportArea">
		</div>
	</body>
</html>

Here's the problem: The first time the page is loaded the script works fine, and sometimes even works twice, but after that it won't work again unless I open a new window and go to the page again. I can't just refresh and I can't choose anything else from the select box.
If anyone can help me with this it would be greatly appreciated.

Thanks,
Justin

BillyRayPreachersSon · Apr 15, 2005

Does this thread help?

thread216-1022300

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

resnak · Apr 15, 2005

I looked through that thread and tried a couple of ideas it gave me but I wasn't able to find anything that would make it work. I'm pretty sure I have everything in my script in the same order as that thread showed but it still doesn't help.

tsuji · Apr 16, 2005

resnak,

There are different ways to make good the script. The one using more closely the logic you use is this.

Code:

<html>
    <head>
        <title>XMLHTTP</title>
        <script type="text/javascript">
            function conn(){
                var xmlhttp = null;
                try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
                }catch(mse){
                    alert(mse.message);
                    try{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
                    }catch(microsofte){
                        alert(microsofte.message)
                        xmlhttp = null;
                    }
                }
                if (!xmlhttp&&typeof XMLHttpRequest!="undefined"){
                    xmlhttp = new XMLHttpRequest()
                }
[blue]                xmlhttp.onreadystatechange = function(){
                    if (xmlhttp.readystate==4){
                        reportArea.innerHTML=xmlhttp.responseText;
                    }    
                }[/blue]
                return xmlhttp
            }
            
            function showReportArea(type){
                var reportArea = document.getElementById("reportArea");
                var xmlhttp = conn();
                var url = '[URL unfurl="true"]http://www.google.com';[/URL]
                xmlhttp.open("GET",url,true);
                xmlhttp.send();
            }
        </script>
    <head>
    <body>
        <select onChange="showReportArea(this.value);">
            <option value="0">Choose One</option>
            <option value="1">Option 1</option>
        </select>
        <div id="reportArea">
        </div>
    </body>
</html>

regards - tsuji

resnak · Apr 16, 2005

Thanks, that works great!

Now, the reason for having the conn() function was so that I could reuse it in the page whenever I needed to dynamically update another secion of the page.

For instance, let's say that later on down the page, rather that changing the innerHTML of an element, I wanted to change the value in a text box using an XMLHTTPRequest. If I leave the code like this, I would have to write another function to decide how to call the request, for IE or Mozilla, and then do the onreadystatechange. Isn't there some way to separate the onreadystate change from the establishment of the XMLHTTP object?

PS If that doesn't make sense just say so and I'll try to find another way to word it.

Justin

Dyslexics of the world: Untie!

tsuji · Apr 16, 2005

resnak,

I agree with you. Handling onreadystatechange at that position is not satisfactory if the concrete work is implemented as well. It would be more satisfactory if it is more abstract, just a reference to a handler.

In the meantime, you can move the thing back to the workhorse before the send.
[tt]
var url = '

http://www.google.com';

xmlhttp.onreadystatechange = function(){
if (xmlhttp.readystate==4){
reportArea.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",url,true);
[/tt]
- tsuji

tsuji · Apr 17, 2005

Further note:

It would give theoretically more satisfaction if the onreadystatechange handling be encapsulated in the function conn together with its instantiation. Hence, to pursuit the idea and isolate the contingent work like sending responsetext to some html element etc, you can use a global variable, say rsptxt to hold the responseText. In that case it looks like this. (The same idea I think can be pushed further and in abstraction.)

Code:

<html>
    <head>
        <title>XMLHTTP</title>
        <script type="text/javascript">
            [blue]var rsptxt=null;[/blue]
            function conn(){
                var xmlhttp = null;
                try{
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP")
                }catch(mse){
                    alert(mse.message);
                    try{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
                    }catch(microsofte){
                        alert(microsofte.message)
                        xmlhttp = null;
                    }
                }
                if (!xmlhttp&&typeof XMLHttpRequest!="undefined"){
                    xmlhttp = new XMLHttpRequest()
                }
                [blue]xmlhttp.onreadystatechange = function(){
                    if (xmlhttp.readystate==4){
                        rsptxt=xmlhttp.responseText;
                    }    
                }[/blue]
                return xmlhttp
            }
            
            function showReportArea(type){
                var reportArea = document.getElementById("reportArea");
                var xmlhttp = conn();
                var url = '[URL unfurl="true"]http://www.google.com';[/URL]
                xmlhttp.open("GET",url,true);
                xmlhttp.send();
                [blue]if (rsptxt !=null) {
                    reportArea.innerHTML=rsptxt;  //type related operation
                    rsptxt=null;    //reset to null
                }[/blue]
            }
        </script>
    <head>
    <body>
        <select onChange="showReportArea(this.value);">
            <option value="0">Choose One</option>
            <option value="1">Option 1</option>
        </select>
        <div id="reportArea">
        </div>
    </body>
</html>

- tsuji

resnak · Apr 18, 2005

Thank you very much Tsuji!
Sorry for taking so long to get back to you. I think that last post will work perfectly.

Justin

Dyslexics of the world: Untie!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

XMLHTTPRequest works fine the first time, but not again 1

resnak

Technical User

BillyRayPreachersSon

Programmer

resnak

Technical User

tsuji

Technical User

resnak

Technical User

tsuji

Technical User

tsuji

Technical User

resnak

Technical User

Similar threads

Part and Inventory Search

Sponsor