关于javascript:从零开始学习3D可视化之数据对接1

37次阅读

共计 1260 个字符,预计需要花费 4 分钟才能阅读完成。

基于数字孪生可视化场景,应用在线开发或离线开发 SDK 进行数字孪生可视化场景开发结束后,在所开发的数字孪生可视化可视化利用中,对接物联网或业务数据,实时驱动数字孪生可视化场景动态变化或图表数据更新。ThingJS 反对以下四种数据对接形式,可与第三方物联网零碎进行通信(数据传输),别离为 Ajax、JSONP、WebSocket、MQTT。

数据对接_Ajax

即“Asynchronous Javascript And XML”,异步的 JavaScript 与 XML 技术,指的是一套综合了多项技术的浏览器端网页开发技术。Ajax 是一种用于创立疾速动静网页的技术,在无需从新加载整个网页的状况下,可能更新局部网页。
通过在后盾与服务器进行大量数据交换,Ajax 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下,对网页的某局部进行更新。传统的网页(不应用 Ajax)如果须要更新内容,必须重载整个网页页面。
Ajax 的实质是通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 申请,失去服务器返回的数据后进行数据处理的数据交互方式。

对于原生的 Ajax 来说,包含以下几个步骤:
1. 创立 XMLHttpRequest 实例;
2. 收回 HTTP 申请;
3. 接管服务器传回的数据;
4. 解决数据,更新页面。
在 ThingJS 在线开发环境中,内置了 JQuery 库,能够间接应用 JQurey 封装的 Ajax 办法进行数据对接,例如:

$.ajax({
 type: "get",
 url: "https://3dmmd.cn/getMonitorDataById",
 data: {"id":1605},
 dataType: "json", // 返回的数据类型 json
 success: function (d) {console.log(d.data)
 }
});

下图所示为 Ajax 数据对接示例。

数据对接_JSONP

JSONP 的基本原理就是利用 script 标签没有跨域限度的特点,通过 script 标签向服务器申请数据;服务器收到申请后,将数据放在一个指定名字的回调函数里返回给浏览器。
因为 JQuery 的 Ajax 申请对 JSONP 进行了封装,因而能够间接应用相干办法申请 JSONP 数据,例如:

$.ajax({
 type: "get",
 url: "https://3dmmd.cn/monitoringData",
 data: {"id": 1605},
 dataType: "jsonp", // 返回的数据类型,设置为 JSONP 形式
 jsonpCallback: "callback", // 设置回调函数名 与返回数据的 函数名统一
 success: function (d) {console.log(d.data)
 }
});

JSONP 仅反对 GET 申请,应用 JQuery 的 Ajax 办法发动多个 jsonp 申请时,回调函数名不要反复(即 jsonpCallback 的设置不要反复),否则可能会导致回调函数 undefined。
—————————————————
数字孪生可视化:https://www.thingjs.com/

正文完
 0