学习aiax(javascript)--页面无刷新更新ajax更新时间
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习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"> <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提交（中文）要转换编码格式
以上是关于学习aiax(javascript)--页面无刷新更新ajax更新时间的主要内容，如果未能解决你的问题，请参考以下文章
学习aiax(javascript)--省份-城市二级下拉联动（POST方式）