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 黑泽明军
【转载文章务必保留出处和署名,谢谢!】
相关文章
|
4月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
13天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
91 1
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示

热门文章

最新文章