1

私は ajax atm だけを学んでいますが、これまでのところ、私の最良のアプリケーションはフォーム検証です。

私の概念的な質問は、たとえば特定のページ フラグメントを更新する必要がある場合に、設計上の問題に対処する最善の方法は何かということです。

基本的なシナリオ:

ページ 1 とページ 2 があり、両方のページに同じメニューとフッターがあります。ページ 1 には、いくつかの統計の内容を含む適切にフォーマットされた表が含まれており、ページ 2 にはメッセージが含まれています。ページ 1 からページ 2 に、またはページ 1 からページ 2 に移動したときにメニューが一番上に表示されるように ajax を実装したいと考えています。

たとえば、サーバーから JSON を返すリクエスト ハンドラーがあります。ページ 1 の ajax リクエストの場合、サーバーはページ 2 のメッセージに対してテーブル データのみを返します。

混乱は、返されるデータのページフラグメントを正しくフォーマットするために設計情報を保存する方法と場所です。一般的な戦略は何ですか? ajax メソッド内の「成功」イベントでデータに css を手動で適用することですか? しかし、サーバーも標準リクエストのフォーマット自体を適用するため、クライアントとサーバーの間に不整合が生じませんか? そして、ajax リクエストから返されるコンテンツ データが、私が示した例のように劇的に異なる設計を要求する場合、それは、html および css アプリケーションの大部分を javaScript に外部化することを意味します。

  1. ページの大きな断片を更新する - コードがクライアント側で保守できなくなるか、クライアント側でもテンプレート エンジンが必要になります。
  2. サーバー側でテンプレート エンジンを使用し、Java の場合はプレーンな .jsp を使用します。-たとえば、「apache tiles」のビューチャンクの構文と構造を取得し、クライアント側の ajax 応答処理セクション用に css を使用してプレーンな html を記述する必要があります。

もちろん XML を返すこともできますが、たとえば Spring Framework の場合、コンバーターが自動的にジョブを実行するように、開発の軌跡は JSON を支持しているようです..

これは vaadin や GWT のユーザーにとっては少し気になるところですが、私は従来の MVC を支持し、コード ジェネレーターを使用していません。

コンテキストを絞り込むために、Spring MVC with JSP および Spring MVC + Apache Tiles で人々がこれをどのように処理するかに特に興味があります。

また、JSON のデータを含む HTML デザイン メタデータをクライアントに送信することもできますが、これは本当に恐ろしいことでしょうか? しかし、ここでもサーバー側のビュー レンダリング テクノロジとの不一致があります。

ここで非常に基本的で重要な何かが欠けていると思います。

ありがとうございました、

4

1 に答える 1

1

システムの多くのページでこのメニューとフッターを再利用する場合は、Thymeleaf、JSP タグ、Apache Tiles などのテンプレート エンジンを使用することをお勧めします。

しかし、あなたが本当に興味を持っているのは、AJAX を介して部分的なページ コンテンツの遷移を管理する方法であり、(当然のことながら) コントローラー レイヤーにページ フラグメントの生成を任せたくないということだと思います。

ここでは、ページ 1 テーブルとページ 2 メッセージの両方を含む単一のページを生成します。

<div id="page1" style="display: none">
    <%--table structure, without data--%>
</div>

<div id="page2" style="display: none">
    <%--message display, without message content--%>
</div>

ここで、生データを JSON 形式で返す 2 つの Spring MVC コントローラー メソッドを作成します。1 つはテーブル データを返し、もう 1 つはメッセージを返します。

最後に、コントローラーを呼び出し、データを取り込み、ページ遷移を管理する Javascript ハンドラーを作成します。簡潔にするために jQuery 構文を使用します。

$.getJSON( 'mycontroller/page1', params, function( jsonData ) {
    // populate table data
    $( '#page1' ).show();
    $( '#page2' ).hide();
} );

テーブル データを表示するには、次の操作を行います。

$.getJSON( 'mycontroller/page2', params, function( jsonData ) {
    // populate message text
    $( '#page1' ).hide();
    $( '#page2' ).show();
} );

メッセージを表示します。

もちろん、Javascript を使用するようになったので、必要に応じて、show() をスライドやフェードインなどの派手なアニメーション トランジションに置き換えることができます。

于 2013-06-29T21:01:00.713 に答える