このタイプのパラダイムを使用して、最高のユーザーエクスペリエンスを得ることができます。
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コールをサーバーに戻して、送信をクリックする前にリアルタイムで表示するためのコンテンツを取得しています。
パラダイムありがとう!私はajaxの呼び出しを勉強し、私のサイトをより速くするつもりです – LapsuS