ajax: resonseXML without properties, undefined is null or not an object

I keep getting the error "undefined is null or not an object". In FireFox I get "xmlhttp.responseXML has no properties".

The output of my JSP is just something like this:
<option>2005</option>
<option>2006</option>

....in Firefox, if I run the JSP page... the browser tells:
XML Parsing Error: junk after document element
Location: http://localhost/p1/searchAvailableYears.jsp?pType=A
Line Number 2, Column 1:<option>2005</option>
^

....And I am not sure if THAT is the problem..... but how do I solve it?

Below is the part of the code of the main HTML/JSP page where the <select> is:

<select name="pType" onchange="handleOnChange(this)">
<option>---</option>
<%
String allDir[] = {"A", "B", "C"}; //dirs con los que se trabajará

for(int i=0; i<3; i++)
{
File dir = new File("C:/apache-tomcat-6.0.10/webapps/ROOT/p1/db/" + allDir[i] ); //(fenomenos A, B, C)
if (dir.exists() && dir.isDirectory())
{
%>
<option><%=allDir[i]%></option>
<%

} //if
} //for
%>
</select>
</td></tr>

<td><strong>Year</strong></td>
<td>


<select name="year" onchange="handleOnChange(this)">
<option>---</option>
</select>


------------
And below is the javascript that handles the Ajax calls:

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

//vars globales
var txtPType;
var txtYear;
var txtDay;
var txtTime1;

var xmlhttp;
var laLista;

//-------------------------------------------------------------------------->>>>>>>>
function block(lista)
{
lista.disabled=true;
lista.style.backgroundColor='#CCCCCC';
}
//-------------------------------------------------------------------------->>>>>>>>

function unblock(lista)
{
lista.disabled=false;
lista.style.backgroundColor='';
}
//-------------------------------------------------------------------------->>>>>>>>

function removeItems(lista)
{
for(var i = 0; i < lista.length; i++)
{ lista.remove(i); }
}
//-------------------------------------------------------------------------->>>>>>>>




function handleOnChange(ddl)
{
//index y texto del item seleccionado
var ddlIndex = ddl.selectedIndex;
var ddlText = ddl[ddlIndex].text;
var frmSelect = document.forms["form1"];
var frmSelectElem = frmSelect.elements;

if(ddl.name="pType")
{
txtYear = "";
txtDay = "";
txtTime = "";

unblock(document.form1.year);
block(document.form1.day);
block(document.form1.time1);

laProxLista = frmSelectElem["year"];

if (ddl.options[ddl.selectedIndex].text != "---")
{
txtPType = ddl.options[ddl.selectedIndex].text;
}
}


else if(ddl.name="year")
{
txtDay="";
txtTime="";

unblock(document.form1.day);
block(document.form1.time1);

laProxLista = frmSelectElem["day"];
if (ddl.options[lista.selectedIndex].text != "---")
{
txtYear = ddl.options[lista.selectedIndex].text;
}
}



else if(ddl.name="day")
{ txtTime = "";
unblock(document.form1.time1);

laProxLista = frmSelectElem["time1"];
if (ddl.options[ddl.selectedIndex].text != "---")
{
txtDay = ddl.options[ddl.selectedIndex].text;
}
}


else //time1
{
laProxLista = null;
if (ddl.options[ddl.selectedIndex].text != "---")
{
txtTime1 = ddl.options[ddl.selectedIndex].text;
}
}

if ( txtPType != "---")
{
xmlhttp = null


if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest()
}

else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
}

if (xmlhttp != null)
{

if(ddl.name = "pType")
{
// Setting the JSP/Servlet url to get XmlData
url = "searchAvailableYears.jsp?pType=" + txtPType;
}

else if(ddl.name = "year")
{
url = "searchAvailableDOY.jsp?pType=" + txtPType + "&year=" + txtYear;
}
else(ddl.name = "day")
{
url = "searchAvailableTimes.jsp?pType=" + txtPType + "&year=" + txtYear + "&day=" + txtDay;
}


xmlhttp.onreadystatechange = handleHttpResponse;


xmlhttp.open("GET",url,true);


xmlhttp.send(null);
}
else{
alert("Your browser does not support XMLHTTP.")
} //else

} //if chosen

} //fucntion

