如何在AJAX页面加载做Facebook的显示浏览器加载进度？ [英] How does Facebook show browser loading progress during AJAX Page Loads?

问题描述

为了保持IM客户端登录的时候都通过Facebook的使用AJAX将它们插入到文档之前装载的页面避免了整页的负荷。

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.

不过，在Facebook的Ajax请求的浏览器似乎是明显的负荷;内置在浏览器中的刷新按钮变为一个X和进度指示器指示加载/等待等）

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)

我已经能够成功地实施基于AJAX的导航，但我的浏览器不显示任何指示加载（因为请求是异步）怎么办的Facebook办呢？

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?

推荐答案

浏览器显示加载状态时有被加载文档中的一个元素。 Ajax请求完全在JavaScript制成;文档不受影响，所以载荷状态不会被触发。

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.

在另一方面，大部分Facebook的请求通过插入由一个＆LT;脚本＆GT; 标记插入到文档中，指向一个JavaScript文件，其中包含他们想要的数据。 （本质上JSONP，但它们使用不同的格式。）浏览器将显示其负载状态，因为＆LT;脚本＆GT; 标记文档中的卸载元件

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.

此技术/ JSONP可能会暴露你的网站的安全风险，如果你不小心，因为跨站点的请求被允许。实处理这个通过产生随机的URL为每个资源，将其发送给浏览器中的初始页面加载

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.

这篇关于如何在AJAX页面加载做Facebook的显示浏览器加载进度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！