首页 > 代码库 > Ajax
Ajax
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="http://www.mamicode.com/">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>注册页面</title>
<script language="javascript">
function check(form){
if(form.username.valuehttp://www.mamicode.com/==""){
alert("请输入用户名！");form.username.focus();return false;
}
if(form.password.valuehttp://www.mamicode.com/==""){
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="http://www.mamicode.com/重置">
<input type="submit" value="http://www.mamicode.com/注册" />
<a href="http://www.mamicode.com/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="http://www.mamicode.com/">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>添加联系人信息</title>
<script language="javascript">
function check(form){
if(form.name.valuehttp://www.mamicode.com/==""){
alert("请输入用户名！");form.name.focus();return false;
}
if(form.gender.valuehttp://www.mamicode.com/==""){
alert("请选择性别！");form.gender.focus();return false;
}
if(form.profession.valuehttp://www.mamicode.com/==""){
alert("请输入联系人的职业！");form.profession.focus();return false;
}
if(form.address.valuehttp://www.mamicode.com/==""){
alert("请输入地址！");form.address.focus();return false;
}
if(form.phone.valuehttp://www.mamicode.com/==""){
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="http://www.mamicode.com/1">男</option>
<option value="http://www.mamicode.com/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="http://www.mamicode.com/确定添加本联系人"></td>
<td><input type="reset" value="http://www.mamicode.com/取消添加本联系人"></td>
</tr>
</table>
</form>
</body>
</html>
Ajax
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。