Question

I have just entered the world of jquery and am pretty new to javascript too. I have a small javascript snippet like below:-

<script type="text/javascript">
 $(function(){
    $('a').click(function(event){
        event.preventDefault();
        $.get('/_add_navigation_',function(response){
        $('#themaincontents').html(response);
        })
   })
</script>

The html looks like this:-

<a href="?toaddnavigation">CLICK Me</a>
<div id="themaincontents"></div>

On the server side I do an xhr header check by something like

 if request.is_xhr: send response else:redirect somewhere

Now while this code works fine on Chrome and Opera, on Firefox it is behaving a little weird. The server does not send back the reponse, but rather does a redirect. That means it says that there is no xhr header. Why should this happen while on the other two browsers it is working fine?
(I am using Firefox 3.6.12)
Update – I just had a look at the request headers of Firefox and I find no X-Requested-With:XMLHttpRequest header, but it is present in Chrome.

Answer 1

Not all browsers send the same headers, and you cannot rely on them to be consistent across browsers. The easiest way is to not rely on the browser to send something, but manually send something yourself:

$.get('url', {
    xhr: 'yes' // add this extra parameter here
}, function(){

});

then check for that GET variable on the server instead of a header that may or may not be sent by a browser.