js程式碼與html程式碼分離示例

黑澤明軍發表於2018-06-17
JSHTML
驗證使用者名稱是否存在的示例程式碼引出該思想： 
<%@ 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">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/myJS.js"></script>

<title>Insert title here</title>

    <script type="text/javascript">
        // 方式一：使用文字框的onblur事件(失去焦點事件)
//         function ckName() {
//             // 通過標籤名獲取元素節點物件
//             var name = document.getElementsByTagName("input")[0];
//             // 建立XMLHttpRequest物件
//             var xhr = getXMLHttpRequest();
//             // 處理響應結果，建立回撥函式，根據響應狀態動態更新頁面
//             xhr.onreadystatechange = function() {
//                 if (xhr.readyState == 4) { // 說明客戶端請求一切正常
//                     if (xhr.status == 200) { // 說明伺服器響應一切正常
//                         // alert(xhr.responseText); // 得到響應結果，得到頁面上面的結果，注意結果為字串
//                         var msg = document.getElementById("msg");
//                         if (xhr.responseText == "true") {
//                             // msg.innerText = "使用者名稱已存在";
//                             msg.innerHTML = "<font color=`red`>該使用者名稱已存在</font>";
//                         } else {
//                             msg.innerHTML = "<font color=`green`>該使用者名稱可以使用</font>";
//                         }
//                     }
//                 }
//             } 
//          
//             // 建立一個連線
//             xhr.open("get", "${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name.value);
//             // 傳送請求
//             xhr.send(null);
//         }

        // 方式二：不使用文字框的事件
        // onload   載入完畢的事件，等到頁面載入完畢後再執行onload事件所指向的函式。
        window.onload = function() {
            // 通過名獲取元素物件
            var nameElement = document.getElementsByName("userName")[0];

            nameElement.onblur = function() {
                var name = this.value; // this等價於nameElement

                // 建立XMLHttpRequest物件
                var xhr = getXMLHttpRequest();
                // 處理響應結果，建立回撥函式，根據響應狀態動態更新頁面
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4) { // 說明客戶端請求一切正常
                        if (xhr.status == 200) { // 說明伺服器響應一切正常
                            // alert(xhr.responseText); // 得到響應結果，得到頁面上面的結果，注意結果為字串
                            var msg = document.getElementById("msg");
                            if (xhr.responseText == "true") {
                                // msg.innerText = "該使用者名稱已存在";
                                msg.innerHTML = "<font color=`red`>該使用者名稱已存在</font>";
                            } else {
                                msg.innerHTML = "<font color=`green`>該使用者名稱可以使用</font>";
                            }
                        }
                    }
                }
           
                // 建立一個連線
                xhr.open("get", "${pageContext.request.contextPath}/servlet/ckNameServlet?name=" + name + "&time=" + new Date().getTime());
                // 傳送請求
                xhr.send(null);
            }
        }
    </script>

</head>
<body>
    <!-- 文字框的onblur事件(失去焦點事件) -->
    <!-- 使用者名稱：<input type="text" name="userName" onblur="ckName()"/><span id="msg" ></span></br> 
        為了使得頁面的標籤變得乾淨，事件不寫在標籤上。即js程式碼與html程式碼分離。
    -->
    使用者名稱：<input type="text" name="userName" /><span id="msg" ></span></br>
    密碼：<input type="password" name="pwd" /></br>
</body>
</html>

我的GitHub地址：https://github.com/heizemingjun
我的部落格園地址：http://www.cnblogs.com/chenmingjun
我的螞蟻筆記部落格地址：http://blog.leanote.com/chenmingjun
Copyright ©2018 黑澤明軍
【轉載文章務必保留出處和署名，謝謝！】

相關文章