jQuery $.ajax fails in IE.

[JShor]

When I try making this ajax call, it fails in IE. The error returns an XHR response of 403. Normally, this would only happen if you're referencing an external data source... but mine is on the same server.

It works in all other browsers (FF, Chrome, Opera, Safari).

Any ideas?

function test() {
	alert('done');

	
	$.ajax({
  url: "data/index.php?q=a",
  context: document.body,
  dataType: "text json",
  success: function(){
    alert('test');
  },
  error:function (xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                }   
});
}

[JShor]

Oh, here's an interesting update... the error only occurs if I have a hash fragment URL with the forward slash.

So for example, this works:
http://www.example.com/#!test/test/

But this does NOT work:
http://www.example.com/#!/test/test/

I am stumped, once again...

I need a solution so that this URL will work:
http://www.example.com/#!/test/test/

[JShor]

Interestingly enough, the error occurred with the query string in the URL. Including a query string fails in IE if you have a hash fragment URL with a forward-slash right after the #!.

Even doing it the classical AJAX way without jQuery, it failed with a query string in the URL.

In the future, if you get a 403 XHR response in IE using a hash fragment URL with a forward-slash right after it, the query string is the problem. It accepts query strings, but does not accept the equal sign (=) or the ampersand (&).

The workaround I developed for this is to encode all of the data that would normally be sent as a query string into JSON-encoded data, and then decoded the JSON and used the variables from the array keys and got their values manually.

For example, consider the following:
id=1&query=string

Would change to:
[{"id":1,"query":"string"}]

It is a very bizarre and obscure bug in IE.