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条)

报告相同问题？

悬赏问题

  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 下图接收小电路，谁知道原理
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测