首页 > 代码库 > 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