Ajax介绍（用户注册验证）

最新推荐文章于 2024-09-20 11:38:47 发布

mohaiyong

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量86

点赞数

分类专栏： Ajax/XML/JSON/XSL 文章标签： javascript java ViewUI

本文链接：https://blog.csdn.net/mohaiyong/article/details/84355233

版权

Ajax/XML/JSON/XSL 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

[align=center][size=xx-large][b][color=red]Ajax,检查用户名是否存在[/color][/b][/size][/align]

[size=medium][b][color=red]Ajax作用：[/color][/b][/size]
Asynchronous JavaScript and XML（异步JavaScript和XML)
异步的主要是刷新一个层

Ajax里的onreadystatechange是做什么用的

发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态，XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能。这类似于回调函数的做法。 onreadyStateChange事件可指定一个事件处理函数来处理XMLHttpRequest对象的执行结果，

onreadyStateChange事件是在readyState属性发生改变时触发的，readyState的值表示了当前请求的状态，在事件处理程序中可以根据这个值来进行不同的处理。 readyState有五种可取值0：尚未初始化，1：正在加载，2：加载完毕，3：正在处理；4：处理完毕。一旦readyState属性的值变成了 4，就可以从服务器返回的响应数据进行访问了。通常在事件中判断readyState的值是在请求完毕时才做处理，

Http状态码含义 200 请求成功 202 请求被接受但处理未完成 400 错误请求 404 请求资源未找到 500 内部服务器错误

[img]http://dl.iteye.com/upload/picture/pic/119888/2903695c-1516-3c9b-9fcf-09be8a2dff8f.jpg[/img]
source code：

[size=medium][b][color=green]1.addTeam.jsp[/color][/b][/size]

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%@ taglib prefix ="s" uri="/struts-tags"%> 
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>增加小组</title>
<link rel="stylesheet" type="text/css" href="./css/team.css" />
<script type="text/javascript" src="./js/trim.js"></script>
<script type="text/javascript">
var xmlHttp;

function createXMLHttpRequest() {
	if(window.ActiveXObject) {
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else if(window.XMLHttpRequest) {
		xmlHttp = new XMLHttpRequest();
	}
}

function startRequest() {
	//创建请求对象
	createXMLHttpRequest();
	//为事件readystatechange绑定函数handleStateChange
	xmlHttp.onreadystatechange = handleStateChange;
	//打开访问的地址
	xmlHttp.open("Post","team/TeamNameCheck",true);
	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//发送请求
	xmlHttp.send("team.name=" + teamForm.elements["team.name"].value);
}

function handleStateChange() {
	if(xmlHttp.readyState == 4) {
		if(xmlHttp.status == 200) {
			document.getElementById("namecheck").innerHTML = xmlHttp.responseText;
		}
	}
}


function checkTeam() {
	if(trim(teamForm.elements["team.name"].value) == "") {
		alert("请填写组名！");
		return false;
	}
	if(trim(teamForm.elements["team.leader"].value) == "") {
		alert("请填写组长！");
		return false;
	}
	if(trim(teamForm.elements["team.slogan"].value) == "") {
		alert("请填写口号！");
		return false;
	}

	return true;
}
</script>
</head>
<body>
<div id="top">
<h1>增加小组</h1>
</div>

<div id="content">
<form name="teamForm" action="team/AddTeam" method="post" onsubmit="return checkTeam();">
<p>组名：<input type="text" name="team.name" onblur="startRequest()"><span id="namecheck"></span>
<p>组长：<input type="text" name="team.leader">
<p>口号：<input type="text" name="team.slogan">
<p><input type="submit" value="确定">
<input type="reset" value="重填">
</form>
<p><s:fielderror></s:fielderror></p>
<p><a href="./team/index.jsp">返回小组管理</a>
</div>

</body>
</html>

[size=medium][b][color=green]2.struts.xml文件里面配置解决中文乱码：[/color][/b][/size]

<constant name="struts.i18n.encoding" value="UTF-8"></constant>

假如是“UTF-8”以外的其他编码如gbk，都会在action里面接收的name都是乱码，因为var xmlHttp;对象默认提交的编码就是utf-8

[size=medium][b][color=green]3.struts.xml配置文件(没有result)：[/color][/b][/size]

<actionname="TeamNameCheck" class="com.org.momo.action.team.TeamNameCheckAction">
</action>

TeamNameCheckAction.java

  package com.org.momo.action.team;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.org.momo.bean.Team;
import com.org.momo.service.TeamService;

public class TeamNameCheckAction extends ActionSupport{
    private Team team ;
    @Resource
    private TeamService teamService ;
    private List<Team> teams ;

    public List<Team> getTeams(){
    	return teams ;
    }
    public void setTeams(List<Team> teams){
    	this.teams = teams ;
    }
    public Team getTeam(){
    	return team ;
    }
    public void setTeam(Team team){
    	this.team = team ;
    }

    public String execute(){
    	HttpServletResponse response = ServletActionContext.getResponse() ;
    	response.setContentType("text/html;charset=gbk") ;
    	try{
    		 String str ="<font color='red' font='4'> * 该组名可以使用！</font>" ;
    		 String teamName = team.getName(); 
    		 PrintWriter out = response.getWriter() ;
    		 teams = teamService.getTeams() ;
    		 for(Team team:teams){
    			 if(teamName.equals(team.getName())){
    				 str ="<font color='red' font='4'> * 组名已存在,请重新输入！</font>" ;
    				 break ;
    			 }
    		 }
    		 out.print(str) ;
    	}catch(Exception e){
    		e.printStackTrace() ;
    	}
    	return null ;   //返回结果不是”success” 也不是 ”error”
    }
}