Microsemi AN1256 Web Programmers Application

Introduction

JSON (JavaScript Object Notation) is an open-standard file format that uses human-readable text for data exchanging. It is a common data format used for asynchronous browser/server communication.
For the new web page design, JSON format can be a replacement for the original AJAX style. Compare to AJAX, using JSON makes the Web implementation easier and simpler. The developer only need to focus on web page design and the Web handler implementation can be omitted since JSON access method is already supported in each WebStaX software modules.
This document states the programmers guide for the software engineer who need to develop the Web page via JSON. The detail procedures and examples also included in the following sections.

JSON data access flow

Overview
Here’s the JSON data access flow which a HTTP connection is initiated from the client(browser). The HTML table is created dynamically according to the received JOSN data from the server(DUT) side.

Figure 1. The access flow between client and server

Request/Response JSON data
The JSON request packet is based on HTTP request post method and the content have to follow the MSCC JSON format.

• Request JSON syntax: {“method”:””,”params”:[], “id:”jsonrpc”}
• Response JSON syntax: {“error”:,”result”:, “id:”jsonrpc”}

The following snapshots show the JSON content between the browser and DUT .

Figure 2. Snapshot of HTTP request from client

Figure 3. Snapshot of HTTP response from server

MSCC JSON specification
To get the full JSON information including the method, parameter, description and etc. Type “http:///json_spec” on your browser address bar. There is another access method via JSON method name “jsonRpc.status.introspection.specific.inventory.get”, it is used for a specific method.

Figure 4. Snapshot of JSON specification web page

Web framework

The Web framework in WebStaX software is based on an open source MooTools. It is a collection of JavaScript utilities with MIT license. (http://mootools.net/license.txt) The menu bar and most of web pages are based on the framework. Both AJAX and JSON algorithm are already integrated in its utilities.
Besides, WebStaX software provides the other utilities which are useful for the JSON web page design.

• json.js – Use for to transmit/receive the dynamic data with JSON syntax.
• dynforms.js – Use for create the HTML table dynamically.
• validate.js – Use for the validation of HTML form.

The full JavaScript libraries are located under the source tree directory: webstax2\ vtss_appl\web\html\lib.

Guideline for JSON Web page design

This section guides how to design a web page based on MSCC JavaScript libraries. We use the Mirror global configured web page as the example here. The asynchronous communication are based on HTTP JSON access method and all global configured parameters are listed in one dynamic HTML table.
The web page layout is listed below and the full source code is located under the source tree directory: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. To get more typical web pages reference, see the appendix section.

Mirror & RMirror Confiquration Table

Figure 5. Example of global configured table

Edit Web page

HTML header
Include the JS libraries that needed in the HTML tag.

Initialize the dynamic table resource

• When the HTML document is ready, call DynamicTable() to initialize the dynamic table resource.
• The DynamicTable() is used to create the dynamic table after received the JSON data.
• It will then call requestUpdate to initiate the JSON command flow.

1. window.addEvent(‘domready’, function() {

2. // Create a form with table body for receive/transmit JSON data

3. myDynamicTable = new DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4

4. requestUpdate();

5. });

Request/Response JSON data

• When the HTML document is ready, use requestJsonDoc() to send the JSON request “mirror.config.session.get” to get information about the configured sessions.
• After the JSON data for “mirror.capabilities.get” is received, the callback function requestUpdate() will be processed. The function requestUpdate will then call “mirror.config.session.get” to get the current configuration. When the current configuration is received, the function processUpdate is called to build the table to be shown.

1. function requestUpdate()

2. {

3. // Restore table content

4. myDynamicTable.restore();
   5

5. // This table two JSON data.

6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);

7. }

Process the received JSON data

• The function processUpdate() is used to layout the dynamic table after received the JSON data.
• The addRows() is used to add table rows. myDynamicTable.update() layout the
  HTML table according the data in table rows.

1. function processUpdate(recv_json, name)
2. {
3. // Ignore the process if no data is received
4. if (!recv_json) {
5. alert(“Get dynamic data failed.”);
6. return;
7. }
8. // Save the received JSON data
9. myDynamicTable.saveRecvJson(“config”, recv_json);
10. // Add table rows
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
13. 14. // Update this dynamic table
14. myDynamicTable.update();
15. 17. // Refresh timer
16. var autorefresh = document.getElementById(“autorefresh”);
17. if (autorefresh && autorefresh.checked) {
18. if (timerID) {
19. clearTimeout(timerID);
20. }
21. timerID = setTimeout(‘requestUpdate()’, settingsRefreshInterval());
22. }
23. }

Add table rows

• In the addRows() function, we use the JSON format to fill each global configured parameter in the table row.
• All HTML fields are listed in the JSON array (“table_rows”) and the syntax of table field is below.

Syntax:
table_rows:[, , …] : {, , …}