Ajaxでのページ読み込みについて

Question

Twitterのトップページはヘッダー（メニュー）とツイート一覧が表示されるタイムラインの部分がAjaxで別々に読み込まれていると思うのですがこれはどのような仕組みで別々に読み込んでいるのでしょうか。

簡単に言えばトップページにiframeで別のファイルを読み込んでいるようなものなのでしょうか。Twitterのトップページのようにヘッダーとツイート一覧が表示されるタイムラインを別々に読み込みたい（全体を一気に読み込むと時間がかかって画面に何も表示されない時間が長くなるので先にデータが少ないヘッダーだけで読み込んでおいて常に何かの情報が画面にある状態にしたい）のですがどのように調べたら良いのでしょうか。

初心者なので色々おかしなところもあるかもしれませんが教えていただけると幸いです。

Comments

[H40831]

Twitterについてではなく世間一般的な話ですが、
WEBサービスにどのような技術が使われているかは秘匿すべき情報だと聞いたことがあります。
(使っている技術の脆弱性が発見された時に、悪意あるユーザーから攻撃される危険性があるため)

なので、どのような仕組みでページを分けているかどうかは秘匿されているのではないでしょうか？

あと、AjaxというのはJavaScriptでHTTP通信を行うための技術の名前ですので、iframeで表示しているとしたらそれはAjaxではありませんし、バックエンドの技術で読み込んでいたとしても、それはAjaxではありません。

一般的にリクエストを分けて表示しているとしたら、何らかのフレームワークのHTMLテンプレートやらインポートやら呼ばれるような技術を使って実装していることが多いと思います。

Twitterは有名なサービスなので、例外的に答えを知っている人がいるかもしれませんが、参考までにコメントさせていただきました。

[m.ts10806]

H40831さん
よく読めば分かりますが、iframe＝Ajaxと捉えてのコメントではないようですよ。
「ようなものなの」なので。あくまでイメージの話をされています。つまり理解するための例え話です。
（iframeで非同期のような挙動をさせることも可能のようですけど）

ちなみに、
>WEBサービスにどのような技術が使われているかは秘匿すべき情報だと聞いたことがあります。
結構色んなところで出てますよ。ニュースになるケースもあるようで。調べてみてください。
言語、またはフレームワークも分かる場合もあります。
使われている技術がバレる＝脆弱性を突かれる　が必ず成り立つわけではなく、技術を使う側も分かって使っているのでその脆弱性の対策くらいはきちんとやってます。だからサービスが長きに渡り成り立ちます。
特にGAFAについては技術の進歩に併せて我々が想像を絶する費用を掛けて研究・検証・導入を行っています。それらの技術を我々が使ってるわけですけどね。

Answer 1

先にデータが少ないヘッダーだけで読み込んでおいて常に何かの情報が画面にある状態にしたい

ここだけに応えると「スケルトンスクリーン」という表現方法があるので調べてみてください。
（Facebookで採用されているようです）

全体を一気に読み込むと時間がかかって画面に何も表示されない時間が長くなるので

これについては「次の１０件を読み込む」と類似の仕組みも適用できます。
最初に１０件を表示しておき、何かのタイミングでその次の１０件を非同期で読み込む。
その「何かのタイミング」がボタンなのか、ある程度スクロールしてからなのかの違いで
その中の処理は同じと思って良いです。
Twitterはこのタイプですね。

---

「スケルトンスクリーン」も「次の〇件を読み込む」も画面初期表示の負荷を減らせる手法です。
どちらが良いかは一長一短あるかと思います。
自身が作りたいサービス、アプリケーションにあわせてご検討ください。

Comments

[kimai]

スケルトンスクリーンにした場合投稿一覧だけでなくページ全体（ヘッダー部分）もスケルトンスクリーンにし無いといけないのでしょうか

[m.ts10806]

そこは作る側の都合でどうにでもできます。

[kimai]

回答ありがとうございます。
別々にヘッダーと本体を読み込む際はAjaxで実装するのでしょうか

[m.ts10806]

そこは作る側の都合でどうにでもできます。
１つのことを実現する手段は１つではありません。Ajaxすら手段の１つです。