XMLHttpRequest never sets status?

[David Lee Lambert]

I'm developing a web-application to track certain information related
to vehicles, and the first field on one form is supposed to accept
full or partial VINs and validate them against a certain database.
This seems like a good use of Ajax, by adding an onblur() handler.

My code works in IE7, but not in Firefox 2.0. I can see that it's
making the request, but the onreadystatechange function never gets
called (or it does get called, but in a context that can't call
alert() ... is that possible?) That is, my webserver get a GET
request whenever I tab off that field, but nothing else happens.

My code:

function verifyVin() {
/* do some sanity-checks on the form-field; the end result is
that var vin
is a 7-, 8- or 17-character upper-case string */
window.status = "Searching for vehicle '"+vin+"' in Waybill...";
var req = createXMLHttpRequest();
req.onreadystatechange = function () {
if(req.readyState == 4) {
alert("Got a response");
var vehicles
= eval('('+req.responseText+')') .vehicles;
window.status = ""+vehicles.length+" matching vehicles found";
if (vehicles.length==0) {
alert("VIN '"+vin+"' not found in Waybill!");
} else if (vehicles.length==1) {
var vehicle = vehicles[0];
setVinInfo(window,
vehicle.VIN,
vehicle.customer,
vehicle.location);
} else {
window.open("chooseVin.jsp?VIN="+vin,
"chooseVin",
"height=300,width=400,scrollbars");
}
} else {
alert("Not ready...");
}
};
req.open("GET", "wbVinLookupData.jsp?VIN="+vin, false, null, null);
req.send(null);
}

[David Lee Lambert]

I'm trying to populate form fields using an asynchronous request in
the onblur property of the first text-field on the form. Here's some
code that illustrates what I'm trying to do; it does not work at all
on Firefox and does not work reliably on IE 7:

function doLookup() {
var k = document.forms.f.k.value;
document.forms.f.k2.value = k;

var req = createXMLHttpRequest();
req.onreadystatechange = function () {
if(req.readyState == 4) {

var data = eval('('+req.responseText+')').data;
var sel = document.forms.f.kv;
/* erase old options */
for (var i=sel.length-1; i>=0; i--) {
sel.options[i] = null;
}
/* add new options */
for (var k in data) {
sel.options[sel.length] = new Option(k, data[k]);
}
}
}
req.open("POST", "data/"+k+".json", false, null, null);
req.send(null);
}

With Firefox, I can see the server responding to GET or POST requests
(depending on what I use in the req.open() call) in its log, but
nothing happens in the client. I have the "JavaScript error console"
open, and don't get any messages.

With IE, entering a value that leads to a data-file looking like

{ data: {
"ff" : "ff"
}} <-- EOF here; that is, no line-terminator on the last line

causes the "there is an error on the page" icon to appear in the
status-bar and nothing happens, but if the data-file looks like

{ data: {
"ff" : "ff"
}}
<-- EOF out here; that is, the last line is a blank line

it does work.

It may be that most users of my application will have IE 6; but I
like the Firefox error-messages better when it gives them, and I'd
like to support multiple browsers. Are the following things easy to
do on IE6+, Firefox and Safari, in an onblur handler, using data from
an Ajax response: ?

- Populate input type=text fields;
- Add options to a select element;
- Change which option is selected in a select element;
- Change the plain text inside a div element

--
DLL