Как Facebook показывает прогресс загрузки браузера во время загрузки страницы AJAX?

Чтобы клиент IM постоянно регистрировался, Facebook избегает загрузки полной страницы, используя AJAX для загрузки своих страниц, прежде чем вставлять их в документ.

Однако, во время запросов Facebook AJAX браузер выглядит явно загружаемым; кнопка перезагрузки изменяется на X, а индикатор прогресса, встроенный в браузер, указывает загрузку/ожидание и т.д.)

Я успешно реализовал навигацию на основе AJAX, но мой браузер не показывает никаких признаков загрузки (поскольку запросы являются асинхронными), как это делает Facebook?

Ответ 1

В браузере отображается состояние загрузки, когда в загружаемом документе есть элемент. Запросы Ajax сделаны полностью из JavaScript; документ не изменяется, поэтому состояние загрузки не запускается.

С другой стороны, большинство запросов в Facebook делается путем вставки тега <script> в документ, указывая на файл JavaScript, содержащий нужные им данные. (По сути, JSONP, за исключением того, что они используют другой формат.) Браузер будет отображать свое состояние загрузки, потому что тег <script> является незагруженным элементом в документе.

Этот метод /JSONP может подвергнуть ваш сайт рискам безопасности, если вы не будете осторожны, поскольку разрешены межсайтовые запросы. Facebook занимается этим, создавая случайные URL-адреса для каждого ресурса, которые отправляются в браузер при начальной загрузке страницы.

Ответ 2

Facebook использует инструмент, который они разработали под названием Big Pipe, чтобы в основном передавать свой сайт клиенту в кусках. Они отправляют начальный тег script с голой DOM клиенту, а script загружает модули на странице асинхронно - идея, являющаяся клиентом, представляет модуль 1, когда сервер извлекает модуль 2, что увеличивает время загрузки.

Кроме того, они используют метод длительный опрос. С помощью HTTP 1.1 они могут использовать постоянное соединение и не должны беспокоиться о тайм-аутах. Когда страница отображается, клиентская сторона script делает запрос AJAX к Facebook, чтобы "прослушать" событие. Он будет сидеть там и слушать, пока не произойдет событие. В то же время браузер будет отображаться как "загрузка" данных.

Когда событие запускается в конце Facebook (скажем, кто-то прокомментировал ваше сообщение на стене), FB отправит этот ответ клиенту, чтобы запустить соответствующие обратные вызовы (например, выскочить небольшую подсказку, чтобы вы знали о комментарии ) и НЕМЕДЛЕННО отправить другой запрос в FB для прослушивания следующего события.

Ответ 3

Facebook использует iframe для связи, когда они хотят, чтобы статус "занятый" браузера отображался. Вы можете использовать iframes для выполнения перекрестного домена ajax, имея функции вызова iframe в родительском окне.