学习aiax(javascript)--页面无刷新更新ajax更新时间

最新推荐文章于 2022-03-14 20:58:01 发布

幸福是什么感觉呢

最新推荐文章于 2022-03-14 20:58:01 发布

阅读量533

点赞数

分类专栏：学习轨迹 java前端

本文链接：https://blog.csdn.net/zd305826520/article/details/51003414

版权

学习轨迹同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

java前端

17 篇文章 0 订阅

订阅专栏

1.JSP代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>页面无刷新更新ajax更新时间</title>
<script type="text/javascript">
    function createAJAX() {
        var ajax = null;
        try {
            ajax = new ActiveXObject("microsoft.xmlhttp");
            //alert("你的浏览器支持ajax,是IE");
        } catch (e1) {
            ajax = new XMLHttpRequest();
            //alert("你的浏览器支持ajax,是非IE");
        }
        return ajax;
    }
</script>
</head>
<body>
    当前时间:
    <span id="spantime"></span>
    <br>
    <br>
    <input type="button" id="buttontime" value="异步提交方式" />
</body>

<script type="text/javascript">
    window.document.getElementById("buttontime").onclick = function() {
        //1.创建一部对象
        var ajax = createAJAX();
        //2.异步对象准备发送请求
        var method = "GET";
        var url = "${pageContext.request.contextPath}/TimeAjaxServlet?time = "
                + new Date().getTime();
        ajax.open(method, url);
        //3.AJAX异步对象真正发送请求体的数据到服务器，如果请求体无数据的话，用null表示
        var content = null;
        ajax.send(content);
        //---------------------------------等待-------------------------
        //4. AJAX异步对象不断监听服务端状态的变化，只有状态码变化了，方可触发函数
        //0-1-2-3-4,这些是可以触发函数的
        //4-4-4-4-4，这些是不可以触发函数的
        //以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的
        ajax.onreadystatechange = function() {
            //如果状态码为4
            if (ajax.readyState == 4) {
                //如果服务器响应为200
                if (ajax.status == 200) {
                    //5. 从AJAX异步对象中获取服务器响应的结果
                    var timeStr = ajax.responseText;

                    //6. 按照DOM规则，将结果动态添加到web页面指向的标签中
                    document.getElementById("spantime").innerHTML = timeStr;
                }
            }
        }
    }
</script>
</html>

2.servlet代码

package com.buaa.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/TimeAjaxServlet")
public class TimeAjaxServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            response.setContentType("text/html;charset = UTF-8");
            SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
             String timeStr = sdf.format(new Date());
            //注意，要实现异步处理，不能转发或者重定向，因为这样的话浏览器页面会刷新
            //所以要以流的方式将服务器的结果输出浏览器
            PrintWriter pw = response.getWriter();
            pw.write(timeStr);
            pw.flush();
            pw.close();
    }

}

注意：get方式的ajax提交（中文）要转换编码格式

幸福是什么感觉呢

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习aiax(javascript)--页面无刷新更新ajax更新时间

1.JSP代码@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd
复制链接

扫一扫