HTML中使用Ajax进行局部刷新页面

HTML中使用Ajax进行局部刷新页面，使用JS将数据发送到后台

---

1.在HTML页面中使用js脚本将请求数据发送给后台servlet

• 由按钮触发事件

<button id="select" onclick="queryInfos()">查询</button>
1
1

• 由js脚本对将数据发送到后台

    var req = new XMLHttpRequest();    function queryInfos() {        //设置传送方式，对应的servlet或action路径，是否异步处理        req.open("POST", "/info/queryinfos", true);        //如果设置数据传送方式为post，则必须设置请求头信息        req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");        //设置回调函数，当前操作完成后进行的操作        req.onreadystatechange = callback;        //Ajax请求发送的数据不是表单，需要拼接数据，格式和get方式一样        var reqData = "ip=" + document.getElementById("ip").value;        reqData += "&addr=" + document.getElementById("addr").value;        reqData += "&time=" + document.getElementById("time").value;        reqData += "&times=" + document.getElementById("times").value;        //发送请求        req.send(reqData);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.后台获取数据进行处理，将结果返回给前台

• 后台进行处理

     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {            //设置数据编码方式            request.setCharacterEncoding("utf-8");            response.setCharacterEncoding("utf-8");            //设置数据类型            response.setContentType("text/plain");            //设置禁用缓存            response.setHeader("Cache-control","no-cache");            //获取从页面传递的参数            String ip = request.getParameter("ip");            String addr = request.getParameter("addr");            String time = request.getParameter("time");            String times = request.getParameter("times");            /*            * 执行操作            * */            //拼接返回的json数据            StringBuilder jsonString = new StringBuilder();            jsonString.append("{");            jsonString.append("'size':2");            jsonString.append(",'datas':[");            jsonString.append("{");            jsonString.append("'ip':'10.10.1.1',");            jsonString.append("'addr':'辽宁葫芦岛',");            jsonString.append("'time':'2016-10-24 16:00:23',");            jsonString.append("'times':'10'");            jsonString.append("}");            jsonString.append(",{");            jsonString.append("'ip':'192.168.110.111',");            jsonString.append("'addr':'辽宁沈阳',");            jsonString.append("'time':'2016-11-11 11:00:23',");            jsonString.append("'times':'14'");            jsonString.append("}");            jsonString.append("]");            jsonString.append("}");            //获取输出流            PrintWriter out = response.getWriter();            //将数据返回页面            out.write(jsonString.toString());            out.flush();            out.close();        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

3.返回处理结果，局部刷新页面

• 对返回操作进行处理

    //回调函数    function callback() {        //如果Ajax和request的状态都正确则进行操作        if (req.readyState == 4 && req.status == 200) {            //获取后台返回的数据            var response = req.responseText;            //进行对象化处理            //加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式转化为对象，而不是作为语句来执行            //由于json是以"{}"的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。            var jsonobject = eval("(" + response + ")");            //获取数据的长度            var datasize = jsonobject.size;            //获取json中的数据数据            var datas = jsonobject.datas;            //删除原有的table数据            var table = document.getElementById("table");            var infos = document.getElementById("tbody");            table.removeChild(infos);            //此处必须创建tbody，否则无法加入到table中            infos = document.createElement("tbody");            //生成新的table数据元素并添加到table中            for (var i = 0; i < datas.length; i++) {                var tr = document.createElement("tr");                var td1 = document.createElement("td");                var td2 = document.createElement("td");                var td3 = document.createElement("td");                var td4 = document.createElement("td");                td1.innerHTML = datas[i].ip;                td2.innerHTML = datas[i].addr;                td3.innerHTML = datas[i].time;                td4.innerHTML = datas[i].times;                tr.appendChild(td1);                tr.appendChild(td2);                tr.appendChild(td3);                tr.appendChild(td4);                infos.appendChild(tr);            }            table.appendChild(infos);        }    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

---

• HTML文件

<body><div class="title">    <h1>Ajax异步查询，局部刷新页面</h1></div><div>    <table class="select">        <tr>            <td class="td">IP:<input type="text" id="ip" name="ip" class="input"></td>            <td class="td">地址:<input type="text" id="addr" name="addr" class="input"></td>            <td class="td">时间:<input type="text" id="time" name="time" class="input"></td>            <td class="td">次数:<input type="text" id="times" name="times" class="input"></td>            <td class="td"> <button id="select" onclick="queryInfos()">查询</button></td>        </tr>    </table></div><table id="table" class="table" cellpadding="0" cellspacing="0" border="1">    <tr>        <td class="td">登录ip</td>        <td class="td">登录地址</td>        <td class="td">最后一次登录时间</td>        <td class="td">登录次数</td>    </tr>    <tr>        <td class="black" colspan="4"></td>    </tr>    <tbody id="tbody">    <tr id="infos">        <td>127.0.0.1</td>        <td>辽宁大连</td>        <td>2016-10-24 14:47:01</td>        <td>123</td>    </tr>    </tbody></table></body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

下载源码

---