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