请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 614|回复: 0

从零起头进修3D可视化之数据对接(1)

[复制链接]
avatar

40

主题

40

帖子

283

积分

中级会员

Rank: 3Rank: 3

积分
283
ico_lz  楼主| 发表于 2021-7-20 15:04:07 | 显示全部楼层 |阅读模式
基于数字孪生可视化场景,利用在线开辟或离线开辟SDK停止数字孪生可视化场景开辟终了后,在所开辟的数字孪生可视化可视化利用中,对接物联网或营业数据,实时驱动数字孪生可视化场景静态变化或图表数据更新。ThingJS支持以下四种数据对接方式,可与第三方物联网系统停止通讯(数据传输),别离为Ajax、JSONP、WebSocket、MQTT

数据对接_Ajax
即“Asynchronous Javascript And XML”,异步的 JavaScript 与 XML 技术,指的是一套综合了多项技术的阅读器端网页开辟技术。Ajax 是一种用于建立快速静态网页的技术,在无需重新加载全部网页的情况下,可以更新部分网页。

经过在背景与办事器停止少许数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载全部网页的情况下,对网页的某部分停止更新。传统的网页(不利用Ajax)假如需要更新内容,必须重载全部网页页面。

Ajax的本质是经过阅读器的XMLHttpRequest工具向办事器发送HTTP请求,获得办事器返回的数据落后行数据处置的数据交互方式。




从零起头进修3D可视化之数据对接(1)



对于原生的Ajax来说,包括以下几个步调:

1.建立XMLHttpRequest 实例;

2.发出HTTP请求;

3.接收办事器传回的数据;

4.处置数据,更新页面。

ThingJS在线开辟情况中,内置了JQuery库,可以间接利用 JQurey 封装的 Ajax 方式停止数据对接,例如:

  1. $.ajax({
  2. type: "get",
  3. url: "https://3dmmd.cn/getMonitorDataById",
  4. data: { "id":1605 },
  5. dataType: "json", // 返回的数据范例 json
  6. success: function (d) {
  7. console.log(d.data)
  8. }
  9. });
复制代码


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

从零起头进修3D可视化之数据对接(1)



数据对接_JSONP
JSONP的根基道理就是操纵script 标签没有跨域限制的特点,经过script 标签向办事器请求数据;办事器收到请求后,将数据放在一个指命名字的回调函数里返回给阅读器。

由于JQuery的Ajax请求对JSONP停止了封装,是以可以间接利用相关方式请求JSONP 数据,例如:

  1. $.ajax({
  2. type: "get",
  3. url: "https://3dmmd.cn/monitoringData",
  4. data: { "id": 1605 },
  5. dataType: "jsonp", // 返回的数据范例,设备为JSONP方式
  6. jsonpCallback: "callback", // 设备回调函数名 与返回数据的 函数名分歧
  7. success: function (d) {
  8. console.log(d.data)
  9. }
  10. });
复制代码


JSONP仅支持 GET 请求,利用JQuery的Ajax方式倡议多个jsonp请求时,回调函数名不要反复(即jsonpCallback的设备不要反复),否则能够会致使回调函数undefined。

—————————————————

数字孪生可视化:https://www.thingjs.com/


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则