AJAX Question

Ok, I actually ran across a use for AJAX on a website I am working on. Stripped down, I am selecting an image from a list and I need to refresh the image on the page. Simple enough.

I am calling a Servlet to process the request and calling the servlet without using AJAX works fine, so I know that is not the problem. So I have to assume it is my JS. Both alert messages are popping up from the updateImage() function, but it would appear that my servlet is never being called. Any help is appricated.

Thanks.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>Item Administration</title>
    <base href="http://localhost:8080/pnp/"/>
    <script language="JavaScript" type="text/javascript" src="scripts/pnp.js"></script>
    <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
    <script>
 
        var url = "/imageChanger?param="; // The server-side script
        function handleHttpResponse() {
            if (http.readyState == 4) {
                // Split the comma delimited response into an array
                results = http.responseText.split(",");
                document.getElementById('theImage').src = results[0];
            }
        }
        function updateImage() {
 
            alert('updating the image');
            //var imageValue = (document.getElementById("imageId").options[document.getElementById("imageId").selectedIndex]).value;
            var imageValue = "1";
            alert(imageValue);
            http.open("GET", url + escape(imageValue), true);
            http.onreadystatechange = handleHttpResponse;
            http.send(null);
        }
 
        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(); // We create the HTTP Object
    </script>
</head>
<body>
<c:import url="includes/admin_header.jsp"/>
<form>
<select name="imageId" size="5" onchange="updateImage();" >
    <option value="1">Image 1</option>
    <option value="2">Image 2</option>
</select>
<img name="theImage"  src=""/>
 
</form>
</body>
</html>

[ August 19, 2005: Message edited by: Gregg Bolinger ]

Ok, changed some code and now the servlet is getting called. However, the img tag is not being updated. I know I am retrieving correct values because I had alert debugs in before. After a selection change, the img src is still "" instead of the image path.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>Item Administration</title>
    <base href="http://localhost:8080/pnp/"/>
    <script language="JavaScript" type="text/javascript" src="scripts/pnp.js"></script>
    <link href="styles/styles.css" rel="stylesheet" type="text/css"/>
    <script>
 
        var url = "imageChanger?param="; // The server-side script
        var reqXML;
        function handleHttpResponse() {
 
            if (reqXML.readyState == 4) {
               
                // Split the comma delimited response into an array
                results = reqXML.responseText.split(",");
                document.getElementById('theImage').innerHTML = "<img src='" + results[0] + "' />";
            }
        }
        function updateImage() {
 
            var imageValue = "1";
 
            //determine if the browser is Moz, FF, NN, Op
            if (window.XMLHttpRequest){
                reqXML = new XMLHttpRequest();                          //set the request
                reqXML.onreadystatechange = handleHttpResponse;         //function to call on each set
                reqXML.open("GET", url + escape(imageValue), true);     //set the page to request
                reqXML.send(null);                                      //initialize the request
            }
            //ActiveX - can we say IE?
            else if(window.ActiveXObject){
                //Create our RequestObject
                reqXML = new ActiveXObject("Microsoft.XMLHTTP");
                if(reqXML){
                    var imageValue = "1";
                    reqXML.onreadystatechange = handleHttpResponse;  //function to call on each step
                    reqXML.open("GET", url + escape(imageValue), true);         //set the page to request
                    reqXML.send(null);                     //initialize the request
                }
            }else{  //I do not support this so I need to do something!
                window.location.href = url;
            }
        }

</script>
</head>
<body>
<c:import url="includes/admin_header.jsp"/>
<form>
<select name="imageId" size="5" onchange="updateImage();" >
    <option value="1">Image 1</option>
    <option value="2">Image 2</option>
</select>
<img name="theImage" src=""/>
 
</form>
</body>
</html>

FYI - changing

<img name="theImage" src=""/>

to

<img id="theImage" src=""/>

didn't make any difference.

Ok, I am stupid. Made the img tag a div with the appropriate ID and all is well.