粤嵌打卡第50天（三种方式实现ajax异步调用服务器端技术）

本文链接：https://blog.youkuaiyun.com/qq_41986840/article/details/107329172

异步：是指在不刷新浏览器的情况下和服务器端通信，获取数据，局部更新页面

1、传统方式js实现ajax异步通信

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>传统js方式实现ajax实现和后台数据库交互</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
	/* 传统js方式实现ajax异步调用 */
	var testAjax = function() {
		//1、建立可以和后台通讯的XMLHttpRequest对象
		var req = null;
		//适用于ie7+,火狐、谷歌
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else {
			//for  ie5  ie6
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		//2、检测状态变化
		req.onreadystatechange = function() {
			if (req.readyState == 4 && req.status == 200) {
				$("p").html(req.response); //异步调用servlet中的数据，通过ajax返回给前端页面展示
			}
		}
		//3、初始化req
		req.open("GET", "./TestServlet", true);
		//4、发送消息    调用send方法发送消息无需参数 （null）
		req.send(null);
	}

servlet测试数据

package com.yueqian.servlet;

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

@WebServlet("/TestServlet")
public class TestServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		String name = request.getParameter("name");
		String password = request.getParameter("password");
		response.getWriter().print("测试 ajax 异步传输数据！"+name+"|"+password);
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

2、jquery实现ajax异步调用

/* jquery方式调用ajax 
		路径名
		参数值
		执行函数
		返回类型
	*/
	function testAjax1() {
		$.get("./TestServlet", {
			"name":"张三",
			"password":"123"
		},function(data) {
			$("p").html(data);
		},"json");
	}

body测试代码

<p>test</p>
	<button type="button" onclick="testAjax()">js实现ajax</button>
	<button type="button" onclick="testAjax1()">jquery实现ajax</button>

3、使用jackson将对象封装转换为json格式实现ajax异步调用

从数据库查询到员工的数据展现在前台表格中，使用jackson完成ajax异步调用，完成案例的编写

sql:

CREATE TABLE EMP
(EMPNO INT(4),
ENAME VARCHAR(10),
JOB VARCHAR(9),
MGR INT(4),
HIREDATE DATE,
SAL FLOAT(7,2),
COMM FLOAT(7,2),
DEPTNO INT(2),
CONSTRAINT PK_EMP PRIMARY KEY(EMPNO),
CONSTRAINT FK_DEPTNO FOREIGN KEY(DEPTNO) REFERENCES dept(DEPTNO));

jar包如下：

empModel类

package com.yueqian.model;

import java.util.Date;

public class EmpModel {
	private Integer empNo;
	private String eName;
	private String job;
	private Integer mgr;
	private Date hiredate;
	private Float sal;
	private Float comm;
	private Integer deptNo;
	public EmpModel() {
		super();
		// TODO Auto-generated constructor stub
	}
	public EmpModel(Integer empNo, String eName, String job, Integer mgr, Date hiredate, Float sal, Float comm,
			Integer deptNo) {
		super();
		this.empNo = empNo;
		this.eName = eName;
		this.job = job;
		this.mgr = mgr;
		this.hiredate = hiredate;
		this.sal = sal;
		this.comm = comm;
		this.deptNo = deptNo;
	}
	public Integer getEmpNo() {
		return empNo;
	}
	public void setEmpNo(Integer empNo) {
		this.empNo = empNo;
	}
	public String geteName() {
		return eName;
	}
	public void seteName(String eName) {
		this.eName = eName;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public Integer getMgr() {
		return mgr;
	}
	public void setMgr(Integer mgr) {
		this.mgr = mgr;
	}
	public Date getHiredate() {
		return hiredate;
	}
	public void setHiredate(Date hiredate) {
		this.hiredate = hiredate;
	}
	public Float getSal() {
		return sal;
	}
	public void setSal(Float sal) {
		this.sal = sal;
	}
	public Float getComm() {
		return comm;
	}
	public void setComm(Float comm) {
		this.comm = comm;
	}
	public Integer getDeptNo() {
		return deptNo;
	}
	public void setDeptNo(Integer deptNo) {
		this.deptNo = deptNo;
	}
}

DButils类

package com.yueqian.utils;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;


public class DBUtils {
	private static String url = "jdbc:mysql://127.0.0.1:3306/emps?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8&useSSL=false";
	private static String username = "root";
	private static String password = "root";
	static {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
		} catch (ClassNotFoundException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}

	/**
	 * 连接数据库操作
	 * 
	 * @return
	 * @throws SQLException
	 */
	public static Connection getConn() throws SQLException {
		Connection conn = null;
		conn =  DriverManager.getConnection(url, username, password);
		return conn;
	}

	public static void closeAll(Connection conn, java.sql.Statement stmt, ResultSet rs) {
		if (rs != null) {
			try {
				rs.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if (stmt != null) {
			try {
				stmt.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if (conn != null) {
			try {
				conn.close();
			} catch (SQLException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}

EmpDao类

package com.yueqian.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.yueqian.model.EmpModel;
import com.yueqian.utils.DBUtils;

/**
 * 员工持久层
 * @author LinChi
 *
 */
public class EmpDao {
	//单例模式
	private static EmpDao empDao;
	private EmpDao() {
		
	}
	public static EmpDao getInstance() {
		if(empDao == null) {
			empDao = new EmpDao();
		}
		return empDao;
	}
	
	public List<EmpModel> findAllEmps(){
		Connection conn = null;
		PreparedStatement pstm = null;
		ResultSet rs = null;
		List<EmpModel> empList = null;
		try {
			conn = DBUtils.getConn();
			System.out.println("conn=================="+conn);
			pstm = conn.prepareStatement("SELECT EMPNO,ENAME,JOB,MGR,HIREDATE,SAL,COMM,DEPTNO FROM emp");
			rs = pstm.executeQuery();
			empList = new ArrayList<EmpModel>();
			while(rs.next()) {
				EmpModel empModel = new EmpModel();
				empModel.setEmpNo(rs.getInt(1));
				empModel.seteName(rs.getString(2));
				empModel.setJob(rs.getString(3));
				empModel.setMgr(rs.getInt(4));
				empModel.setHiredate(rs.getDate(5));
				empModel.setSal(rs.getFloat(6));
				empModel.setComm(rs.getFloat(7));
				empModel.setDeptNo(rs.getInt(8));
				empList.add(empModel);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}finally {
			DBUtils.closeAll(conn, pstm, rs);
		}
		return empList;
	}
	
}

service类：使用jackson中的objectMapper.writeValueAsString()方法，对集合转换成json字符串形式返回

package com.yueqian.service;

import java.util.List;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.yueqian.dao.EmpDao;
import com.yueqian.model.EmpModel;

public class EmpService {
	private static EmpService empService;
	//定义jackjson解析对象为字符串
	private ObjectMapper objectMapper = new ObjectMapper();
	private EmpService() {
		
	}
	public static EmpService getInstance() {
		if(empService == null) {
			empService = new EmpService();
		}
		return empService;
	}
	/**
	 * 获取所有员工信息返回的字符串
	 * @return
	 */
	public String findAllEmps() {
		List<EmpModel> findAllEmps = EmpDao.getInstance().findAllEmps();
		System.out.println("=========================="+findAllEmps);
		String json = null;
		try {
			//将集合对象返回json形式
			json = objectMapper.writeValueAsString(findAllEmps);
			System.out.println(json);
		} catch (JsonProcessingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return json;
	}
}

servlet类

package com.yueqian.servlet;

import java.io.IOException;
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 com.yueqian.service.EmpService;

@WebServlet("/EmpServlet")
public class EmpServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		String findAllEmps = EmpService.getInstance().findAllEmps();
		System.out.println(findAllEmps);
		response.getWriter().print(EmpService.getInstance().findAllEmps());
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

emp.html页面

使用$.getJSON()方法简单实现ajax异步调用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用工信息表</title>
<style type="text/css">
	.tab{
		text-align: center;
	}
</style>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$.getJSON("./EmpServlet", function(data) {5
			var tbody = $("tbody");
			for (var i = 0; i < data.length; i++) {
				var tr = $("<tr><td>" + data[i].empNo + "</td><td>" + data[i].eName + "</td><td>" + data[i].job + "</td><td>" + data[i].mgr + "</td><td>" + data[i].hiredate + "</td><td>" + data[i].sal + "</td><td>" + data[i].comm + "</td><td>" + data[i].deptNo + "</td></tr>");
				tbody.append(tr);
			}
		});
	});
	
	/*
	private Integer empNo;
	private String eName;
	private String job;
	private Integer mgr;
	private Date hiredate;
	private Float sal;
	private Float comm;
	private Integer deptNo;
	*/
</script>
</head>
<body>
	<table border="2" align = "center">
		<thead>
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>工作</th>
				<th>上司</th>
				<th>生日</th>
				<th>工资</th>
				<th>奖金</th>
				<th>所属部门</th>
			</tr>
		</thead>
		<tbody>

		</tbody>
	</table>
</body>
</html>

好了，今天的ajax内容就到这了，以后用到ajax时就可以来看看喽！