CODEWITHSUNDEEP
javascriptajax
forumAdict
forumAdict

Reputation: 41

Ajax to make browser Load

1- OPEN FIREBUG, on the console tab

2- OPEN YOUR GMAIL ACCOUNT,

3- when gmail is loaded, click on one of your label (at the left under the draft box)

4- WITH FIREBUG YOU SEE THAT THE PAGE DOES NOT COMLETLY RELAOD SINCE ALL PREVIOUS ACTION STILL THERE FOR THE CURRENT DOCUMENT, BUT THE BROWSER COMPLETLY ACT LIKE THE PAGE HAVE BEEN RELOADED, stop button browser own loading effect, etc...)

5- !!!!! this is it..!!!!

Does some on have a clue on how site like Gmail can make the browser load on ajax call ( I mean show the loading icon and all, history, etc)

I already know what to check for the history navigation but how in the world they can make the browser to act like this was a simple link that load a complete new page.

from what I see with things like firebug Gmail basically retrieve mail information in JSON and than use some Javascript to render it to the user. But how they make the browser load in the while.

In gmail once it is loaded, obviously they ain't load all the data, from all your folder in background, so when you click on some of your folder and the data is not already loaded they make the browser 'load' like if it were loading a complete new page, while they retrieve the information from their server with some ajax call ( in Firefox you see the browser act like when you click on a normal link, loading icon, stop (x) button activated, and all).

Is it clear?

I came up with some 'ugly' code to achieve my goal that work quite nice in FireFox and IE (sadly it seems to not work in Chrome/WebKit and Opera).

I tell the browser to go to a url that it will not be able to reach before the ajax call end, with window.location=. The browser start to load and than when the ajax call sucess I call window.stop() (window.document.execCommand('Stop') for IE) than innerHTML the ajax data in the document

To me its look ugly and since it not work properly in Chrome/Webkit, this is apparently not the way to go.

Upvotes: 2

Views: 1408

Answers (7)

Nazariy M
Nazariy M

Reputation: 3

  $(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;
});

  }

Upvotes: 0

user685515
user685515

Reputation: 21

They are using iFrame. By changing the source of the iFrame.

Upvotes: 1

forumAdict
forumAdict

Reputation: 41

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

Upvotes: 1

s3m3n
s3m3n

Reputation: 4197

Think this is your answer:

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

Looks like gmail and facebook method (browser is showing page as "loading" with loading icons etc. - it is just simulating, because there is a background ajax request) :)

Upvotes: 0

Jamie
Jamie

Reputation: 71

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

Use one of the methods shown as triggering a browser busy state in the table on the page above.

Upvotes: 1

Radek
Radek

Reputation: 3941

Sitepoint has a book "Build Your Own AJAX Applications" and they show some content (all?) in this tutorial: http://articles.sitepoint.com/article/build-your-own-ajax-web-apps

They will guide you with your AJAX coding.

Upvotes: 0

o.k.w
o.k.w

Reputation: 25820

There are many ways to utilize AJAX.

Gmail needs to load a lot of files/data before something meaningful can be displayed for the users.

E.g. showing the folder tree first doesn't make sense if it's not clickable or not ready for any interactive use.

Hence, what they do is show something lightweight like a loading graphic/progress bar while asynchronously (behind the scene), pull more data from the server until they can populate the page with a full interface for usage.

I don't know how to explain further. Maybe wiki can help: http://en.wikipedia.org/wiki/Ajax_%28programming%29

Upvotes: 1

Related Questions