Based on the digital twin visual scene, online development or offline development SDK is used to develop the digital twin visual scene. After the development of the digital twin visual scene is completed, the Internet of Things or business data are connected in the developed digital twin visual application to drive the dynamic change of the digital twin visual scene or chart data update in real time. ThingJS supports the following four data docking methods for communication with third-party IoT systems: Ajax, JSONP, WebSocket and MQTT.

Data docking _Ajax

Asynchronous JavaScript And XML refers to a set of browser-side web development techniques that combine multiple technologies. Ajax is a technology for creating fast, dynamic Web pages that can update parts of a page without having to reload the entire page.

Ajax enables Web pages to be updated asynchronously, with a small amount of data exchanged with the server in the background. This means that you can update parts of a Web page without reloading the entire page. Traditional Web pages (which don’t use Ajax) have to reload the entire page if you need to update something.

The essence of Ajax is to send HTTP request to the server through the XMLHttpRequest object of the browser, and then process the data returned by the server after the data is processed.

For native Ajax, there are several steps: 1. Create an instance of XMLHttpRequest; 2. Make an HTTP request; 3. Receive data sent back by the server; 4. Process data and update pages. In the ThingJS online development environment, there is a built-in jQuery library, which can directly use the Ajax methods encapsulated by JQurey for data docking, such as:

$.ajax({ type: "get", url: "https://3dmmd.cn/getMonitorDataById", data: { "id":1605 }, dataType: Json: function (d) {console.log(d.data)}});

The following figure shows an example of Ajax data docking.

Data docking _JSONP

The basic principle of JSONP is to request data from the server through script tag, which has no cross-domain restriction. When the server receives the request, it returns the data to the browser in a named callback function. Because jQuery’s Ajax requests encapsulate JSONP, you can directly request JSONP data using the relevant methods, such as:

$.ajax({ type: "get", url: "https://3dmmd.cn/monitoringData", data: { "id": 1605 }, dataType: JsonpCallback: "callback"; // Set the name of the return function to be the same as the name of the return function. function (d) { console.log(d.data) } });

JSONP only supports GET requests. When multiple JSONP requests are made using jQuery’s Ajax methods, do not duplicate the callback function name (i.e. do not duplicate the setting of JSONPCallback), otherwise it may result in undefined callback function. — — — — — — — –, digital twin visualization: https://www.thingjs.com/