js代码与html代码分离示例

简介: 验证用户名是否存在的示例代码引出该思想:Insert title here            // 方式一:使用文本框的onblur事件(失去焦点事件)//         function ckName() {//             // 通过标签名获取元素节点对象//             var name = document.
验证用户名是否存在的示例代码引出该思想:
<%@ 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 黑泽明军
【转载文章务必保留出处和署名,谢谢!】
相关文章
|
1天前
|
设计模式 JavaScript 前端开发
JS 代码中变量和函数的正确写法总结
**代码规范与最佳实践摘要** 1. 使用可读性强的变量名,如`currentDate`代替`yyyymmdstr`。 2. 对同一类型变量使用相似命名,如`getUser()`代替`getUserInfo()`。 3. 变量名应具有描述性,避免使用难以理解的数字,如`MILLISECONDS_IN_A_DAY`代替`86400000`。
13 2
|
1天前
|
JSON Dart 前端开发
JavaScript 代码示例及其 Dart 对应代码
从React/React Native转向Flutter开发时,开发者常需查找Dart对等的JS语法。这里列举了15个转换示例,涉及JSON转换、数组操作、条件检查及转换方法。例如,JS的`JSON.stringify`在Dart中是`JsonEncoder().convert`,`array.push`对应`list.add`,`array.findIndex`在Dart中是`list.indexWhere`。Dart还提供了如`list.any`和`list.every`等类似JS的数组方法。虽然语法有别,但核心功能相似。
21 5
|
1天前
|
Ubuntu C++ Docker
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
Docker的基本指令和HTML/PYTHON/C++的简单创建示例
|
1天前
|
JavaScript 前端开发
Notepad++如何格式化JS代码
Notepad++如何格式化JS代码
9 1
|
1天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
22 5
|
2天前
|
设计模式 存储 JavaScript
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
【JavaScript】JavaScript对象设计哲学:八种模式塑造高效代码
14 5
|
2天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
13 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
3天前
|
JavaScript 前端开发
页面加载时执行特定的 JavaScript 代码
页面加载时执行特定的 JavaScript 代码
|
4天前
|
JavaScript 前端开发 Android开发
kotlin安卓在Jetpack Compose 框架下使用webview , 网页中的JavaScript代码如何与native交互
在Jetpack Compose中使用Kotlin创建Webview组件,设置JavaScript交互:`@Composable`函数`ComposableWebView`加载网页并启用JavaScript。通过`addJavascriptInterface`添加`WebAppInterface`类,允许JavaScript调用Android方法如播放音频。当页面加载完成时,执行`onWebViewReady`回调。
|
5天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)