AJAX应用案例--不刷新整个WEB页面显示服务器响应的当前时间

最新推荐文章于 2021-08-05 12:12:22 发布

君醉酒

最新推荐文章于 2021-08-05 12:12:22 发布

阅读量2.4k

点赞数

分类专栏： ajax 文章标签： dom ajax 异步

本文链接：https://blog.csdn.net/rain097790/article/details/11019327

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在不刷新整个WEB页面的情况下，点击按钮显示服务器响应的当前时间。

JSP页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'createAjax.jsp' starting page</title>
<script type="text/javascript" src="js/createAjax.js"></script>
</head>

<body>

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

	<script type="text/javascript">
		//1. 创建ajax对象
		var ajax = createAjax();
		//测试
		//alert(ajax!=null?"创建ajax成功！":"创建ajax失败！！");
		//2. 获取定位按钮
		var inputElement = document.getElementsByTagName("input")[0].onclick = function() {
			//3. 准备发送请求
			/*
			 method表示发送请求的方式，例如GET或POST	
			url表示发送请求的目标地址
			可选的boolean值
			>>true：表示该请求是异步的，这是默认值，web2.0
			>>false：表示该请求是同步的，web1.0
			 */
			var method = "GET";
			var url = "${pageContext.request.contextPath}/getTimeServlet?id="+new Date().getTime();
			ajax.open(method, url, true);
			//4. 真正发送异步请求
			/*
				content表示发送请求的内容，如果无内容的话，使用null表示
				如果有内容，写成key=value形成，例如：username=jack&password=123
			 */
			var content = null;
			ajax.send(content);
			//5. ajax对象监听服务器的响应
			ajax.onreadystatechange = function() {
				//如果ajax对象，已经完全接收到了响应，
				if (ajax.readyState == 4) {
					//如果响应正确
					if (ajax.status == 200) {
						var nowStr = ajax.responseText;
						//将获取到的时间放在span标签内
						//定位span标签
						var spanElement = document.getElementsByTagName("span")[0];
						//将nowStr放当span标签内
						spanElement.innerHTML = nowStr;
					}

				}

			};

		};
	</script>

</body>
</html>

servlet的代码：

package kerwin.ajax;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.util.Date;
import java.util.Locale;

import javax.ejb.Local;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class getTimeServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取当前时间
		Date date = new Date();
		//创建时间格式
		DateFormat format = DateFormat.getDateTimeInstance(DateFormat.FULL, DateFormat.DEFAULT, Locale.CHINA);
		String nowStr = format.format(date);
		
		设置输出内容类型和编码方式
		response.setContentType("text/html; charset=utf-8");
		//获取输出流对象
		PrintWriter pw = response.getWriter();
		//通过流对象，将信息输出到AJAX对象
		pw.write(nowStr);
		
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

君醉酒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
AJAX应用案例--不刷新整个WEB页面显示服务器响应的当前时间

在不刷新整个WEB页面的情况下，点击按钮显示服务器响应的当前时间。JSP页面代码：My JSP 'createAjax.jsp' starting page //1. 创建ajax对象 var ajax = createAjax(); //测试 //alert(ajax!=null?"创建ajax成功！":"创建ajax失败
复制链接

扫一扫

专栏目录