Firefox, jQuery and the case of the Document response

I recently tweeted that I was having this problem:

As you can see something’s not right there, Chrome is not getting anything back from my AJAX request (or at least a falsey value) where as Firefox seems to be having a Document object.

I was stumped.

Why are you seeing two different responses from the exact same bit of code?

So the response we’re getting back has a 0 content length and that was my first point of call, something must be causing the browsers to behave differently when you’ve not got any content.

I ended up here and what I found was that when this is called:

complete( status, statusText, responses, responseHeaders );

The response object has different properties depending on the browser, in Chrome (and IE) it has a single text property but in Firefox it has a text and xml property. I think we’ve found our problem boss, we’ve somehow got different objects. But still, why are we ending up with a document object not the text like Chrome?

Well next we end up through this logic. Here jQuery works out what dataType you’re response is and it gives you the appropriate data.

Now the astute reader may have noticed I wasn’t setting a dataType in my request which means that jQuery will have to do it’s best guess at what to give me, and that is done through this:

// Try convertible dataTypes
for ( type in responses ) {
	if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
		finalDataType = type;
		break;
	}
	if ( !firstDataType ) {
		firstDataType = type;
	}
}

It uses a for in loop of all the properties of the response and settles on the last one if it can’t find anything else. Guess what the last one is… xml!

Well that makes for an easy solution, once you set a dataType on your jQuery ajax settings you’re all good to go, which leads me to my conclusion:

If null is valid from your response make sure you tell jQuery what dataType you want it to be.

There’s an example repository available here.