Ajax
Posted 清泉＊＊＊
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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="<%=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>
以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章