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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM