アヤックス
JavaScript フレームワークを使用する最も説得力のある理由は、ブラウザー間で Ajax リクエストを標準化することです。 Ajax リクエストは、サーバー側スクリプトにリクエストを送信し、XML、JSON、HTML、プレーン テキスト形式のデータなどの応答結果を取得する非同期 HTTP リクエストです。ほとんどの JavaScript フレームワークには、一連のオプションをパラメータとして受け入れる何らかの形式の Ajax リクエスト オブジェクトがあります。これらのオプションには、Web サーバーから応答を受信したときに呼び出されるコールバック関数が含まれます。ExtJS、MooTools、および Prototype は次のようになります。
リスト 11: ExtJS ライブラリ内の Ajax リクエスト
Ext.Ajax.request({
URL: 'server_script.php',
パラメータ: {
名前1: '値1',
名前2: '値2'
}、
メソッド: 'POST'、
成功: 関数(トランスポート) {
アラート(transport.responseText);
}
});
ExtJS は、url、params、メソッド、成功処理関数などのフィールドを含むパラメーターを受け取ります。url フィールドには、Ajax リクエストによって呼び出されるサーバー側スクリプトのアドレスが含まれます。 Params 自体はキーと値のペアで構成されるオブジェクトであり、その後サーバーに渡されます。メソッド フィールドには、GET または POST という 2 つのオプションの値があり、デフォルトはポスト メソッドです。最後のフィールドは success で、サーバーが成功の応答を受け取った後に呼び出されます。この例では、サーバーがプレーン テキストを返し、このテキストがalert() メソッドを通じてユーザーに表示されると想定しています。
次に、MooTools での Ajax リクエストをさらに詳しく見てみましょう。
リスト 12: MooTools での Ajax リクエスト
新しいリクエスト({
URL: 'サーバースクリプト.php',
データ： {
名前1: '値1',
名前2: '値2'
}、
メソッド: '投稿'、
onComplete: 関数(応答) {
アラート(応答);
}
}）。送信（）;
ご覧のとおり、MooTools は ExtJS に非常に似ています。変数はデータ フィールドを介して渡され、メソッド フィールドは小文字にする必要があることがわかります。さらに、成功ハンドラー関数とは異なり、MooTools は onComplete 関数を使用します。最後に、ExtJS とは異なり、MooTools は実際に Request send() 関数を使用してリクエストを送信します。
最後に、Prototype の明らかな違いを見てみましょう。
リスト 13: プロトタイプの Ajax リクエスト
new Ajax.Request('server-script.php', {
パラメータ: {
名前1: '値1',
名前2: '値2'
}、
メソッド: '投稿'、
onSuccess: 関数(トランスポート) {
アラート(transport.responseText);
}
});
Prototype も同様に機能しますが、構文に若干の違いがあります。まず、プロトタイプの Request オブジェクトは、コンストラクターに渡される 2 つのパラメーターを受け入れます。前の 2 つの例で見たように、最初のパラメーターはリクエストの送信先の URL で、2 番目のパラメーターは各 Ajax リクエストのオプションを含むオブジェクトです。もちろん、URI は別のパラメータとして渡され、オプション リストには含まれません。さらに、MooTools とは異なり、Prototype オブジェクトのコンストラクターは暗黙的にリクエストを送信するため、HTTP リクエストをトリガーするメソッドを呼び出す必要がないことにも注意してください。
ほとんどの JavaScript フレームワークは、ここで説明した以外にも Ajax をサポートしています。注目すべき機能強化には、特別な onSuccess 関数を必要とせずに、応答の受信時に要素を自動的に更新する機能が含まれます。一部のライブラリには、Google 検索エンジンで見られるように、入力時にいくつかのクエリの候補が表示される、事前に構築されたオートコンプリート機能が備わっています。
次の章では、JavaScript フレームワークが Web 開発者にもたらすユーザー エクスペリエンス (UE) の向上について学びます。
転載アドレス: http://www.denisdeng.com/?p=729
元のアドレス: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html