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();
    }
}

 

posted @ 2016-10-04 13:15  赵卓  阅读(4279)  评论(0编辑  收藏  举报