前言

AJAX的异步加载一直是一个老生常谈的话题了，提到AJAX，想到最多的就是其的异步加载了，最近小编又让AJAX的异步加载在项目中发挥作用了，来看看它是如何展示自己的本领的吧。

叙述

AJAX的异步加载：使用不重新加载页面就获得服务器的内容的一个技术。

举例说明：

通常情况下，用户注册，那么用户首先得填写好表单，然后点提交，这样表单就会向服务发出一个请求，则服务器处理代码，如果用户存在，则返回一个信息。总之，就是所有的数据需要你点提交后，信息才会发送！
而AJAX就相当于是模拟了一个信息发送请求，你可以在很多网站上注册的时候会发现，比如用户名输入“123”，那么它可能会提示你该用户已经存在，而给你的感觉是页面并没刷新，也就是并没有提交表单，而用户名又是存放在数据库内的，也就是说要查询用户名是否存在，就必须得发送表单的里的用户名，然后再在数据库中去查询。
而这个过程就是用了AJAX来处理的，用户输入用户名，当表单的焦点发生变化的时候，则会触发AJAX，然后AJAX模拟一个GET或者POST请求给服务器，服务器就会处理传递过来的数据！而服务器在处理数据的时候，你可以做其它的，比较你可以填写密码或者其它的！

以下例子将利用ajax在注册的时候判断用户名是否存在

此例子是在SSH框架上实现，一共分为以下5步。

1.事件触发:

* onblur

2.编写AJAX代码:

* 项Action中提交:传递username参数

3.编写Action

* 接收username:模型驱动接收.

* 编写实体类

* User

* User.hbm.xml

* 配置到Spring中.

4.编写DAO

* 继承HibernateDaoSupport

* 在配置中注入sessionFactory

5.编写Service:

* 注入UserDao

* 事务管理:

一、事件触发:

1、在注册页面（regist.jsp）找到用户名一行，给其添加onblur（鼠标失去焦点）的方法

<th><span class="requiredField">*</span>用户名:</th>
   <td>
	<input type="text" id="username" name="username" class="text" maxlength="20" onblur="checkUsername()" /> 

  </td>

二、编写AJAX代码:

1、、编写checkUsername方法（AJAX）：传递username参数

function checkUsername() {
	//获得文本框的值
	var username = document.getElementById("username").value;
	//传统的异步校验
	//1.创建异步交互对象
	var xhr = createXmlHttp();
	//2.设置监听
	xhr.onreadystatechange = function() {
	   if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			document.getElementById("span1").innerHTML = xhr.responseText;
		}
	   }

	}
	//3.打开连接 参数（请求方式、请求路径、异步设置）

	xhr.open("GET","${pageContext.request.contextPath}/user_findByName.action?time="+new Date().getTime()+"&username=" + username,true);
	//4.发送
	xhr.send(null);

}
//创建对象
function createXmlHttp() {
	var xmlHttp;
	try {
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		try {
			xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
		} catch (e) {
			try {
				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e) {}
	        }
	}
	return xmlHttp;
}

三、编写Action

1、userAction:接收username:模型驱动接收

package cn.itcast.shop.user.action;

import java.io.IOException;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;

import cn.itcast.shop.user.vo.User;

import cn.itcast.shop.user.service.UserService;


/**
 * 用户模块Action的类
 * @author Sunshine
 *
 */
public class UserAction extends ActionSupport implements ModelDriven<User>{
	//模型驱动要使用的对象
	private User user=new User();
	public User getModel(){
		return user;
	}

	//注入UserService
	private UserService userService;
	
	public void setUserService(UserService userService) {
		this.userService = userService;
	}

	
	/**
	 * AJAX进行异步校验用户名的执行方法
	 * @throws IOException
	 */
	
	public String findByName() throws IOException {
		// 调用Service进行查询:
		User existUser = userService.findByUsername(user.getUsername());
		// 获得response对象,项页面输出:
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setContentType("text/html;charset=UTF-8");
		// 判断
		if (existUser != null) {
			// 查询到该用户:用户名已经存在
			response.getWriter().println("<font color='red'>用户名已经存在</font>");
		} else {
			// 没查询到该用户:用户名可以使用
			response.getWriter().println("<font color='green'>用户名可以使用</font>");
		}
		return NONE;
	}
}

2、实体类：编写User的实体类

package cn.itcast.shop.user.vo;

/**
 * 用户模块的实体类
 * @author Sunshine
 *
 */
public class User {
	private Integer uid;
	private String username;
	private String password;
	private String name;
	private String email;
	private String phone;
	private String addr;
	private Integer state;
	private String code;
	public Integer getUid() {
		return uid;
	}
	public void setUid(Integer uid) {
		this.uid = uid;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getPhone() {
		return phone;
	}
	public void setPhone(String phone) {
		this.phone = phone;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}
	public Integer getState() {
		return state;
	}
	public void setState(Integer state) {
		this.state = state;
	}
	public String getCode() {
		return code;
	}
	public void setCode(String code) {
		this.code = code;
	}
}

3、在User.hbm.xml中添加映射：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://www.hibernate.org/dtd/hibernate-mapping-3.0.dtd">
    
<hibernate-mapping>
	<class name="cn.itcast.shop.user.vo.User" table="user">
		<id name="uid">
			<generator class="native"/>
		</id>
		<property name="username"/>
		<property name="password"/>
		<property name="name"/>
		<property name="email"/>
		<property name="phone"/>
		<property name="addr"/>
		<property name="state"/>
		<property name="code"/>
		
	</class>
</hibernate-mapping>

4、将映射文件配置到Spring中(applicationContext.xml)

<property name="mappingResources">
			<list>
				<value>cn/itcast/shop/user/vo/User.hbm.xml</value>
			</list>
		</property>

四、编写DAO
1、继承HibernateDaoSupport

package cn.itcast.shop.user.dao;
import java.util.List;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;
import cn.itcast.shop.user.vo.User;

/**
 * 用户模块持久层代码
 * @author Sunshine
 *
 */
public class UserDao extends HibernateDaoSupport {
		
	//按名称查询是否有该用户
	@SuppressWarnings("unchecked") 
	public User findByUsername(String username) {
		String hql = "from User where username = ?";
		List<User> list = this.getHibernateTemplate().find(hql,username);
		if (list != null && list.size() > 0) {
			return list.get(0);
		}
		return null;
	}

}

2、在applicationContext.xml配置中注入sessionFactory

<!--Dao的配置 -->
	<bean id="userDao" class="cn.itcast.shop.user.dao.UserDao">
		<property name="sessionFactory" ref="sessionFactory"/>
	</bean>

五.编写Service:
*1、注入UserDao

package cn.itcast.shop.user.service;

import org.springframework.transaction.annotation.Transactional;

import cn.itcast.shop.user.dao.UserDao;
import cn.itcast.shop.user.vo.User;

/**
 * 用户名模块业务层代码
 * @author Sunshine
 *
 */

@Transactional
public class UserService {
	
	//注入UserDao
	private UserDao userDao;
	public void setUserDao(UserDao userDao){
		this.userDao=userDao;
	}
	
	//按用户名查询用户的方法
	public User findByUsername(String username){
		return userDao.findByUsername(username);
	}

}
;

2、事务管理:

	<!--Service的配置 -->
	<bean id="userService" class="cn.itcast.shop.user.service.UserService">
		<property name="userDao" ref="userDao" />
	</bean>

来两张图看一下效果吧。

小结

其实以上的步骤，基本上就是实际运用SSH框架的一个基本步骤，在学习的过程中，思路清晰了，接下来一切就好办了。

具体什么是SSH框架呢，请看小编的上一篇博客。SSH框架

原文链接：https://www.f2er.com/ajax/160521.html

【SSH网上商城】使用AJAX异步加载校验用户名是否存在

前言

叙述

小结

猜你在找的Ajax相关文章