js代码与html代码分离示例

2018-06-27 10:05:52来源：未知阅读 ()

验证用户名是否存在的示例代码引出该思想：

<%@ 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>