Microsemi AN1256 Web Demande de programmeurs

Introduction

JSON (JavaScript Object Notation) est un standard ouvert file format qui utilise du texte lisible par l'homme pour l'échange de données. Il s'agit d'un format de données courant utilisé pour la communication asynchrone navigateur/serveur.
Pour le nouveau web conception de page, le format JSON peut remplacer le style AJAX d'origine. Comparé à AJAX, l'utilisation de JSON rend le Web mise en œuvre plus facile et plus simple. Le développeur n'a qu'à se concentrer sur web la conception des pages et la Web l'implémentation du gestionnaire peut être omise car la méthode d'accès JSON est déjà prise en charge dans chaque WebModules logiciels StaX.
Ce document indique le guide du programmeur pour l'ingénieur logiciel qui a besoin de développer le Web page via JSON. Les procédures de détail et exampfichiers également inclus dans les sections suivantes.

Flux d'accès aux données JSON

Surview
Voici le flux d'accès aux données JSON auquel une connexion HTTP est initiée à partir du client (navigateur). La table HTML est créée dynamiquement en fonction des données JOSN reçues du côté serveur (DUT).

Figure 1. Le flux d'accès entre le client et le serveur

Données JSON de requête/réponse
Le paquet de requête JSON est basé sur la méthode de publication de requête HTTP et le contenu doit suivre le format MSCC JSON.

• Demander la syntaxe JSON :{"méthode":" ”,”paramètres” :[ ], "identifiant :"jsonrpc"}
• Syntaxe JSON de la réponse : {"erreur": ,"résultat": , "identifiant :"jsonrpc"}

Les instantanés suivants montrent le contenu JSON entre le navigateur et le DUT.

Figure 2. Instantané de la requête HTTP du client

Figure 3. Instantané de la réponse HTTP du serveur

Spécification MSCC JSON
Pour obtenir toutes les informations JSON, y compris la méthode, le paramètre, la description, etc. Tapez "http:// /json_spec" dans la barre d'adresse de votre navigateur. Il existe une autre méthode d'accès via le nom de méthode JSON "jsonRpc.status.introspection.specific.inventory.get", elle est utilisée pour une méthode spécifique.

Figure 4. Instantané de la spécification JSON web page

Web cadre

Le Web cadre dans WebLe logiciel StaX est basé sur un MooTools open source. Il s'agit d'une collection d'utilitaires JavaScript avec licence MIT. (http://mootools.net/license.txt) La barre de menus et la plupart des web les pages sont basées sur le framework. Les algorithmes AJAX et JSON sont déjà intégrés dans ses utilitaires.
En plus, WebLe logiciel StaX fournit les autres utilitaires utiles pour le JSON web conception de pages.

• json.js – Utilisez for pour transmettre/recevoir les données dynamiques avec la syntaxe JSON.
• dynforms.js – Utilisez pour créer le tableau HTML dynamiquement.
• valider.js – Utiliser pour la validation du formulaire HTML.

Les bibliothèques JavaScript complètes sont situées sous le répertoire de l'arborescence source : webstax2\vtss_appl\web\html\lib.

Directive pour JSON Web conception de page

Cette section explique comment concevoir un web page basée sur les bibliothèques JavaScript MSCC. Nous utilisons le miroir global configuré web page comme l'example ici. La communication asynchrone est basée sur la méthode d'accès HTTP JSON et tous les paramètres configurés globaux sont répertoriés dans un tableau HTML dynamique.
Le web la mise en page est répertoriée ci-dessous et le code source complet se trouve sous le répertoire de l'arborescence des sources : webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Pour devenir plus typique web référence des pages, voir la section annexe.

Tableau de configuration des miroirs et des miroirs

Figure 5. Exampfichier de la table globale configurée

Modifier Web page

En-tête HTML
Inclure les bibliothèques JS nécessaires dans le HTML tag.

Initialiser la ressource de table dynamique

• Lorsque le document HTML est prêt, appelez DynamicTable() pour initialiser la ressource de table dynamique.
• Le DynamicTable () est utilisé pour créer la table dynamique après avoir reçu les données JSON.
• Il appellera ensuite requestUpdate pour lancer le flux de commandes JSON.

1. window.addEvent('domready', function() {
2. // Crée un formulaire avec un corps de table pour recevoir/transmettre des données JSON
3. myDynamicTable = new DynamicTable("myTableContent", "config",,"plusRowCtrlBar");
   4
4. demandeMise à jour();
5. });

Données JSON de requête/réponse

• Lorsque le document HTML est prêt, utilisez requestJsonDoc() pour envoyer la requête JSON « mirror.config.session.get » afin d'obtenir des informations sur les sessions configurées.
• Une fois les données JSON pour "mirror.capabilities.get" reçues, la fonction de rappel requestUpdate() sera traitée. La fonction requestUpdate appellera alors "mirror.config.session.get" pour obtenir la configuration actuelle. Lorsque la configuration courante est reçue, la fonction processUpdate est appelée pour construire la table à afficher.

1. fonction requestUpdate()
2. {
3. // Restaure le contenu de la table
4. maTableDynamique.restore();
   5
5. // Ce tableau contient deux données JSON.
6. requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
7. }

Traiter les données JSON reçues

• La fonction processUpdate() est utilisée pour mettre en page la table dynamique après avoir reçu les données JSON.
• Le addRows () est utilisé pour ajouter des lignes de table. myDynamicTable.update() dispose le
  Tableau HTML selon les données des lignes du tableau.

1. fonction processUpdate(recv_json, nom)
2. {
3. // Ignorer le processus si aucune donnée n'est reçue
4. si (!recv_json) {
5. alert("Échec de l'obtention des données dynamiques.");
6. retour;
7. }
8. // Enregistrer les données JSON reçues
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Ajouter des lignes de tableau
11. var table_rows = addRows(recv_json);
12. maDynamicTable.addRows(table_rows);
14. // Mettre à jour cette table dynamique
15. maTableDynamique.update();
17. // Rafraîchir le minuteur
18. var autorefresh = document.getElementById("autorefresh");
19. if (autorefresh && autorefresh.checked) {
20. si (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Ajouter des lignes de tableau

• Dans la fonction addRows(), nous utilisons le format JSON pour remplir chaque paramètre global configuré dans la ligne du tableau.
• Tous les champs HTML sont répertoriés dans le tableau JSON ("table_rows") et la syntaxe du champ de table est ci-dessous.

Syntaxe:
table_rows :[ , , … ] : { , , … }
: {"taper": , "paramètres":[ , , …, ]}

• Dans ce cas, chaque ligne comporte cinq champs : "Session ID", "Mode", "Type", "VLAN ID" et "Reflector Port" Par example,

ID de session (Champ Nom : int32_t)	1 (Identifiant de la session miroir)
Mode (Champ Nom : vtss_bool_t)	vrai (Ce qui signifie que la session miroir est activée)
Taper (Champ Nom : énumération {miroir, rMirrorSource, rMirrorDestination}	Source du miroir RMirror (c'est la source d'une session miroir à distance
ID VLAN (Champ de nom : uint16_t)	200 (le vlan utilisé pour la mise en miroir)
Port de réflecteur (Champ Nom : vtss_ifindex_t)	Gi 1/1 (Le port auquel le trafic mis en miroir est envoyé

• Le myDynamicTable.addRows() convertira les données JSON au format HTML et générera le tableau HTML.

1. fonction addRow(clé, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Aucun", none_interface_text = "AUCUN" ;
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var ligne = {champs :[
6. {type :"link", params :["cr", "mirror.htm?session_id=" + clé, clé]},
7. {type :"texte", paramètres :[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {type :"texte", paramètres :[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type :"texte", paramètres :[val.Type == "miroir" ? "-" :
   val.RMirrorVlan, "c"]},
10. {type :"texte", params :[val.Type == "rMirrorSource" ?
    val.ReflectorPort : "-" , "c"]}
11. ]} ;
12. ligne de retour ;
13. }
14. fonction addRows(recv_json)
15. {
16. var ligne, empty_colspan = 7 ;
17. var table_rows = nouveau tableau();
18. // Ajouter un en-tête de tableau
19. addHeader(table_rows);
20. // Ajouter une seule ligne
21. Object.each(recv_json, fonction(enregistrement) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. retourne table_rows ;
25. }

Web page d'aide
Pour le web conception de la page d'aide, la description de l'aide peut faire référence à la spécification JSON, que le texte de description peut être cohérent avec la sortie JSON et aide à réduire les descriptions redondantes. Example ici est tiré de la configuration du relais dhcp6.

Lien hypertexte dans la source file
Affecter l'aide file emplacement dans sa source file HTML tag. Le nom de variable fixe "help_page" est utilisé pour la web affectation de la page d'aide.

2. // Magie de la page d'aide
3. var help_page = "/help/help_xxx.htm" ;

Mettre à jour la description du champ HTML à partir de la spécification JSON

• Utiliser ou HTML tag pour déclarer la description de la table HTML et donner un identifiant unique pour le tag.
• Lorsque le document HTML est prêt, appelez loadXMLDoc() pour obtenir l'intégralité de la spécification JSON ou obtenir la description de la méthode spécifique par le nom de méthode JSON "jsonRpc.status.introspection.specific.inventory.get".
• Le processTableDesc() est utilisé pour mettre à jour la description de la table et processUpdate() est utilisé pour mettre à jour la description des paramètres de la table.
• Dans processUpdate(), appelez updateTableParamsDesc() pour mettre à jour les éléments JSON qui correspondent aux noms d'éléments spécifiques.
• Mettre à jour le ou tag HTML interne selon la description de l'élément.

2. /* Mettre à jour les champs de description HTML */
3. fonction processTableDesc(req) {
4. si (!req.responseText) {
5. retour;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Mettre à jour la description de la table
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan").description ;
10. }
11. /* Mettre à jour la description des paramètres du tableau HTML */
12. fonction processUpdate(recv_json) {
13. // Mettre à jour la description des paramètres de la table
14. var noms_paramètres = [
15. {
16. "alias": "Interface",
17. "type": "vtss_ifindex_t",
18. "nom": "vlanInterface",
19. "suffixe": "."
20. },
21. {
22. "alias": "Interface relais",
23. "type": "vtss_ifindex_t",
24. "nom": "relayVlanInterface",
25. "suffixe": ". L'identifiant de l'interface utilisée pour le relais.
26. },
27. {
28. « alias » : « Destination relais »,
29. "type": "mesa_ipv6_t",
30. "nom": "destination_relais",
31. "suffixe": ". L'adresse IPv6 du serveur DHCPv6 vers lequel les requêtes doivent être relayées. La valeur par défaut 'ff05 :: 1: 3' mans 'n'importe quel serveur DHCP'.
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Obtenir la spécification JSON */
37. window.addEvent('domready', function() {
38. loadXMLDoc("/json_spec", processTableDesc);
39. requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Lien hypertexte dans la barre de menu

• Le code source HTML de la barre de menus est généré à partir de file webstax2\vtss_appl\web\ menu_default.cxx.
• Modifiez les éléments de ce file pour le Web lien hypertexte de la page.

1. #si défini(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM("Relais,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTE
Notez que le nombre de caractères d'espace dans ITEM (""), qui est utilisé pour décider du niveau de groupe dans la barre de menus. Dans ce cas, tout web les pages sont sous le groupe "DHCPv6".

Figure 6.Exampfichier de la table globale configurée

Appendice

Typique web pages

Il existe plusieurs types web pages peuvent être utilisées pour la conception de référence. Un ex supplémentaireampLe fichier à montrer ici est la configuration d'une seule session miroir trouvée dans vtss_appl\mirror\html\mirror.htm.
Le web La page fournit la configuration détaillée pour une seule session miroir. Tous les paramètres configurés sont répertoriés.

• Cliquez sur le bouton "Enregistrer" pour appliquer la configuration actuelle.
• Cliquez sur le bouton "Réinitialiser" pour réinitialiser la configuration actuelle.
• Cliquez sur "Annuler" pour revenir à la finview de sessions miroir

Configuration du miroir et du miroir

Paramètres globaux

Configuration des VLAN sources

Configuration du port

Figure 7. Exampfichier de configuration détaillée de la session miroir
Les boutons « Enregistrer », « Réinitialiser » et « Annuler » sont ajoutés par le code html :

Flux de commande JSON
Cette page nécessite un flux de commandes en deux étapes :

• Il doit d'abord obtenir les capacités de l'appareil avec la méthode "mirror.capabilities.get". Les capacités ne changent pas et ne doivent être lues qu'une seule fois.
• Ensuite, il doit obtenir la configuration actuelle de l'appareil en utilisant les méthodes "mirror.config.session.get", "port.status.get" et en cas d'empilement "topo.config.stacking.get".

L'appel de « mirror.capabilities.get » est initié par l'événement « domready » et le résultat est configuré pour être géré par la fonction requestUpdate.
Le requestUpdate initiera l'appel de "mirror.config.session.get",
"port.status.get" et en cas d'empilement "topo.config.stacking.get" et les résultats de ces appels sont configurés pour être gérés par la fonction prepareUpdate.
La fonction prepareUpdate collectera tous les résultats, et ce n'est que lorsqu'ils auront tous été reçus qu'elle appellera la fonction processUpdate qui construira les tables à afficher sur le web.

Références

1. Wikipédia JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. LuneOutils https://mootools.net/

Documents / Ressources

Microsemi AN1256 Web Demande de programmeurs [pdf] Guide de l'utilisateur AN1256, AN1256 Web Demande de programmeurs, Web Programmeurs Application, Application

Références

• Manuel d'utilisation