Ajax异步请求案例（一）

一、Ajax介绍

1、Ajax不是一项具体的技术，而是几门技术的综合应用。

Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。

2、Ajax核心只不过是要在javascript中调用一个叫XMLHttpRequest类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求和接收响应。

3、XMLHttpRequest对象在网络上的俗称为Ajax对象。

4、一种不用刷新整个页面便可与服务器通讯的办法(更新网页部分数据)。

普通浏览器交互方式和基于Ajax技术的交互方式（图解）：

AJAX缺陷：

1，AJAX大量使用了Javascript和AJAX引擎，而这个取决于浏览器的支持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才支持，Mozilla虽然也支持AJAX，但是提供XMLHttpRequest的方式不一样。所以，使用AJAX的程序必须测试针对各个浏览器的兼容性。

2，AJAX更新页面内容的时候并没有刷新整个页面，因此，网页的后退功能是失效的；有的用户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒用户“数据已更新”。

3，对流媒体的支持没有FLASH、JavaApplet好:Html5+jQuery。 

二、通过简单的一个小案例说明Ajax

首先，项目结构。

1、先写JdbcUtil类

package util;

import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.Properties;

//  连接数据库
public class JdbcUtil {
	private static Properties p = new Properties();
	static {
		try {
			ClassLoader loader = Thread.currentThread().getContextClassLoader();
			// 从classpath的跟路径去寻找db.properties
			InputStream inStream = loader.getResourceAsStream("db.properties");
			p.load(inStream); // 加载
		} catch (IOException e) {
			throw new RuntimeException("加载classpath路径下的db.properties文件失败", e);
		}
		// 1加载注册驱动
		try {
			Class.forName(p.getProperty("DriverName"));
			System.out.println("加载数据驱动正常");
		} catch (Exception e) {
			throw new RuntimeException("数据库驱动加载失败", e);
		}
	}
	// 返回创建好的Connection对象,用静态的这种方式应该把构造器私有化起来
	public static Connection getConn() {
		try {
			System.out.println("连接数据库正常");
			// 2获取连接对象
			return DriverManager.getConnection(p.getProperty("url"), p.getProperty("username"),
					p.getProperty("password"));
		} catch (Exception e) {
			e.printStackTrace();
		}
		throw new RuntimeException("数据库连接异常");
	}
	// 5):释放资源
	public static void close(Connection conn, Statement st, ResultSet re) {
		try {
			if (re != null) {
				re.close();
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			try {
				if (st != null) {
					st.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
			try {
				if (conn != null) {
					conn.close();
				}
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}
	private JdbcUtil() {}
}

2、先写domain

package domain;
public class User {
	private int id;
	private String username;
	private String password;
	
	public User() {
		super();
	}
	
	public User(String username, String password) {
		super();
		this.username = username;
		this.password = password;
	}

	public User(int id, String username, String password) {
		super();
		this.id = id;
		this.username = username;
		this.password = password;
	}

	public int getId() {
		return id;
	}

	public void setId(int id) {
		this.id = id;
	}

	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;
	}

	@Override
	public String toString() {
		return "User [id=" + id + ", username=" + username + ", password=" + password + "]";
	}
}

3、在dao层写方法

package dao;


public interface IUserDao {
	/**
	 * ajax 注册
	 * @param userName
	 * @return
	 */
	public long GetCountWithName(String username);
}

在UserDaoImpl写方法的实现。

package dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import dao.IUserDao;
import util.JdbcUtil;

public class UserDaoImpl implements IUserDao{
	@Override
	public long GetCountWithName(String username) {
		int cnt = 0;
		String sql = "SELECT count(1) cnt  FROM  t_user WHERE username = ?";
		Connection conn = null;
		PreparedStatement ps =null;
		ResultSet rs = null;
		System.out.println(username);
		try {//  获取语句
			 conn = JdbcUtil.getConn();
			 ps = conn.prepareStatement(sql);
			 //  设置占位符
			 ps.setString(1, username);  // 需要username参数
			 rs=  ps.executeQuery();
			 
			 while(rs.next()) {
				cnt  = rs.getInt("cnt");
				return cnt;
			 }
		} catch (Exception e) {
			e.printStackTrace();
		}finally {
			JdbcUtil.close(conn, ps, rs);
		}
		return cnt;
	}
}

在这里会涉及到数据库，数据库非常简单，里面就放username一个字段就可以测试效果。

4、写IUserService接口

package service;


public interface IUserService {
	/**
	 *   ajax登录
	 * @param userName
	 * @return
	 */
	public long GetCountWithName(String userName);
}

UserServiceImpl.java

package service.impl;

import dao.IUserDao;
import dao.impl.UserDaoImpl;
import service.IUserService;

public class UserServiceImpl implements IUserService {
	
	private IUserDao dao = new UserDaoImpl();
	@Override
	public long GetCountWithName(String userName) {
		
		return dao.GetCountWithName(userName);
	}
}

5、AjaxServlet处理前端请求

package controller;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import service.IUserService;
import service.impl.UserServiceImpl;

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet{
	private static final long serialVersionUID = 1L;
	private IUserService userService = new UserServiceImpl();

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("请求到AjaxServlet");
		response.setCharacterEncoding("utf-8");
		PrintWriter pw = response.getWriter();
		
		String username=request.getParameter("username");
		System.out.println(username);
		long count = userService.GetCountWithName(username);
		if(count>0){
//			request.setAttribute(name, o);   //  不能用这个req进行跳转（整个页面进行刷新）
			pw.println(username + "已注册");
			pw.flush();
			System.out.println("不可以注册" + username);
		}else{
			pw.println(username+"可以注册");
			System.out.println("可以注册" + username);
			pw.flush();
		}
		pw.close();
	}
	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}
}

6、AJAX的GET请求

<%@ page language="java" contentType="text/html; charset=UTF-8"   pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AJAX的   GET  请求</title>
<script type="text/javascript">
	var xmlHttp;
	
	//创建ajax的核心对象creatxmlhttpRequest
	function createXMLhttpRequest() {
		xmlHttp = new XMLHttpRequest();
	}
	
	function check() {
		var username = document.getElementById("username").value;
		// 发送请求
		sendRequest("${pageContext.request.contextPath}/AjaxServlet?username=" + username);
	}
	function sendRequest(url) {
		createXMLhttpRequest();
		xmlHttp.open("get",url,true);  //  true 就是异步NN
		//   send()里面也可以指定发送内容
		xmlHttp.send(null);   //  发送
		xmlHttp.onreadystatechange=callBack;   //回调函数
	  
	}
    function callBack(){
    	 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 	   if(xmlHttp.readyState==4  && xmlHttp.status==200){
 		  var uname=xmlHttp.responseText;  //返回的内容:且字符串的方式返回
 		 	 var div=document.getElementById("result");
 		  		div.innerHTML=uname;
 	   }
    }
</script>
</head>
<body>
<h3>Ajax的Get请求</h3>
	<form action="" method="get">
		用户名:<input type="text" name="username"  onblur="check()"  id="username">
		 <div id="result"></div><br> 
	</form>
</body>
</html>

Get请求效果图：

7、Ajax的Post请求

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax的Post请求</title>
<script type="text/javascript">
	var xmlHttp;
	var username;
	//创建ajax的核心对象creatxmlhttpRequest
	function createXMLhttpRequest() {
		xmlHttp = new XMLHttpRequest();
	}
	
	function check() {
		username = document.getElementById("username").value;
		// 发送请求
		sendRequest("${pageContext.request.contextPath}/AjaxServlet");
	}
	function sendRequest(url) {
		createXMLhttpRequest();
		xmlHttp.open("post",url,true);  //  true 就是异步
		
		//post提交,必须设置一下header头信息
  		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//send()里面指定发送内容
		xmlHttp.send("username=" + username);   //  发送
		xmlHttp.onreadystatechange=callBack;   //回调函数
	  
	}
    function callBack(){
    	 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
 	   if(xmlHttp.readyState==4  && xmlHttp.status==200){
 		  var uname=xmlHttp.responseText;  //返回的内容:且字符串的方式返回
 		 	 var div=document.getElementById("result");
 		  		div.innerHTML=uname;
 	   }
    }
</script>
</head>
<body>
	<h3>Ajax的doPost请求</h3>
	<form action="" method="post">
		用户名:<input type="text" name="username"  onblur="check()"  id="username">
		 <div id="result"></div><br> 
	</form>
</body>
</html>

Post请求效果图：

三、总结

例子虽小，但是ajax的Get和Post请求全部已实现。

注意：在写ajax项目时，一定要注意回调函数的XMLHttpRequest大小写问题。

源码：Ajax源码。本想着0积分的，但是没有0积分选项，有积分想下载就下载，不想下载评论区留言，我发你邮箱。

如果你完全复制我的代码，还报错，这个时候很有可能是环境问题，因为我都是测试了好几遍完全正确才截图的，有问题欢迎留言讨论。

如果有不同看法，或者是文中写错的地方，麻烦大佬留言指正文章错误，谢谢！！！ 

版权声明：本文为博主原创文章，未经博主允许不得转载。

原文出处：https://blog.csdn.net/BlackPlus28/article/details/80925156