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