当前位置: 首页 > Web前端 > HTML

从零开始学习3D可视化数据对接(一)

时间:2023-04-02 19:47:26 HTML

基于数字孪生可视化场景,使用在线开发或离线开发SDK进行数字孪生可视化场景开发,在开发的数字孪生可视化可视化应用中,对接对象网络或业务数据,驱动数字孪生可视化场景的动态变化或图表数据的实时更新。ThingJS支持以下四种数据连接方式,可以与第三方物联网系统进行通信(数据传输),分别是Ajax、JSONP、WebSocket和MQTT。数据对接_Ajax即“AsynchronousJavascriptAndXML”,异步JavaScript和XML技术,是指集合多种技术于一体的一套浏览器端Web开发技术。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",//返回数据类型jsonsuccess:function(d){console.log(d.data)}});下图显示了Ajax数据对接示例。数据对接_JSONPJSONP的基本原理是使用没有跨域限制的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/