js自动访问数据库

js自动访问数据库

maven依赖

<dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/c3p0/c3p0 -->
    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.2</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.39</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/commons-dbutils/commons-dbutils -->
    <dependency>
      <groupId>commons-dbutils</groupId>
      <artifactId>commons-dbutils</artifactId>
      <version>1.4</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/com.google.code.gson/gson -->
    <dependency>
      <groupId>com.google.code.gson</groupId>
      <artifactId>gson</artifactId>
      <version>2.8.5</version>
    </dependency>
</dependencies>

Servlet

用的三层架构,service,dao层就不写了,用的是C3P0连接池,mysql为数据库

最后返回的是一个json字符串

//测试前端是否能访问
//System.out.println("getPlanePosition方法被调用了...");
PlaneService planeService = new PlaneServiceImpl();
PlanePosition planePosition = planeService.findPosition();
Gson gson = new Gson();
String jsonStr = gson.toJson(planePosition, PlanePosition.class);
//设置响应头为json对象
response.setContentType("application/json;charset=utf-8");
//返回一个json对象
response.getWriter().print(jsonStr);
//是否能输出正确的值
//System.out.println(jsonStr);

JSutils

之后需要用到的小工具

/**
 * 获取部署的项目地址
 * @returns {string}
 */
function contextPath(){
    // var curWwwPath = window.document.location.href;
    var pathName =  window.document.location.pathname;
    // var pos = curWwwPath.indexOf(pathName);
    // var localhostPaht = curWwwPath.substring(0,pos);
    // var projectName = pathName.substring(0,pathName.substr(1).indexOf('/')+1);
    // return (localhostPaht + projectName);
    var number = pathName.indexOf("/", 1);
    return pathName.substring(0,number);
}
/**
 * 生成XMLHttpRequest
 * @returns {XMLHttpRequest}
 */
function ajaxFunction() {
    var xmlHttp;
    try { // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch (e) {
        try {// Internet Explorer
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
            }
        }
    }
    return xmlHttp;
}

html中js代码

模拟get方法

//全局变量
var yPosition;
function get() {
    //1. 创建xmlhttprequest 对象
    var request = ajaxFunction();
    //2. 发送请求  用false是因为需要同步(true为异步)
    request.open("GET", "PlaneServlet?method=getPlanePosition", false);
    //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
    request.onreadystatechange = function () {
        //前半段表示 已经能够正常处理。  再判断状态码是否是200
        if (request.readyState == 4 && request.status == 200) {
            //弹出响应的信息,测试用
            // alert(request.responseText);
            //转为json对象
            var obj = JSON.parse(request.responseText);
            //把服务器响应的json对象赋值给yPosition
            yPosition = obj.yPosition;
            // alert(yPosition);
        }
    };
    request.send();
}

设置每2秒刷新一次

var myVar = setInterval(function () {
    ChangePosition();
}, 2000);