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"%>
AJAX的 GET 请求
Ajax的Get请求
Get请求效果图：
7、Ajax的Post请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
Ajax的Post请求
Ajax的doPost请求
Post请求效果图：
三、总结
例子虽小，但是ajax的Get和Post请求全部已实现。
注意：在写ajax项目时，一定要注意回调函数的XMLHttpRequest大小写问题。
源码：Ajax源码。本想着0积分的，但是没有0积分选项，有积分想下载就下载，不想下载评论区留言，我发你邮箱。
如果你完全复制我的代码，还报错，这个时候很有可能是环境问题，因为我都是测试了好几遍完全正确才截图的，有问题欢迎留言讨论。
如果有不同看法，或者是文中写错的地方，麻烦大佬留言指正文章错误，谢谢！！！
版权声明：本文为博主原创文章，未经博主允许不得转载。
原文出处：https://blog.csdn.net/BlackPlus28/article/details/80925156