实时局部刷新具体实现步骤（会时刻更新的仪表盘）

        继上一篇博客（智能家居项目总结_EVANY1234的博客-CSDN博客）的局部实时问题给出具体代码：

        实时局部刷新是为了用户在不手动刷新当前页面的前提下改变某个位置的数据，例如：在百度搜索框搜索东西时只有下方搜索栏中的内容进行了刷新。

目录

        问题由来

        解决方案

​

        jQuery+Ajax+Echarts实现温度检测

---

        问题由来

        硬件和管理员始终保持自己的线程运行接收和发送数据的程序，如果数据库的内容进行了更新，JavaWeb前端的jsp页面无法得到实时响应。

         目前灯1显示亮度为25： 

         在数据库增加一条新的数据：

        在不刷新页面的前提下，灯的亮度仍为25：

 

        解决方案

        前文提到可以用AJAX解决问题，即发送HttpRequest对象向web服务器发送请求，在JavaScript中读取HttpResponse的方式。

        JS部分具体代码：

        注解：创建XMLHttpRequest这部分的内容主要是在请求正确的浏览器（不需要进行修改），下方sendRequest中的url需要根据项目中web.xml具体服务器的定位进行修改，最后处理函数按照自己的项目内容进行修订（笔者查找通过两个特定字符串得到当中指定内容的方法并不是特别好，如果有更好的办法可以发在评论区）。

<script type="text/javascript">
	var XMLHttpReq;
	//创建XMLHttpRequest对象
	function createXMLHttpRequest() {
		if(window.XMLHttpRequest) { //Mozilla 浏览器
			XMLHttpReq = new XMLHttpRequest();
		}
		else if (window.ActiveXObject) { // IE浏览器
			try {
				XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
	}
	//发送请求函数
	function sendRequest() {
		createXMLHttpRequest();
		var url = "./light";//填写xml中对应服务器的路径名
		XMLHttpReq.open("GET", url, true);
		XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
		XMLHttpReq.send(null);  // 发送请求
	}
	// 处理返回信息函数
	function processResponse() {
		if (XMLHttpReq.readyState == 4) { // 判断对象状态
			if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
				var page=XMLHttpReq.responseText;//得到当前页面所有的文本内容
				var first=page.indexOf("<xxx>");//找目标左边的自定义标签
				var begin=page.indexOf(">",first);//找到目标左边一个单位
				var end=page.indexOf("</xxx>",first);//找到目标对应的闭合自定义标签
				var want=page.substring(begin+1,end);//得到目标值
				document.getElementById("br").innerHTML="brightness: "+want;//在指定位置打印更新过的信息
			}
		}
	}

	setInterval("sendRequest();",1000);//每隔1秒种向服务器发送请求
</script>

        jsp页面html需要更新内容区域的代码（利用查找匹配标签的方式）：

<p id="br"><xxx><%= l.get(i).getState() %></xxx></p>

        在数据库改变灯的亮度为50：

        灯页面下的亮度直接变成50： 

        jQuery+Ajax+Echarts实现温度检测

        jQuery整合了Ajax的内容，使Ajax更容易书写（需要导入源）。 

<script src="http://code.jquery.com/jquery-latest.js"></script>

       Echarts拥有海量的制作精美的图表（需要导入源）。

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

        在jsp页面下利用Ajax实时请求服务端，再将响应内容传递给某个变量进行更改。

$.ajax({
   type:"post",     //发送post
   url:"",      //服务端url地址
   data:{""},       //向服务端发送数据
   datatype:"json",       //json可以传输类似键值对的数值
   success:function (result){      //得到服务器反馈
   }
})

        服务端把想要的数据传回去就行。 

public void doPost(HttpServletRequest req,HttpServletResponse res){
   try {
      res.setCharacterEncoding("utf-8");
      res.getWriter().print("lalala");
   }
   catch(Exception e){
      e.printStackTrace();
   }
}

        效果图