學習aiax(javascript)--頁面無重新整理用ajax檢查使用者名稱是否已註冊（POST方式）
阿新 • • 發佈：2019-01-31
<%@ 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檢查使用者名稱是否已註冊（POST方式）</title> <script type="text/javascript"> function createAJAX() { var ajax = null; try { ajax = new ActiveXObject("microsoft.xmlhttp"); //alert("你的瀏覽器支援ajax,是IE"); } catch (e1) { ajax = new XMLHttpRequest();//alert("你的瀏覽器支援ajax,是非IE"); } return ajax; } </script> </head> <body> <form> 使用者名稱(POST):<input id="username" name="username"/> <span id="span"></span> </form> </body> <script type="text/javascript"> window.document.getElementById("username").onblur = function() { var username = this.value; //1.建立一部物件 var ajax = createAJAX(); //2.非同步物件準備傳送請求 var method = "post"; var url = "${pageContext.request.contextPath}/UserAjaxServlet?time = " + new Date().getTime(); ajax.open(method, url); //設定AJAX請求頭為POST，他會將請求體中的漢字自動進行UTF-8的編碼 ajax.setRequestHeader("content-type","application/x-www-form-urlencoded"); //3.AJAX非同步物件真正傳送請求體的資料到伺服器，如果請求體無資料的話，用null表示,如果有值，用鍵值對 var content = "username=" + username; ajax.send(content); //---------------------------------等待------------------------- //4. AJAX非同步物件不斷監聽服務端狀態的變化，只有狀態碼變化了，方可觸發函式 //0-1-2-3-4,這些是可以觸發函式的 //4-4-4-4-4，這些是不可以觸發函式的 //以下這個函式是伺服器來觸發的，不是程式設計師觸發的，這和onclick是不一樣的 ajax.onreadystatechange = function() { //如果狀態碼為4 if (ajax.readyState == 4) { //如果伺服器響應為200 if (ajax.status == 200) { //5. 從AJAX非同步物件中獲取伺服器響應的結果 var tip = ajax.responseText; //建立img var imgElement = document.createElement("img"); //設定標籤的屬性 imgElement.src = tip; imgElement.style.width ="14px"; imgElement.style.height ="14px"; //定位span標籤 var spanElement = document.getElementById("span"); //清空span裡的值 spanElement.innerHTML = ""; //將img加入到span裡邊 spanElement.appendChild(imgElement); } } } } </script> </html>