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

前端之家收集整理的这篇文章主要介绍了AJAX应用案例--不刷新整个WEB页面显示服务器响应的当前时间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在不刷新整个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);
	}

}
原文链接:https://www.f2er.com/ajax/165879.html

猜你在找的Ajax相关文章