マイクロセミ AN1256 Web プログラマーアプリケーションユーザーガイド

コンテンツ 隠れる

1 マイクロセミ AN1256 Web プログラマー向けアプリケーション

2 導入

3 JSONデータアクセスフロー

4 Web フレームワーク

5 JSONのガイドライン Web ページデザイン

マイクロセミ AN1256 Web プログラマー向けアプリケーション

導入

JSON（JavaScript Object Notation）はオープンスタンダードです file データ交換に人間が読めるテキストを使用する形式です。非同期のブラウザ/サーバー通信に使用される一般的なデータ形式です。
新しい web ページデザインでは、JSON形式は元のAJAXスタイルの代わりに使用できます。AJAXと比較すると、JSONを使用すると、 Web 実装がより簡単かつシンプルになります。開発者は web ページデザインと Web JSONアクセスメソッドは各言語で既にサポートされているため、ハンドラの実装は省略できます。 WebStaX ソフトウェアモジュール。
この文書は、ソフトウェアエンジニアが開発する必要があるプログラマー向けのガイドです。 Web ページはJSON経由で表示されます。詳細な手順と例amp次のセクションにも含まれます。

JSONデータアクセスフロー

以上view
これは、クライアント (ブラウザ) から HTTP 接続が開始される JSON データアクセスフローです。サーバー (DUT) 側から受信した JOSN データに応じて、HTML テーブルが動的に作成されます。

図1. クライアントとサーバー間のアクセスフロー

リクエスト/レスポンスJSONデータ
JSON リクエストパケットは HTTP リクエスト POST メソッドに基づいており、コンテンツは MSCC JSON 形式に従う必要があります。

