du_1993 2012-01-19 00:38
浏览 61
已采纳

带有多个api呼叫的慢Php页面：我的用户将等待

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.

  • 写回答

2条回答 默认 最新

  • doumi1311 2012-01-19 01:02
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥20 我要一个分身加定位两个功能的安卓app
  • ¥15 基于FOC驱动器，如何实现卡丁车下坡无阻力的遛坡的效果
  • ¥15 IAR程序莫名变量多重定义
  • ¥15 (标签-UDP|关键词-client)
  • ¥15 关于库卡officelite无法与虚拟机通讯的问题
  • ¥15 目标检测项目无法读取视频
  • ¥15 GEO datasets中基因芯片数据仅仅提供了normalized signal如何进行差异分析
  • ¥100 求采集电商背景音乐的方法
  • ¥15 数学建模竞赛求指导帮助
  • ¥15 STM32控制MAX7219问题求解答