AJAX：
Asynchronous JavaScript And XML（異步的JavaScript和XML）。
需求:
同步編程出現的問題：比如在頁面輸入用戶名跟密碼的時候，如果密碼出現錯誤，頁面就會重新加載，然后重新輸入賬號密碼，很影響用戶體驗!
而AJAX是用來解決以上問題的。用戶鼠標離開用戶名的輸入框，頁面給出提示！
實現：
AJAX編程四步：
1、創建AJAX核心對象XMLHttpRequest (瀏覽器內置的，可以直接使用) 2、注冊回調函數（重點） 3、開啟瀏覽器和服務器之間的通道 4、發送AJAX請求
XMLHttpRequest()對象：
XMLHttpRequest 是 AJAX 的基礎。 所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。 XMLHttpRequest 用於在后台與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。 創建 XMLHttpRequest 對象的語法： variable=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： variable=new ActiveXObject("Microsoft.XMLHTTP"); 為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。
如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ： var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {//表示不支持IE5，IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
index.html注冊頁面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> function checkUsername(username) { //AJAX發送請求全靠瀏覽器內置的這個對象: XMLHttpRequest對象 。 //使用這個XMLHttpRequest對象可以在瀏覽器當中單獨啟動一個新的瀏覽器線程，通過瀏覽器線程發送該請求。 //達到異步效果。 //1、創建AJAX核心對象XMLHttpRequest (瀏覽器內置的，可以直接使用) var xhr = new XMLHttpRequest(); //2、注冊回調函數 /** * onreadystatechange存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數 * readyState： 存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 •0: 請求未初始化 •1: 服務器連接已建立 •2: 請求已接收 •3: 請求處理中 •4: 請求已完成，且響應已就緒 */ xhr.onreadystatechange = function () {//xhr的readyState發生改變的時候,回調一次 if (xhr.readyState == 4) { if (xhr.status == 200) { var nameSpan = document.getElementById("nameSpan"); nameSpan.innerHTML = xhr.responseText; } else { alert(xhr.status+"錯誤"); } } } //3、開啟瀏覽器和服務器之間的通道 /** * open(method,url,async) 規定請求的類型、URL 以及是否異步處理請求。 •method：請求的類型；GET 或 POST •url：文件在服務器上的位置,相當於超鏈接<a href=""></a> •async：true（異步）或 false（同步） */ xhr.open("GET", "some?username="+username, true); //4、發送AJAX請求 xhr.send(); } </script> 用戶名<input type="text" name="username" onblur="checkUsername(this.value)"/><span id="nameSpan" style="font-size: 12px"></span><br> 密碼<input type="password" name="password"><br> </body> </html>
web.xml配置文件：
<servlet> <servlet-name>someServlet</servlet-name> <servlet-class>com.zhixi.zhang.SomeServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>someServlet</servlet-name> <url-pattern>/some</url-pattern> </servlet-mapping>
SomeServlet.java進行判斷：
package com.zhixi.zhang; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class SomeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=UTF-8"); String username = request.getParameter("username"); if ("admin".equals(username)){ response.getWriter().print("<font color='red'> 用戶名已被注冊</font>"); }else { response.getWriter().print("<font color='green'>用戶名未被注冊</font>"); } } }
以上就完成了簡單的用戶進行注冊的簡單檢查功能！