js代碼與html代碼分離示例
阿新 • • 發佈：2018-06-17
RM request對象 失去焦點 html4 sans path 一個 字符串 mon 驗證用戶名是否存在的示例代碼引出該思想：
<%@ 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>
js代碼與html代碼分離示例