标签：glib 邮箱 select base uri 服务 charset stl lin
1、Ajax全称：异步JavaScript和XML（Asynchronous JavaScript And XML）。
2、Ajax使用XMLHttpRequest对象发送请求并获得服务器端的响应，同时Ajax可以在不重新载入整个页面的情况下用JavaScript操作DOM以实现最终更新页面。
3、Ajax的四个主要组件（JavaScript、、CSS、 DOM、 XMLHttpRequest对象）。
4、使用XHR前，必须用JavaScript创建一个XHR对象 IE把XHR实现为一个ActiveX对象 其他浏览器实现为一个本地JavaScript对象 由于这些差别，所以创建XHR时需要用分支逻辑。
一、注册页面
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
//http://localhost:8080/zuoye/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 向服务器发送请求时的总会添加路径上basePath，http://localhost:8080/zuoye/ -->
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script language="javascript">
function check(form){
if(form.username.value==""){
alert("请输入用户名！");form.username.focus();return false;
}
if(form.password.value==""){
alert("请设置密码！");form.password.focus();return false;
}
if(form.password.value!=form.pwd.value){
alert("和上次输入密码不同，请重新输入！");form.pwd.focus();return false;
}
}
var xhr;
function checkUsername() {
//获取标签
var checkResult = document.getElementById("checkResult");
checkResult.innerHTML = "<font color=‘red‘ size=‘1‘>正在检测用户名...</font>";
//获取用户输入的用户名
var username = document.getElementById("username").value;
//创建浏览器中可以发送异步请求的对象xhr,不同浏览器的创建方式不同
if(window.ActiveXObject){//IE浏览器
xhr = new ActiveXObject("Microsoft.XMLHttp");
}else if(window.XMLHttpRequest){//不是IE浏览器
xhr = new XMLHttpRequest();
}
//事件监听(一旦发现状态发生变化，就执行函数handleRequest，得到服务器响应完成页面局部刷新)
xhr.onreadystatechange = handleRequest;
/*用GET方式发送请求
xhr.open("GET","UserServlet?f=1&username="+username,true);
xhr.send(null); */
//POST发送请求
xhr.open("POST","user/checkUsername.do",true);
//设置POST请求的头
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送请求数据
xhr.send("username="+username);
}
//得到服务器响应,完成页面局部刷新
function handleRequest() {
//获取标签
var checkResult = document.getElementById("checkResult");
if(xhr.readyState == 4){
if(xhr.status == 200){
checkResult.innerHTML = "<font color=‘red‘>"+xhr.responseText+"</font>";
return ture;
}else{
alert("该用户名已注册，请重新输入");return false;
}
}
}
</script>
</head>
<body>
<h1 style="font-size:28px;blue">用户注册</h1>
<form action="user/register.do" method="post" onSubmit="return check(this)">
用户名 :<input type="text" id="username" name="username" onblur="checkUsername();"/><br>
设置密码:<input type="password" id="password" name="password"/><br>
<input type="reset" value="重置">
<input type="submit" value="注册" />
<a href="user/login.do" >登录</a>
</form>
</body>
</html>
二、添加页面
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
//http://localhost:8080/zuoye/
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 向服务器发送请求时的总会添加路径上basePath，http://localhost:8080/zuoye/ -->
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>添加联系人信息</title>
<script language="javascript">
function check(form){
if(form.name.value==""){
alert("请输入用户名！");form.name.focus();return false;
}
if(form.gender.value==""){
alert("请选择性别！");form.gender.focus();return false;
}
if(form.profession.value==""){
alert("请输入联系人的职业！");form.profession.focus();return false;
}
if(form.address.value==""){
alert("请输入地址！");form.address.focus();return false;
}
if(form.phone.value==""){
alert("请输入电话！");form.phone.focus();return false;
}
objExp=/^1[3|5|7|8][0-9]\d{4,8}$/;
if(form.phone.value!="" && !objExp.test(form.phone.value)){
alert("您输入的手机号码不合法！");form.phone.focus();return false;
}
objExp=/[1-9]\d{5}(?!\d)/;
if(form.zipcode.value!=""&&!objExp.test(form.zipcode.value)){
alert("您输入的邮编不合法！！");form.zipcode.focus();return false;
}
}
</script>
</head>
<body>
<form action="linkman/add.do" method="post" onSubmit="return check(this)">
<table align="center" width="80%" border="1px">
<tr>
<td>姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<select name="gender">
<option value="">--请选择--</option>
<option value="1">男</option>
<option value="0">女</option>
</select>
</td>
</tr>
<tr>
<td>职业:</td>
<td><input type="text" name="profession"></td>
</tr>
<tr>
<td>生日:</td>
<td><input type="text" name="birthday"></td>
</tr>
<tr>
<td>住址:</td>
<td><input type="text" name="address"></td>
</tr>
<tr>
<td>联系方式:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td>邮箱地址:</td>
<td><input type="text" name="phone"></td>
</tr>
<tr>
<td><input type="submit" value="确定添加本联系人"></td>
<td><input type="reset" value="取消添加本联系人"></td>
</tr>
</table>
</form>
</body>
</html>
标签：glib 邮箱 select base uri 服务 charset stl lin
原文地址：http://www.cnblogs.com/niuxiao12---/p/6891718.html
