ajax异步服务器获取时间
1、创建ajax对象
<script type="text/javascript"> //创建AJAX异步对象 function createAJAX(){ var ajax = null; try{ //如果IE5=IE12的话 ajax = new ActiveXObject("microsoft.xmlhttp"); }catch(e1){ try{ //如果是非IE的话 ajax = new XMLHttpRequest(); }catch(e2){ alert("你的浏览器中不支持异步对象,请换浏览器"); } } return ajax; } </script>
2、添加获取时间按钮
当前时间:<span id="time"></span><br/> <input id="buttonID" type="button" value="获取当前时间"/><p/>
3、HTML内对ajax返回的数据进行处理
<script type="text/javascript"> document.getElementById("buttonID").onclick = function(){ //NO1)创建AJAX异步对象 var ajax = createAJAX(); //NO2)准备发送请求 var method = "GET"; var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time=" + new Date().getTime(); ajax.open(method,url); //NO3)真正发送请求体的数据到服务器,如果请求体中无数据的话,就用null表示 ajax.send(null); //-------------------------------------------------------------等待 //NO4)AJAX异步对象不断监听服务器响应的状态0-1-2-3-【4】 //一定要状态变化后,才可触发function(){}函数 //如果状态永远是4-4-4-4-4,是不会触发function(){}函数的 ajax.onreadystatechange = function(){ //如果状态码为4的话 if(ajax.readyState == 4){ //如果响应码为200的话 if(ajax.status == 200){ //NO5)从AJAX异步对象中获取服务器响应的HTML数据 var nowStr = ajax.responseText; //NO6)将结果按照DOM规则,动态添加到web页面指定的标签中 var spanElement = document.getElementById("time"); spanElement.innerHTML = nowStr; } } } }
4、java对ajax的处理
/** * 无需刷新整个Web页面显示服务器响应的当前时间 */ public class AjaxTimeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String nowStr = sdf.format(new Date()); //以流的方式将结果响应到AJAX异步对象中 response.setContentType("text/html;charset=UTF-8"); PrintWriter pw = response.getWriter(); pw.write(nowStr); pw.flush(); pw.close(); } }