リクエストJSON構文:{"方法"：" ”,”パラメータ”:[ ], “id:”jsonrpc”}
応答 JSON 構文: {"エラー"：、"結果"： , “id:”jsonrpc”}

次のスナップショットは、ブラウザと DUT 間の JSON コンテンツを示しています。

図2. クライアントからのHTTPリクエストのスナップショット

図3. サーバーからのHTTP応答のスナップショット

MSCC JSON仕様
メソッド、パラメータ、説明などを含む完全なJSON情報を取得するには、「http://」と入力します。ブラウザのアドレスバーに「/json_spec」と入力してください。JSON メソッド名「jsonRpc.status.introspection.specific.inventory.get」を介した別のアクセス方法があり、これは特定のメソッドに使用されます。

図4. JSON仕様のスナップショット web ページ

Web フレームワーク

の Web フレームワーク WebStaX ソフトウェアは、オープンソースの MooTools に基づいています。これは、MIT ライセンスによる JavaScript ユーティリティのコレクションです。(http://mootools.net/license.txt) メニューバーとほとんどの web ページはフレームワークに基づいています。AJAX と JSON アルゴリズムの両方がすでにそのユーティリティに統合されています。
その上、 WebStaXソフトウェアはJSONに役立つ他のユーティリティも提供しています web ページデザイン。

json.js – JSON 構文を使用して動的データを送受信するには、 for を使用します。
dynforms.js – HTML テーブルを動的に作成するために使用します。

検証.js – HTML フォームの検証に使用します。

完全な JavaScript ライブラリは、ソースツリーディレクトリの下にあります。 webスタックス2\ vtss_appl\web\html\lib.

JSONのガイドライン Web ページデザイン

このセクションでは、 web MSCC JavaScriptライブラリに基づくページ。ミラーグローバル設定を使用します web ページは元ampここに示します。非同期通信は HTTP JSON アクセスメソッドに基づいており、グローバルに構成されたすべてのパラメータが 1 つの動的 HTML テーブルにリストされます。
の web ページのレイアウトは以下にリストされており、完全なソースコードはソースツリーディレクトリの下にあります。 webstax2\vtss_appl\mirror\html\mirror_ctrl.htm。より一般的な web ページ参照については、付録のセクションを参照してください。

ミラー&Rミラー構成表

図5. Exampグローバル構成テーブル

編集 Web ページ

HTML ヘッダー
HTMLに必要なJSライブラリを含める tag.

動的テーブルリソースを初期化する

HTML ドキュメントの準備ができたら、DynamicTable() を呼び出して動的テーブルリソースを初期化します。

DynamicTable() は、JSON データを受信した後に動的テーブルを作成するために使用されます。
次に、requestUpdate を呼び出して JSON コマンドフローを開始します。

window.addEvent('domready', 関数() {
// JSON データを受信/送信するためのテーブル本体を含むフォームを作成します
myDynamicTable = 新しい DynamicTable(“myTableContent”, “config”, “plusRowCtrlBar”);
4
リクエスト更新();
});

リクエスト/レスポンスJSONデータ

HTML ドキュメントの準備ができたら、requestJsonDoc() を使用して JSON リクエスト「mirror.config.session.get」を送信し、構成されたセッションに関する情報を取得します。
「mirror.capabilities.get」の JSON データが受信された後、コールバック関数 requestUpdate() が処理されます。関数 requestUpdate は次に「mirror.config.session.get」を呼び出して現在の構成を取得します。現在の構成が受信されると、関数 processUpdate が呼び出され、表示されるテーブルが構築されます。

関数 requestUpdate()
{
// テーブルの内容を復元する
myDynamicTable.restore();
5
// このテーブルには 2 つの JSON データがあります。
requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
}

受信したJSONデータを処理する

関数 processUpdate() は、JSON データを受信した後に動的テーブルをレイアウトするために使用されます。

addRows()はテーブル行を追加するために使用されます。myDynamicTable.update()レイアウト
テーブル行のデータに応じた HTML テーブル。

関数 processUpdate(recv_json, name)
{

// データが受信されない場合はプロセスを無視します
場合 (!recv_json) {
alert(“動的データの取得に失敗しました。”);

戻る;
}
// 受信したJSONデータを保存する

myDynamicTable.saveRecvJson(“config”, recv_json);
// テーブル行を追加する
var table_rows = addRows(recv_json);

myDynamicTable.addRows(table_rows);
// この動的テーブルを更新する

myDynamicTable を更新します。
// リフレッシュタイマー

var 自動更新 = document.getElementById(“自動更新”);
自動更新の場合、自動更新がチェックされているとします。
if (タイマーID) {

タイムアウトをクリアします(タイマーID);
}
タイマーID = setTimeout('requestUpdate()', settingsRefreshInterval());

}
}

表の行を追加する

addRows() 関数では、JSON 形式を使用して、テーブル行の各グローバル構成パラメータを入力します。
すべての HTML フィールドは JSON 配列 (“table_rows”) にリストされており、テーブルフィールドの構文は次のとおりです。

構文：
テーブル行:[ 、、… ] : { 、、… }
： {"タイプ"： , “パラメータ”:[ 、、…、 ]}

この場合、各行には「セッションID」、「モード」、「タイプ」、「VLAN ID」、「リフレクタポート」の5つのフィールドがあります。例：ampル、

セッションID (名前フィールド: int32_t)	1 (ミラーセッションのID)
モード (名前フィールド: vtss_bool_t)	真実 (ミラーセッションが有効になっていることを意味します)
タイプ (名前フィールド: 列挙 {ミラー、rMirrorSource、rMirrorDestination}	Rミラーソース（これはリモートミラーセッションのソースです
VLANID (名前フィールド: uint16_t)	200 (ミラーリングに使用されるVLAN)
リフレクターポート (名前フィールド: vtss_ifindex_t)	ギ 1/1 （ミラーリングされたトラフィックが送信されるポート

myDynamicTable.addRows() は JSON データを HTML 形式に変換し、HTML テーブルを出力します。

関数 addRow(キー, 値)

{
var none_map_val = 0xFFFFFFFF、none_map_text = “なし”、none_interface_text = “なし”;
var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;

var row = {フィールド:[
{タイプ:”link”, パラメータ:[“cr”, “mirror.htm?session_id=” + キー, キー]},
{タイプ:”テキスト”, パラメータ:[oTMode[oVMode.indexOf(val.Mode)], “c”]},

{タイプ:”テキスト”、パラメータ:[oTType[oVType.indexOf(val.Type)], “c”]},
{type:”text”, params:[val.Type == “mirror” ? “-“:
val.RMirrorVlan, “c”]},
{type:”text”, パラメータ:[val.Type == “rMirrorSource” ?
val.ReflectorPort: “-”、“c”]}

]};
行を返します。
}

関数 addRows(recv_json)
{
var 行、empty_colspan = 7;

var table_rows = 新しい配列();
// テーブルヘッダーを追加
テーブル行にヘッダーを追加します。

// 1行追加
Object.each(recv_json, 関数(レコード) {
table_rows.push(addRow(record.key, record.val));

});
table_rows を返します。
}

Web ヘルプページ
については web ヘルプページの設計では、ヘルプの説明はJSON仕様を参照することができ、説明テキストはJSON出力と一致し、冗長な説明を減らすのに役立ちます。例：ampここのファイルは、dhcp6 リレー構成から取得されます。

ソース内のハイパーリンク file
ヘルプを割り当てる file ソース内の位置 file html tag固定変数名「help_page」は、 web ヘルプページの割り当て。

// ヘルプページのマジック
var help_page = “/help/help_xxx.htm”;

JSON仕様からHTMLフィールドの説明を更新

使用またはhtml tag HTMLテーブルの説明を宣言し、一意のIDを付与します。 tag.
HTML ドキュメントの準備ができたら、loadXMLDoc() を呼び出して JSON 仕様全体を取得するか、JSON メソッド名「jsonRpc.status.introspection.specific.inventory.get」で特定のメソッドの説明を取得します。

processTableDesc() はテーブルの説明を更新するために使用され、processUpdate() はテーブルパラメータの説明を更新するために使用されます。
processUpdate() で、updateTableParamsDesc() を呼び出して、特定の要素名に一致する JSON 要素を更新します。
更新するまたは tag 要素の説明に従った内部 HTML。

/* HTML の説明フィールドを更新します */
関数 processTableDesc(req) {

応答テキストが必要な場合
戻る;
}

var json_spec = JSON.decode(req.responseText);
// テーブルの説明を更新
$(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;

}
/* HTML テーブルパラメータの説明を更新します */
関数 processUpdate(recv_json) {

// テーブルパラメータの説明を更新
var パラメータ名 = [
{

「エイリアス」：「インターフェース」、
「タイプ」: 「vtss_ifindex_t」、
「名前」: 「vlanInterface」、

「接尾辞」：「。」
},
{

「エイリアス」：「リレーインターフェース」、
「タイプ」: 「vtss_ifindex_t」、
「名前」: 「リレーVlanインターフェース」、

「サフィックス」: 「中継に使用されるインターフェースの ID。」
},
{

「エイリアス」：「リレー先」、
「タイプ」: 「mesa_ipv6_t」、
「名前」: 「リレー先」、

「サフィックス」: 「要求を中継する DHCPv6 サーバーの IPv6 アドレス。デフォルト値 'ff05::1:3' は '任意の DHCP サーバー' を表します。」
}
];

TableParamsDesc を更新します(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
}
/* JSON仕様を取得 */

window.addEvent('domready', 関数() {
XMLDoc をロードします(“/json_spec”, processTableDesc);
リクエストJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, プロセス更新);

});

メニューバーのハイパーリンク

メニューバーのHTMLソースコードは以下から生成されます。 file webstax2\vtss_appl\web\ menu_default.cxx。
この項目を編集する file のために Web ページのハイパーリンク。

#定義されている場合(VTSS_SW_OPTION_DHCP6_RELAY)
ITEM(”リレー,dhcp6_relay.htm”);
#endif //VTSS_SW_OPTION_DHCP6_RELAY

注記
メニューバーのグループレベルを決定するために使用されるITEM(“”)内のスペース文字の数に注目してください。この場合、すべて web ページは「DHCPv6」グループの下にあります。

図6.例ampグローバル構成テーブル

付録

典型的な web ページ

いくつかの典型的な web ページはリファレンスデザインに使用できます。追加の例ampここで示すファイルは、vtss_appl\mirror\html\mirror.htm にある単一のミラーセッションの構成です。
の web このページでは、単一のミラーセッションの詳細な構成を示します。構成されたすべてのパラメータが一覧表示されます。

現在の設定を適用するには、「保存」ボタンをクリックします。
現在の設定をリセットするには、「リセット」ボタンをクリックします。
「キャンセル」をクリックすると、上に戻りますview ミラーセッション

ミラー&Rミラー構成

グローバル設定

ソースVLANの設定

ポート構成

図7. Exampミラーセッションの詳細構成ファイル
「保存」、「リセット」、「キャンセル」ボタンは HTML コードによって追加されます。

JSONコマンドフロー
このページでは、2 つのステップのコマンドフローが必要です。

まず、「mirror.capabilities.get」メソッドを使用してデバイスの機能を取得する必要があります。機能は変更されないため、一度だけ読み取る必要があります。
次に、メソッド「mirror.config.session.get」、「port.status.get」、およびスタッキングの場合は「topo.config.stacking.get」を使用して、デバイスの現在の構成を取得する必要があります。

「mirror.capabilities.get」の呼び出しは「domready」イベントによって開始され、結果は関数 requestUpdate によって処理されるように構成されます。
requestUpdateは「mirror.config.session.get」の呼び出しを開始します。
「port.status.get」、スタッキングの場合は「topo.config.stacking.get」、およびこれらの呼び出しの結果は、関数 prepareUpdate によって処理されるように構成されます。
関数prepareUpdateはすべての結果を収集し、すべての結果が受信された場合にのみ関数processUpdateを呼び出し、表示されるテーブルを構築します。 web.