//----------------------------

function verifyReadyState(obj){


if(obj.readyState == 4){


if(obj.status == 200){

return true;
}
else{

alert("Problem retrieving XML data")
}
}
}
//----------------------------------------------------



function handleHttpResponse()
{
if(verifyReadyState(xmlhttp) == true)
{

// Building a DOM parser from Response Object
var response = xmlhttp.responseXML.responseText;
alert(response);

//First, remove the actual items
removeItems(laProxLista);

var _x = response.getElementsByTagName("option");
var txt;

var newOption;

for(var i = 0; i < _x.length; i++)
{
newOption = document.createElement("OPTION");
txt = _x[i].text;
//newOption.text = txt[0].firstChild.data;
newOption.text = txt
laProxList.add(newOption);
}
} //if

else
{
alert(_x);
}

}//function

//------------------------------------------------
function verifyReadyState(obj){

if(obj.readyState == 4){

if(obj.status == 200){

return true
}
else{

alert("Problem retrieving XML data")
}
}
}

</script>

-------------------

And an example of one of my JSP codes:

<%@ page contentType="text/html" %><%@page import="java.io.*, javax.servlet.*, javax.servlet.http.*, java.lang.*, java.util.*"%>


<%
String pType = request.getParameter("pType");
response.setContentType("text/xml");
//response.setHeader("Cache-Control", "no-cache");
PrintWriter _out = response.getWriter();


File dir = new File("C:/apache-tomcat-6.0.10/webapps/ROOT/p1/db/" + pType);
String[] allFilesInDir = dir.list();

ArrayList years = new ArrayList();

String option;

try
{
for(int i=0; i < allFilesInDir.length; i++)
{
if (years.contains(allFilesInDir[i].substring(1,5)) == false)
{
years.add(allFilesInDir[i].substring(1,5));
option = "<option>" + years.get(i) + "</option>";
_out.println(option);
} //if
} //for
} //try


catch(NullPointerException e)
{
//_out.println("<option>Data not available</option>");
}

%>


I've been working with this thing for more than a week and I really need help because I am the only clown here who decided to try it...so you may understand...
-----------------------------------------------------

And another question... I tried to do it without Ajax, but I did not know how the heck I can tell the "response" that those
<option>2005</option>
<option>2006</option>

...goes to ....

<select name="pType" onchange="handleOnChange(this)">
<!--- HERE! -->
</select>

I tried with...

function clickedOnPType(lista)
{

if (lista.options[lista.selectedIndex].text != "---")
{
txtPType = lista.options[lista.selectedIndex].text;
}

txtYear = "";
txtDay = "";
txtTime = "";

unblock(document.form1.year);
block(document.form1.day);
block(document.form1.time1);


document.form1.action = "searchAvailableYears.jsp?pType=" + txtPType;
document.form1.submit();

}


.... but I only get a plain page with ....
2005 2006 2007

......when I saw the source of the page it gives....
<option>2005</option>
<option>2006</option>
<option>2007</option>



Any help is appreciated!

--MMS--

Well you are not sending back valid XML that is your problem. If you want to use XML, it has to be valid. More info on XML here: http://radio.javaranch.com/pascarello/2006/09/12/1158096122600.html

What you probbaly should just send back a simple string like this

option1,option2,option3

read the response text

var myOpts = xmlhttp.responseText;

split the string

myOpts = myOpts.split(",");

now it is an array, add the options

var sel = document.getElementById("mySelect");
sel.options.length = 0;
for(var i=0;i<myOpts.length;i++){
sel.options[sel.options.length] = new Option(myOpts[i],myOpts[i]);
}


Eric