次のように、内部にブロックがあるHTMLページを1つだけ使用するとどうなりますか
<div id="page1" style="display:block">...</div>
<div id="page2" style="display:none">...</div>
<div id="page3" style="display:none">...</div>
アクティブなブロックにはstyle="display：block" other "display：none"があり、ブロックがアクティブになると "display：block"前は "display：none"になります。
たとえば、AJAXサーバー通信
$.post("json", { "name": $("#name").val(), "sex": $("#sex").val() },
function(data) { console.log("server responded", data); });
このアプローチの欠点は何ですか？
これは高速で動的ですが、このアプローチにはブックマーク機能がありません。データが動的であるため、ユーザーは特定のリンクを保存できません。また、検索エンジンに適していません。別の欠点は、履歴ボタンの前後が機能しないことです。
純粋なAJAXを使用することに不利な点はありません。実際、多くの点で、その利点があります。
正しく計画しないと、いくつかの問題が発生する可能性があります。たとえば、CSSは一度に1ページずつ効果を発揮することに慣れていますが、純粋なAJAXを使用すると、CSSはすべてのページに影響を与えます。
また、すべてが少し難しくなります。JavaScriptを使用する必要があるため、別のページへのリンクは難しくなります。
最後に、あなたのAPPはJavaScriptを必要とするので、まともなフォールバックがあります。
このアプローチは、jQuery Mobile などの一部のモバイル Web フレームワークで使用されており、Web アプリケーションをよりネイティブに感じさせることを目的としています。これは、ページ遷移ごとにサーバーへの移動が必要な従来の Web サイトや Web アプリケーションよりも Web 2.0 に近いものです。
メリットはすでにご存じだと思いますので、デメリットに移りましょう。
わずかに大きい初期レイテンシ:
このアプローチの主な欠点は、サーバーからすべての HTML を 1 回のトリップで取得するため、ページ コンテンツの読み込みに少し時間がかかることです。したがって、最初の読み込み時間は、従来の Web 1.0 アプリケーションよりも待ち時間が長くなる可能性があります。ただし、私の経験では、わずか数ページの場合、待ち時間は問題になるほど大きくはありません.
戻るボタンの喪失 - 履歴の維持がより複雑になる:
もう 1 つの潜在的な欠点は、開発者として、サイトの開発に別の方法でアプローチする必要があることです。1 つの DIV ブロックを非表示にして別のブロックを再表示することでページを移行しているため、ネイティブの [戻る] ボタンの機能が失われます。これは、URL のハッシュを使用してページ遷移の履歴を記録することで軽減できます。次に、イベントを登録してハッシュを監視し、ユーザーが後方に移動したときに古いコンテンツをリロードする必要があります。また、JavaScript オブジェクトと変数の状態を変更して古い状態を反映させる必要があり、これによりアプリが複雑になる可能性があります。もちろん、これを実装しやすくし、適切で保守可能なコードを作成するのに役立つ API とライブラリがあります。
よりステートフルなスコープには、アプローチの再考と可能な学習曲線が含まれます。
最後に、各遷移後に各ページの範囲がリセットされないことを覚えておく必要があります。アプリがよりステートフルであるという点で、これは実際には利点となる可能性がありますが、各ページが読み込まれると、設定したすべての JavaScript 変数とデータが消去されるという考え方を忘れる必要があります。
概要：
私の提案は、このルートに行く場合は、ライブラリを使用することです。正当な理由がない限り、車輪を再発明しないでください。jQuery mobile のようなライブラリは、古いブラウザーでも確実にフォールバックできるようにするのに役立ちます。一部のライブラリは、JavaScript が無効になっている場合でも、Web 1.0 の手法を使用してサイトが引き続き読み込まれるようにします。