您的位置:首页 > 其它

利用ajax不需刷新页面来获取当前时间

2017-04-25 13:10 435 查看
ajaxtime.jsp

<input id="buttonID" type="button" value="获取当前时间">
当前时间<span id="time"></span>

<script type="text/javascript">
//·利用ajax不需刷新页面来获取时间
document.getElementById("buttonID").onclick=function(){
//第一步:创建AJAX异步对象
var ajax = new XMLHttpRequest();
alert(ajax);
//第二步:准备发送的请求·第一个参数是以什么样的方式发送,第二个是请求的路径
var method = "GET";
var url = "${pageContext.request.contextPath}/AjaxTimeServlet";
ajax.open(method,url);
//第三步:此时已经将请求发给服务端,如果请求体中没有数据,就用null表示,
ajax.send(null);

/*
第四步:ajax时刻监听服务端响应的状态码 0-1-2-3-4, ajax.readyState 会打印ajax状态码, ajax.status是web响应的状态码
每当状态码发生变化时,就会触发ajax.onreadystatechange = function(){}这个函数
当ajax的状态码是4时,证明客户端已经完整接收了服务端的数据	*/

ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
//这里要判断语句是因为,服务端返回的数据可能是200/404/500(web响应的状态码),200是响应正常的
if(ajax.status == 200){
//第五步:从ajax对象中获取服务端响应的数据
var nowStr = ajax.responseText;
//第六步:将数据 动态 添加到该页面显示
var spanElement = document.getElementById("time");
spanElement.innerHTML = nowStr;
}
}
}
}
</script>
服务端AjaxTimeServlet.java

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//服务端生成时间
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
String nowStr = sdf.format(new Date());

//以流的方式将结果响应到ajax异步对象中
response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
pw.write(nowStr);
pw.flush();
pw.close();
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: