带有多个api调用的慢速Php页面:我的用户将等待


Slow Php page with multiple api call: my users will be waiting

这是我在这个网站上发布的第一个问题,所以如果标题不清楚,请原谅。

我有这样的情况:一个php页面需要处理来自不同api调用(facebook、youtube、lastfm)的数据。正如预期的那样,该页面将需要数年才能加载,这很好。所以问题是。

有没有可能创建一个页面,只获取启动进程所需的两个基本数据-脸书id和令牌-然后告诉用户等待,然后服务器端启动进程,而不让这个烦人的"加载页面"打开?我真的不知道该怎么引发这样的事情。

提前谢谢。

Ps。我已经成功地用fql为facebookapi和其他类似的技巧进行了多次查询优化,但由于从一个api调用的结果会导致对另一个api的特定调用,所以我似乎不可能快速获得它。而且,很明显,我已经完成了登录这个缓慢加载页面的用户的facebook身份验证过程。

您将希望使用这种类型的范例来获得最佳的用户体验。

AJAX是你的朋友

只发送您需要的最低限度的信息,以获得显示给用户的页面轮廓。

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

然后在每个内容部分(您尚未加载)中都有一个微调器。

在加载javascript时(为了清晰起见,我缩写了…请参阅http://jQuery.com/有关ajax调用的更多信息),您可以调用特定的php页面,这些页面会吐出一些JSON。这是真正的工作发生的地方,需要时间。

<script>
$(document).ready(function(){
   $.ajax('/content/getFacebookInfo.php',displayFacebookContent);
   $.ajax('/content/getTwitterInfo.php',displayTwitterContent);
});
</script>

然后在displayFacebookContent和displayTwitterContent回调函数中,这是动态构建DOM内容的地方。

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

同样,这是为了展示概念而缩写的,您必须充实脚本,还必须构建用JSON对象响应的php处理程序。

通过将繁重的工作卸载到AJAX处理程序中,主HTML可以很快得到服务,用户也很高兴。当他的眼睛在页面上移动时,一些AJAX调用已经完成,您已经将可用数据动态插入DOM,他们就会看到它

这有点像谷歌的搜索,当你输入时,它会对服务器进行AJAX调用,并在你点击提交之前为你实时获取内容。

如果您正在使用FB验证用户,请获取cookie。如果存在,请使用某种类型的JQUERY脚本在页面上显示"加载"覆盖。