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

发布时间：2020-12-16 00:54:35 所属栏目：百科来源：网络整理

导读：在不刷新整个WEB页面的情况下，点击按钮显示服务器响应的当前时间。 JSP页面代码： %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"htmlheadtitleMy JSP 'createAjax.j

在不刷新整个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,IOException {
		doGet(request,response);
	}

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!