this is the first question I post in this site, so you have to excuse me if the title is not clear.
I have this situation: a php page that needs to process data taken from different api calls (facebook, youtube, lastfm). As expected, the page will take years to load and that's fine. So the question is.
Is possible to create a page that just takes the two basic data that I need to start the process - the facebook id and the token - then tell the user to wait, and server-side initiate the process, without leaving this annoying "loading page" open? I really have no idea how to trigger such a thing.
Thank you in advance.
Ps. I've already managed to optimize with fql multiple query for the facebook api and other tricks like that, but since the result of the call from one api leads to a specific call to another, it doesn't seem possible to me to get it fastwe. And, clearly, I've already been throught the facebook auth process for the user landing in this slow loading page.
You will want to use this type of paradigm for getting the best user experience.
AJAX is your friend
Only send down the minimal information you need to get the outline of the page displayed to the user.
<html>
<head>
...scripts, meta, css etc...
</head>
<body>
<h1>Facebook Info</h1>
<div id=facebook-info>
<p>loading...</p>
</div>
<h1>Twitter Info</h1>
<div id=twitter-info>
<p>loading...</p>
</div>
</body>
</html>
Then in each of the content sections (that you have yet to load) have a spinner.
In the loading of your javascript (I'm abbreviating for sake of clarity...see http://jQuery.com/ for more info on their ajax calls), you can make calls to specific php pages that spit out some JSON. This is where the real work happens and takes the time.
<script>
$(document).ready(function(){
$.ajax('/content/getFacebookInfo.php',displayFacebookContent);
$.ajax('/content/getTwitterInfo.php',displayTwitterContent);
});
</script>
Then in the displayFacebookContent and displayTwitterContent callback functions, this is where you build the content for the DOM dynamically.
<script>
var displayTwitterContent = function(response) {
var html = "<ul>";
foreach(var i in response.posts) {
html += "<li>" + response.posts[i].message + "</li>";
}
html += "</ul>";
$('#titter-info).append(html);
};
</script>
Again, this is abbreviated to show the concept, you will have to flesh out the scripting and also build the php handlers that respond with JSON objects.
By offloading the hard work to the AJAX handlers the main HTML is served down quickly and the user is happy. By the time his eyes move around the page, some of the AJAX calls will have completed and you'll have dynamically inserted useable data into the DOM and they'll see it.
It's kinda like google's search as you type, it's making an AJAX call back to the server and grabbing content for you to display in real time before you even click submit.
If you're authenticating a user with FB, grab the cookie. If it exists, use some type of JQUERY script to display a "loading" overlay on the page.