I am converting some old pages to use dojo 1.1, and ran into a snag when doing cross browser testing. Everything is fine in Firefox, but fails in IE 6. The basic approach here is to invoke a php file on the server in response to user click, and have it return a JSON structure based on what it finds in the database. That JSON structure is then used to build a table in a div by DOM manipulation. Looks good, runs fast – but not in IE.

The interesting problem in IE is that the error callback is invoked instead of the load callback. If I examine the HTTP response in the error function, it is 200 and the response string is “OK” – as you would expect if no error occurred. But how then did that function get invoked, if there was no error? Why not the proper load function? The JSON looks correct, and seems properly interpreted in Firefox.

Here’s what the call looks like (paramString just some args for the search):

dojo.xhrGet({
url: 'searchResultsJSON.php?' + paramString,
handleAs: "json",
sync: true,
load: function(response, ioArgs) {
if ( response.matches.length == 0 )
alert("No matching records found.");
else {

// do a bunch of DOM manipulation here

}
return response;
},
error: function(response, ioArgs) {
alert('Error when retrieving search results from the server: ' + ioArgs.url + " " + ioArgs.args);
}
});

The JSON stuff is just raw JSON.

{ “matches”: [array full of stuff ] }

On Firefox, it works fine if you just return the raw JSON text (no header). Since IE6 seems somewhat sensitive to headers, I’ve tried adding a header in various forms, none of which seem helpful. This still does not explain to me why the error callback is used when there isn’t any obvious error.

I would appreciate any suggestions here as to how to make this work on IE, including what the proper header or headers might be for returning JSON to IE6.