How does Facebook show browser loading progress during AJAX Page Loads?

Question

In order to keep the IM Client logged in at all times Facebook avoids full page loads by using AJAX to load its pages before inserting them into the document.

However, during Facebook AJAX requests the browser appears to be visibly loading; the reload button changes to an X, and the progress indicator built into the browser indicates loading/waiting etc)

I've been able to implement AJAX based navigation successfully, but my browser doesn't show any indication of loading (since the requests are asynchronous) how do Facebook do it?

Answer 1

The browser displays the loading state when there is an element in the document which is loading. Ajax requests are made entirely from within JavaScript; the document is not affected and so the loading state isn't triggered.

On the other hand, most of Facebook's requests are made by inserting a <script> tag into the document, pointing to a JavaScript file containing the data they want. (Essentially JSONP, except they use a different format.) The browser will displaying its loading state because the <script> tag is an unloaded element in the document.

This technique/JSONP can expose your site to security risks if you're not careful, because cross-site requests are allowed. Facebook deals with this by generating random URLs for each resource, which are sent to the browser in the initial page load.