2012-01-19 3 views
1

これは私がこのサイトに投稿した最初の質問です。タイトルが明確でない場合は、私の言い訳をしてください。複数のAPIコールを持つPHPページが遅い:ユーザーが待機しています

私はこの状況を抱えています。異なるapi呼び出し(facebook、youtube、lastfm)から取得したデータを処理する必要があるPHPページです。予想どおり、ページには何年もかかるでしょう。それは問題ありません。 質問はそうです。

私はプロセスを開始するために必要な2つの基本データ(facebook idとtoken)を取るだけでページを作成することができます。そして、ユーザーに待ってもらうように指示します。面倒な「読み込み中のページ」が開いていますか?私は本当にそのようなことを引き起こす方法を知らない。

ありがとうございます。

ps。私はすでにフェイルブックapiのような他のトリックのための複数のクエリをfqlで最適化するために管理したが、1つのAPIからの呼び出しの結果は、別の呼び出しにつながるので、それを得ることはできないようですfastwe。 そして、明らかに、私はすでにこの遅いページにユーザーが着陸するためのFacebookの認証プロセスを行ってきました。

答えて

4

このタイプのパラダイムを使用して、最高のユーザーエクスペリエンスを得ることができます。

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/を参照してください)、JSONを吐き出す特定のPHPページを呼び出すことができます。これは実際の仕事が起こり、時間がかかる場所です。

<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に動的に挿入され、表示されます。

これはちょうど入力時にGoogleの検索に似ています.AJAXコールをサーバーに戻して、送信をクリックする前にリアルタイムで表示するためのコンテンツを取得しています。

+0

パラダイムありがとう!私はajaxの呼び出しを勉強し、私のサイトをより速くするつもりです – LapsuS

0

FBでユーザーを認証する場合は、Cookieを取得します。存在する場合は、ある種のJQUERYスクリプトを使用して、ページに「読み込み」オーバーレイを表示します。

+0

[JQuery BlockUI](http://jquery.malsup.com/block/)は、電話を待っている間にユーザー入力をブロックするのに最適です。 –

関連する問題