優雅な劣化ajaxのWebページを構築する方法は？

Question

「優雅な劣化」でWebページを作成したいと思います。つまり、WebページはJavaScriptでも機能します。今、私はAJAX応答の形式について設計上の決定を下さなければなりません。

JavaScriptが無効になっている場合、サーバーへの各HTTP要求は応答としてHTMLを生成します。ブラウザは、返されたHTMLでリフレッシュします。それはいいです。

JavaScriptが有効になっている場合、サーバーへの各AJAX HTTP要求は...まあ、JSONまたはHTMLを生成します。

HTMLの場合、簡単に実装できます。 Pageの一部を返されたHTMLに置き換えるJavaScriptを用意してください。また、サーバー側では、コードの変更はあまり必要ありません。

JSONの場合、サーバー側のロジックをほぼ複製するJavaScriptにJSON-to-HTMLロジックを再度実装する必要があります。 複製は悪です. 。私は本当にそれが好きではありません。利点は、帯域幅の使用法がHTMLよりも優れているため、パフォーマンスが向上します。

それで、優雅な劣化の最良の解決策は何ですか？ ajaxはJSONまたはHTMLを返す方がよいですか？

Answer 1

「最高の解決策」があるとは思わない どれか 与えられた状況。おそらく、特定の解決策に対する「適切な解決策」だけです。それは本当にあなたがやろうとしていることに依存します。私にとって優雅な劣化が意味することは次のとおりです。

• できるだけ多くのブラウザ（デスクトップとモバイル）で機能する「十分な」インターフェイスを構築します。
• 控えめにいくつかのスクリプト（検証方法、タブやスライダーなどのインターフェイス要素など）を追加します。これは、ページがロードされたブラウザに機能するために必要な機能が必要な場合にのみ存在します。

サーバーの応答でHTMLまたはJSONを使用するかどうかは非常に主観的であるかどうか、私はしばしばそれらのどちらかを選択するのに苦労しています。たとえば、サーバーからキー価値のペアの束を受け取り、既存の選択要素にレンダリングすると意味すると主張するかもしれません。 その他のコード したがって、コーディングに費やした時間と潜在的なバグが増えます。代わりに、サーバーから事前に構築された選択要素を要求し、コンテナに注入するだけです。要素を構築するためのロジックは、すでにサーバーに存在しているため、2つの異なる言語で2回構築する理由です。

もう1つの視点は、JSONが帯域幅の使用法を最小化するため、JSONを解析してクライアントにマークアップを構築するためにさらに距離を置く価値があることです。いくつかの理由で、私はその観点に反対するのは簡単だと思います（私は いいえ 一般化、誤解しないでください）。まず、多くの多くのウェブサーバーが出力を圧縮/デフレート/GZIPするように構成されており、多くの多くのブラウザが圧縮コンテンツを受け入れます。マークアップはです 非常に 冗長性のボートロードが含まれているため、圧縮可能です（<strong></strong>）。したがって、JSON応答のサイズは、マークアップの応答よりも圧倒的に小さくないことを考慮することは合理的です。第二に、大規模なデータセットは、クライアントのかなりの実行時間を意味する可能性があります（厄介でネストされたループは一般的です - ここに表示されるいくつかの質問で明らかです）。

あなたへの私のアドバイスは、各アプローチに対する水路と欠点を理解し、その情報を活用することです。あなたはこれを読みたいかもしれません：

http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html

Answer 2

IMOは、HTMLを使用すると、セキュリティリスクが高まります（MITMスクリプトインジェクションなど）。 「複製」に節約された時間は、アプリをする前にサニタイズに本当に費やす必要があります。

JSONは安全に解析でき、通常、帯域幅を保存すると言うように、はるかにコンパクトです。

どちらを選ぶか知っています（JSON）。

Answer 3

まず、JavaScript対応ユーザーと非対応ユーザーの両方を本当にサポートする必要があるかどうかについて慎重に考えてください。私のお金のために、Ajaxの素晴らしいところは、それが情報からディスプレイ（HTMLの構築）を分離することです。

とはいえ、ここにうまくいくかもしれないアプローチがあります：

1. ページを実行する必要があることを実行し、可能な限り単純なフォームで回答（何であれ）を返すサーバー側のプログラムを作成します。単純な出力の場合 - それが機能するかどうかを示すだけでなく、これは単なる数字または単純な文字列である可能性があります。単一の結果よりも複雑なものについては、おそらくXMLになります。

2. 単にプログラムを呼び出し、結果をプレーンテキストまたはXMLとして出力するサーバー側のスクリプトを書きます。

3. プログラムを呼び出してHTMLページを構築する別のサーバー側のスクリプトを記述します。

4. ユーザーがルーチンを実行するために呼び出すページには、Control（例：ボタン）を書き込むJavaScriptsを含めます。これは、Ajaxリクエストを送信して最初のスクリプトを呼び出し、結果を解析し、それに応じてページを更新します。また、noscriptタグ内に別のコントロールを含めて、JS対応のユーザーが表示されないようにします。そのため、2つのスクリプトが必要ですが、計算の主な肉は一度だけ行われます。