您的位置：首页 > Web前端 > JavaScript

学习aiax(javascript)--页面无刷新更新ajax更新时间

2016-03-29 10:08 211 查看

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提交（中文）要转换编码格式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航