Today we ran into an interesting problem with certain pages of our website not loading for Android users inside their Facebook Apps. We dug down and ran into several red herrings, but ultimately found the problem.
If you Google for “X-Requested-With”, or the
$_SERVER variable name in PHP
X-Requested-With HTTP header for any AJAX requests. So if you Google
HTTP_X_REQUESTED_WITH you will see blog posts & StackOverflow answers about detecting AJAX requests.
One major problem is while this a common practice, it isn’t an HTTP standard, and is used in other contexts as well. The example that bit us is the Android Facebook App and it’s
WebViews. When using a WebView in Android, it will send the name of the app (i.e.
So if you’re logic looks like this:
$data = [
AJAX requests made by jQuery will retreive JSON data of
$data. Normal browser requests will receive the HTML template of
However, because Android App’s WebViews will set X-Requested-With, the code above will return JSON data, not the HTML, regardless if it is an AJAX request or not!
Don’t rely on
X-Requested-With to determine if a Request is an AJAX request or not. Instead have your app check the
Accept header for
application/json and make sure your AJAX requests JSON. Another option is to create URL endpoints that are only used by your application for AJAX calls (like a REST API).
I hope this helps someone, we spent a few hours finding and fixing this one.