\t\t用Ajax解析JSON串,页面无刷新实时监控后台数据

发布时间:2017-3-24 20:15:50 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"\t\t用Ajax解析JSON串,页面无刷新实时监控后台数据",主要涉及到\t\t用Ajax解析JSON串,页面无刷新实时监控后台数据方面的内容,对于\t\t用Ajax解析JSON串,页面无刷新实时监控后台数据感兴趣的同学可以参考一下。

页面效果:页面代码:<%@ page language="java" import="java.util.*" pageEncoding="gbk"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head>    <base href="<%=basePath%>">        <title>页面实时监控</title>    <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --><script type="text/javascript">   function makeRequest(url) {   httpRequest = false;   if (window.XMLHttpRequest) {    httpRequest = new XMLHttpRequest();    if (httpRequest.overrideMimeType) {     httpRequest.overrideMimeType('text/xml');    }   } else if (window.ActiveXObject) {    try {     httpRequest = new ActiveXObject("Msxml2.XMLHTTP");    } catch (e) {     try {      httpRequest = new ActiveXObject("Microsoft.XMLHTTP");     } catch (e) {     }    }   }   if (!httpRequest) {    alert("您的浏览器不支持当前操作,请使用 IE 5.0 以上版本!");    return false;   }   httpRequest.onreadystatechange = callBack;   httpRequest.open('GET', url, true);   //禁止IE缓存   httpRequest.setRequestHeader("If-Modified-Since", "0");   //发送数据   httpRequest.send(null); //每1秒读取一次后台数据   setTimeout("makeRequest('" + url + "')", 1000); } function callBack() {   if (httpRequest.readyState == 4) {    if (httpRequest.status == 0 || httpRequest.status == 200) {     var result = httpRequest.responseText;     if (result == "") {      result = "系统取值失败";     }    // 定义数组 ;     var array = new Array();      // 分隔JSON ;     array = result.split(";");      // 绘制表格 ;         // 定义表格开始标签 ;     var tableStart = "<table id='test' border='1' cellpadding='5' cellspacing='0' bordercolor='green' align='center'><tr>"     var head = "<tr><td>手机发送速度</td><td>手机发送总量</td><td>信息发送速度</td><td>信息发送总量</td><td>当前时间</td></tr>"      var tdStart = "<td>"     var tdEnd = "</td>"      //定义表格结束标签 ;     var tableEnd = "</tr></table>"      document.getElementById("showData").innerHTML = tableStart +head+ tableEnd ;     for ( i = 0 ; i < array.length ; i++ ) {      // 追加行 ;      var oRow1=test.insertRow(test.rows.length);         // 获取表格的行集合。         var aRows=test.rows;         // 获取第一行的单元格集合。         var aCells=oRow1.cells;         // 在第一行中插入两个单元格。         var oCell1_1=oRow1.insertCell(aCells.length);         var oCell1_2=oRow1.insertCell(aCells.length);         var oCell1_3=oRow1.insertCell(aCells.length);         var oCell1_4=oRow1.insertCell(aCells.length);         var oCell1_5=oRow1.insertCell(aCells.length);         var obj = eval('('+array[i]+')');      // 定义MOBILE_SPEED       var MOBILE_SPEED = tdStart + obj.MOBILE_SPEED + tdEnd           // 定义MOBILE_TOTAL_COUNT       var MOBILE_TOTAL_COUNT = tdStart + obj.MOBILE_TOTAL_COUNT + tdEnd       // 定义MSG_SPEED      var MSG_SPEED = tdStart + obj.MSG_SPEED + tdEnd       // 定义MSG_TOTAL_COUNT      var MSG_TOTAL_COUNT = tdStart + obj.MSG_TOTAL_COUNT + tdEnd      // 时间 date           var date = tdStart + new Date() + tdEnd ;      // 向单元格内填充数据 ;              oCell1_1.innerHTML = MOBILE_SPEED;           oCell1_2.innerHTML = MOBILE_TOTAL_COUNT;        oCell1_3.innerHTML = MSG_SPEED;        oCell1_4.innerHTML = MSG_TOTAL_COUNT;        oCell1_5.innerHTML = date ;     }             } else {//httpRequest.status != 200         flag = window.confirm("服务器无响应,是否关闭本页面?");     if ( flag ) {      window.close();     }        }   } }</script> </head> <body onload=makeRequest("AjaxServlet")> <!-- 显示数据 -->    <div id="showData"></div> </body></html>-------------------------------------------------------------------------------------servlet 里面返回JSON,测试数据;public void doGet(HttpServletRequest request, HttpServletResponse response)    throws ServletException, IOException {   response.setContentType("text/html");      //速度Json串: String s = "{\"MOBILE_SPEED\":0,\"MOBILE_TOTAL_COUNT\":160000,\"MSG_SPEED\":0,\"MSG_TOTAL_COUNT\":16000}";     String ss = "{\"MOBILE_SPEED\":1,\"MOBILE_TOTAL_COUNT\":320000,\"MSG_SPEED\":1,\"MSG_TOTAL_COUNT\":32000}";        PrintWriter out = response.getWriter();     out.print(s+";"+ss);      }

上一篇:\t\texe4j,inno setup 5 ,installanywhere下载地址
下一篇:主题:JSON详细学习之JSON in JavaScript

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款