Ajax獲取伺服器時間案例
阿新 • • 發佈：2018-11-05
頁面：
<%@ 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"> // 建立ajax物件 function createAjax(){ try{ return new XMLHttpRequest();// 非IE6瀏覽器，主流瀏覽器支援的 }catch(e){ return new ActiveXObject("Microsoft.XMLHTTP");//IE6瀏覽器以下建立的核心物件 } } /* function createAjax(){ var ajax;//定義區域性ajax物件 if(window.XMLHttpRequest){ //判斷當前瀏覽器是否有XMLHttpRequest ajax = new XMLHttpRequest();// 非IE6瀏覽器 } else { ajax = new ActiveXObject("Microsoft.XMLHTTP"); // IE6瀏覽器 } return ajax; } */ // 獲取伺服器時間的方法 function clickTime(){ // 1.建立ajax var ajax = createAjax(); // 2.以非同步方式發出get請求 true:非同步 false:同步 ajax.open("get","/zq/getTime?"+ new Date().toGMTString(),true); //注意:傳送請求的時候要加時間戳，因為有些瀏覽器是自帶快取功能，如果自帶快取功能，它就不會發送請求去後端，它直接在快取中獲取到資料了 // 3.監聽ajax狀態，http響應狀態 (注意：必須放在send之前執行) ajax.onreadystatechange = function(){ if(ajax.readyState == 4 && ajax.status == 200){ //ajax已經處理完成並且http響應狀態是200 //獲取後臺返回的資料 /* alert(ajax.responseText ); */ document.getElementById("time").innerHTML=ajax.responseText; } } // 4.發出請求 ajax.send(); } </script> </head> <body> <input type="button" onclick="clickTime();" value="獲取時間"/> <span id="time" style="color: red"></span> </body> </html>
service：
/** * 獲取服務端時間： * 注意：非同步技術必須加@ResponseBody * @author 鄭清 */ @Controller public class TimeController { @RequestMapping("/getTime") @ResponseBody public String getTimer(HttpServletResponse resp) throws UnsupportedEncodingException{ resp.setContentType("text/html;charset=utf-8");//解決亂碼問題 System.out.println(new Date().toLocaleString()); return new Date().toLocaleString(); } }
執行效果：
