js代码与html代码分离示例
<%@ 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>
我的博客园地址: http://www.cnblogs.com/chenmingjun
我的蚂蚁笔记博客地址: http://blog.leanote.com/chenmingjun
Copyright ©2018 黑泽明军
【转载文章务必保留出处和署名,谢谢!】
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
设计模式—模板方法的C++实现
这是Bwar在2009年写的设计模式C++实现,代码均可编译可运行,一直存在自己的电脑里,曾经在团队技术分享中分享过,现搬到线上来。 1. 模板方法简述 1.1 目的 定义一个操作中的算法骨架,而将一些步骤延迟到子类中。TemplateMethod使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 1.2 适用性 (1) 一次性实现一个算法的不变部分,并将可变的信鸽网i留给子类来实现。 (2) 各子类中公共的行为应被提取出来并几种到一个公共父类中以避免代码重复。 (3) 控制子类的扩展。 2. 模板方法结构图 AbstractClass:定义抽象的原语操作,具体的子类将重定义它们以实现一个算法的各步骤;实现一个模板方法,定义一个算法的股价。 ConcreteClass:实现原语操作以完成算法中与特定子类相关的步骤。 3. 模板方法C++实现示例 用模板方法实现游戏的数据统计框架。游戏往往有很多服,称之为大区,MMO游戏中也称之为World。游戏的数据统计会有很多数据指标,所有数据指标都既需要全局的统计,又需要各大区的分开统计,这些数据指标的统...
- 下一篇
C++程序设计基础(6)内存分配
1.知识点 三步走:申请,释放,指针置空。 1.1malloc、free函数 在C语言中内存malloc函数申请动态空间,以下展示其基本用法: 1 int *p = NULL; 2 p = (int *)malloc(sizeof(int) * 10);//申请 3 free(p);//释放,否则会造成内存泄漏 4 p = NULL;//指针置空,否则成为野指针 (1)动态分配的空间来自队空间,而指针本身作为局部变量存储在栈空间中。 (2)malloc有时候也可能申请空间失败,这时返回NULL,故需要对其进行判断。 (3)通过malloc动态申请的空间必须通过free函数释放,这两个函数成对出现。否则可用空间会越来越少。 (4)在通过free函数释放之后,最好将指针置空。 (5)malloc/free函数申请释放的过程其实就是可用空间链表不断在更新。 1.2new、delete函数 (1)new和delete运算符既可以应用于基本类型,也可以用于自定义类型,new操作符不仅申请了空间,然后还根据提供的参数进行构造函数初始化,delete在释放内存空间之前还会调用对象的析构函数,这些事n...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Hadoop3单机部署,实现最简伪集群
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果