Question

1- OPEN FIREBUG，在控制台选项卡上

2-打开您的GMAIL帐户，

3-加载gmail时，点击你的一个标签（草稿框左下方）

4-带有垃圾邮件你看到页面因为当前文件的所有先前操作而不能完全依赖，但是浏览器完全按照页面重新执行，停止按钮浏览器自己的加载效果等...）

5- !!!!!这就是.. !!!!

是否有人知道Gmail之类的网站如何通过ajax调用加载浏览器（我的意思是显示加载图标和所有内容，历史记录等）

我已经知道要检查历史导航的内容了，但是他们如何让浏览器像这样做是一个加载完整新页面的简单链接。

从我看到的内容，像firebug Gmail基本上检索JSON中的邮件信息，而不是使用一些Javascript将其呈现给用户。但是他们如何让浏览器加载。

在gmail加载后，显然他们没有从后台的所有文件夹中加载所有数据，因此当你点击某些文件夹并且数据尚未加载时，他们会使浏览器“加载”就好像它正在加载一个完整的新页面，同时他们通过一些ajax调用从他们的服务器检索信息（在Firefox中你看到浏览器的行为就像你点击普通链接，加载图标，停止（x）按钮激活，以及全部）。

是否清楚？

我想出了一些“丑陋”的代码来实现我在FireFox和IE中工作得很好的目标（遗憾的是它似乎在Chrome / WebKit和Opera中不起作用）。

我告诉浏览器转到一个url，它在ajax调用结束之前无法访问，使用window.location =。浏览器开始加载，而且当ajax调用成功时，我调用window.stop（）（window.document.execCommand（'Stop'）为IE）而不是innerHTML文件中的ajax数据

对我来说，它看起来很难看，因为它在Chrome / Webkit中无法正常工作，这显然不是可行的方法。

Answer 1

有很多方法可以使用AJAX。

Gmail需要加载大量文件/数据才能为用户显示有意义的内容。

E.g。如果文件夹树无法点击或未准备好进行任何交互式使用，则首先显示文件夹树是没有意义的。

因此，他们所做的是显示一些轻量级的东西，如加载图形/进度条，异步（在场景后面），从服务器中提取更多数据，直到他们可以使用完整的界面填充页面以供使用。

我不知道如何进一步解释。也许维基可以提供帮助：http://en.wikipedia.org/wiki/Ajax_%28programming%29

Answer 2

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

使用上面显示的触发浏览器忙状态的方法之一。

Answer 3

document.getElementById('iframe').src = "http://www.exemple.com/browser_load.html";

Answer 4

他们正在使用iFrame。通过更改iFrame的来源。

Answer 5

Sitepoint有一本书“构建自己的AJAX应用程序”，它们在本教程中展示了一些内容（全部？）： http://articles.sitepoint.com/article/build-your-own-ajax-web-apps

他们将引导您使用AJAX编码。

Answer 6

认为这是你的答案：

http://www.obviously.com/tech_tips/slow_load_technique

看起来像gmail和facebook方法（浏览器显示页面为“加载”加载图标等 - 它只是模拟，因为有一个背景ajax请求）:)）

Answer 7

  $(function($){

  $('a').attr('onclick','return false;').click(function(){
  var title = $(this).attr('title');
  var href = $(this).attr('href');
  $('title').html(title);
  $('#content').load(href+' #content', function(){
  history.pushState(null, null, href);
  }, function(responseText) {
  var title = responseText.match(/<title>([^<]*)/)[1];
  document.title = title;
});
  });
  });

  window.onpopstate = function( e ) {

  var returnLocation = history.location || document.location;
  var returnTitle = history.propertyName || document.title;  
  $('title').html(returnLocation.title)
  $('#content').load(returnLocation.href+ ' #content', function(){
  history.pushState(null, null, href);

  }, function(responseText) {
  var title = responseText.match(/<title>([^<]*)/)[1];
  document.title = title;
});

  }

Ajax使浏览器加载

7 个答案: