Web开发中，Ajax技术可以实现页面的局部更新，数据异步交互的方式给用户带来了更好的使用体验。使用JavaScript可以实现Ajax操作，但使用JavaScript实现Ajax操作不仅代码复杂，还需要考虑浏览器的兼容问题，给开发人员带来了不便。jQuery对JavaScript进行了二次封装同时也对Ajax的操作重新进行了整理与封装，简化了Ajax的使用。本章将针对jQuery中Ajax的使用进行详细讲解。
12.1?Ajax概述
Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。
传统请求：
Ajax异步请求方式
?Ajax异步请求方式不向服务器发出请求，会得到数据后再更新页面（通过DOM操作修改页面内容），整个过程不会发生页面跳转或刷新操作。
?二则比较：
| 比较方式 | 遵循的协议 | 请求发出方式 | 数据展示方式 |
| 传统方式 | HTTP | 页面链接跳转发出 | 重新载入新页面 |
| Ajax异步方式 | HTTP | 由XMLHttpRequest实例发出请求 | JavaScript和DOM技术把数据更新到本页面 |
12.2jQuery框架
引入jQuery
<!-- 引入本地下载的jQuery -->
<script src="jquery-1.6.1.js"></script>
<!-- 引入CDN加速的jQuery -->
<script src="https://code.jquery.com/jquery-1.6.1.js"></script>
jQuery提供的方法大致可分为两类，一类是用于发送请求的$.get()方法和$.post()方法；另一类是用于获取不同格式数据的$.load()方法、$.getJSON()方法和$.getScript()方法。
12.2.3? jQuery中的load()方法
load(url,data,callback)
| url | 必需，指定加载资源的路径 |
| data | 可选，发送至服务器的数据 |
| callback | 可选，请求完成时执行的函数 |
请求HTML文件
firstweb\WebContent\chapter12? 目录下创建load.jsp，target.jsp，同时把?jquery-3.6.0.js 放入目录中：
target.jsp：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>target</title>
</head>
<body>
<h3>静夜思</h3>
<h6>唐 李白</h6>
<pre>
床前明月光，
疑是地上霜。
举头望明月，
低头思故乡。
</pre>
</body>
</html>
load.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>load</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
<!-- ${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于 <%=request.getContextPath()%> 。
也就是取出部署的应用程序名或者是当前的项目名称 -->
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script type="text/javascript">
$('#btn').click(function() {
$('#box').load('http://localhost:8080/firstweb/chapter12/target.jsp');
});
</script>
</body>
</html>
向服务器发送数据
创建load2.jsp文件
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>load2</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
/* $('#box').load('http://localhost:8080/chapter12/Load2Servlet',
{username: 'itcast', password: 123});*/
$('#box').load('http://localhost:8080/firstweb/load2Servlet',
{username:'itcast',password:123}, //注意源代码中的中英文符号
function(responseData, status, xhr){
console.log(responseData); // 输出请求的数据
console.log(status); // 输出请求状态
console.log(xhr); // 输出XMLHttpRequest对象
})
});
</script>
</body>
</html>
创建名称为load2Servlet的Servlet类，用于接收load2.jsp的请求
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
response.setContentType("text/html;charset=utf-8");
//获取load2.jsp页面的username与password值
String username=request.getParameter("username");
String password=request.getParameter("password");
response.getWriter().println("注册成功！<br/>用户名："+username+"<br/>密码："+password);
}回调函数
load()方法的第3个参数是回调函数，该函数在请求数据加载完成后执行。回调函数用于获取本次请求的相关信息，它有3个默认参数，分别表示响应数据、请求状态和XMLHttpRequest对象。其中，请求状态共有5种，分别为success（成功）、notmodified（未修改）、error（错误）、timeout（超时）和parsererror（解析错误）。
在浏览器访问http://localhost:8080/firstweb/chapter12/load2.jsp，并单击“加载数据”按钮，再打开浏览器开发者工具（一般在浏览器中按“F12”键可以直接打开），浏览器控制台打印信息如下。
?jQuery中的GET请求和POST请求
$.get()方法：
$.get(url,data,function(data, status, xhr),dataType)
由上述语法可知，get()方法是jQuery的静态方法，由“$”对象直接调用。$.get()方法的参数含义如下表所示。
| 参数 | 描述 |
| url | 必须，规定加载资源的路径 |
| data | 可选，发送至服务器的数据 |
| function(data, status, xhr) | 可选，请求成功时执行的函数data表示从服务器返回的数据status表示请求的状态值xhr表示当前请求相关的XMLHttpRequest对象 |
| dataType | 可选，预期的服务器响应的数据类型（ xml、html、text、script、json、jsonp） |
创建名称为get.jsp的JSP页面，在get.jsp中调用$.get()方法请求target.jsp页面，并将返回的数据显示到页面指定位置。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>get</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
$.get('http://localhost:8080/firstweb/chapter12/target.jsp', function(data) {
$('#box').html(data);
}, 'html');
});
</script>
</body>
</html>
添加get2.jsp文件，用于向服务器发送数据。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>get2</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<div id="box"></div>
<script>
$('#btn').click(function() {
var userData = {username:'itcast',password:123};
/* $.get('http://localhost:8080/firstweb/load2Servlet',userData,
function(data) {
$('#box').html(data);
}, 'html'); */
$.post('http://localhost:8080/firstweb/load2Servlet',userData,
function(data) {
$('#box').html(data);
}, 'html');
});
</script>
</body>
</html>
在 审查元素时发现 控制台提示：
Added synchronous DOM mutation listener to a 'DOMNodeInsertedIntoDocument' event. Consider using MutationObserver to make the page more responsive.
- MutationObserver interface可以用来监测DOM树的变化。
- MutationObserver 是旧的DOM3事件规范Mutation Events特性的一个替换。
- 在DOM事件触发的时候，会触发MutationObserver中传入的callback。
- DOM监听是不会立刻开始的，必须调用observer()方法才能监听。
提示咱们用?MutationObserver。这个不影响结果，关于MutationObserver详细可参考博客：
12.3JSON数据格式
在Ajax请求中，最常用的数据格式为JSON。JSON是一种存储key/value（键值对）数据的格式，类似于JavaScript的对象格式。它的优势在于数据能被处理成对象，方便获取信息字段。JSON的数据格式如下所示。
[{
"name": "Java基础",
"author": "XX程序员",
"price": "￥78.20"
}, {
"name": "Java进阶",
"author": "XX程序员",
"price": "￥39.50"
}]JSON数组数据都存储在一对[]中，在[]中，每一组数据用一对{}括起来，多个组之间用“,”分隔。需要注意的是，如果value是String类型的话必须用双引号引起来，如果是value是number、object、boolean和数组的话可以不使用双引号。
新建名称为Book的类：
package chapter12;
public class Book {
private String name; //书名
private double price; //价格
private String auther; //作者
public Book() {
// TODO Auto-generated constructor stub
}
public Book(String name,double price,String auther) {
// TODO Auto-generated constructor stub
this.name = name;
this.price = price;
this.auther = auther;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getPrice() {
return price;
}
public void setPrice(double price) {
this.price = price;
}
public String getAuther() {
return auther;
}
public void setAuther(String auther) {
this.auther = auther;
}
}
新建名称为JSONServlet的类，用于向前端页面传递JSON数据
package chapter12;
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 java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONArray;
/**
* Servlet implementation class JSONServlet
*/
@WebServlet("/JSONServlet")
public class JSONServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public JSONServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
//创建list集合
List<Book> Books= new ArrayList<Book>();
Book b =new Book();
b.setName("Java基础");
b.setAuther("XX程序员");
b.setPrice(78.20);
Books.add(b);
Book b1 =new Book();
b1.setName("Java进阶");
b1.setAuther("itcast");
b1.setPrice(68.20);
Books.add(b1);
//创建JSONArray对象
JSONArray jsonArray=JSONArray.fromObject(Books);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.print(jsonArray);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
创建名称为JSON的jsp页面，用于发送异步请求和获取JSON格式的数据。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSON</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
</head>
<body>
<button id="btn">加载数据</button>
<table id="dataTable" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>作者</th>
<th>书名</th>
<th>价格</th>
</tr>
</table>
<script type="text/javascript">
$('#btn').click(function() {
$.getJSON('http://localhost:8080/firstweb/JSONServlet',
function(data) {
var html = '';
for (var Book in data) {
html += '<tr>';
for (var key in data[Book]) {
html += '<td>' + data[Book][key] + '</td>';
}
html += '</tr>';
}
$('#dataTable').append(html);
});
});
</script>
</body>
</html>
12.4Ajax的基础操作
参考博文：$.ajax()方法详解
| 参数 | 描述 |
| url | 请求地址，默认是当前页面 |
| data | 发送至服务器的数据 |
| xhr | 用于创建XMLHttpRequest对象的函数 |
| beforeSend(xhr) | 发送请求前执行的函数 |
| success(result,status,xhr) | 请求成功时执行的函数 |
| error(xhr,status,error) | 请求失败时执行的函数 |
| complete(xhr,status) | 请求完成时执行的函数（请求成功或失败时都会调用，顺序在success和error函数之后） |
| callback | 请求完成时执行的函数 |
| dataType | 预期的服务器响应的数据类型 |
| type | 请求方式（GET或POST） |
| cache | 是否允许浏览器缓存被请求页面，默认为true |
| cache | 设置本地的请求超时时间（以毫秒计） |
| async | 是否使用异步请求。默认为true |
| username | 在HTTP访问认证请求中使用的用户名 |
| password | 在HTTP访问认证请求中使用的密码 |
| contentType | 发送数据到服务器时所使用的内容类型。默认为“application/x-www-form-urlencoded” |
ajax.jsp页面中编写代码，实现$.ajax()方法用于异步登录
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Ajax</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$.ajax({
type:"post", //提交方式
url:'http://localhost:8080/firstweb/AJAXServlet',
data:{
userName: $("#userName").val(),
password: $("#password").val()
}, //data中的内容会自动的添加到url后面
dataType: "text", //返回数据的格式
success:function(a){ //请求成功后执行的函数
if(a=="true"){
$('#suss').html("登录成功!")
}else{
$('#suss').html("登录失败!")
}
},
error :function () { //请求失败后执行的函数
alert("请求失败");
},
});
});
});
</script>
</head>
<body>
<div>
<div>
<ul>
<li>用户名：</li>
<li><input id="userName" name="userName" type="text" /></li>
</ul>
</div>
<div>
<ul>
<li>密码：</li>
<li><input id="password" name="password" type="password"/></li>
</ul>
</div>
<div>
<ul>
<li><button>登录</button></li>
</ul>
</div>
<div id="suss"></div>
</div>
</body>
</html>
创建名称为AJAXServlet的Servlet类，用于判断用户输入的账号与密码是否正确。
package chapter12;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AJAXServlet
*/
@WebServlet("/AJAXServlet")
public class AJAXServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AJAXServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//doGet(request, response);
boolean flag = false;
Map<String, String[]> parameterMap = request.getParameterMap();
if ((request.getParameter("userName")).equals("itcast")
&& request.getParameter("password").equals("123")) {
flag = true; //登录成功标志
} else {
flag = false;
}
response.setContentType("text/html;charset=utf-8");
//使用PrintWriter方法打印登录结果
PrintWriter out = response.getWriter();
out.print(flag);
out.flush();
out.close();
}
}
任务：实时显示公告信息
要完成一个程序，要求应用Ajax实现无刷新、每隔10分钟从数据库获取一次最新公告，并滚动显示。
数据库中新建表名为info的公告表
/*
Navicat MySQL Data Transfer
Source Server : 127.0.0.1
Source Server Version : 50737
Source Host : localhost:3306
Source Database : jdbc
Target Server Type : MYSQL
Target Server Version : 50737
File Encoding : 65001
Date: 2022-04-28 11:22:51
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for info
-- ----------------------------
DROP TABLE IF EXISTS `info`;
CREATE TABLE `info` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(200) CHARACTER SET utf8 NOT NULL,
`content` text CHARACTER SET utf8,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
-- ----------------------------
-- Records of info
-- ----------------------------
INSERT INTO `info` VALUES ('1', '封校通告', '4月26日晚8点，封校了');
INSERT INTO `info` VALUES ('2', '吃好喝好', '吃好喝好');
创建index.jsp文件，在该文件中显示最新公告的相关内容，主要利用Ajax异步提交请求的方式来定时读取数据库中最新的商品信息。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>index</title>
<script type="text/javascript"
src="${pageContext.request.contextPath}/chapter12/jquery-3.6.0.js"></script>
<script type="text/javascript">
function getInfo() {
$.get("http://localhost:8080/firstweb/chapter12/getInfo.jsp?nocache=" + new Date().getTime(),function (data) {
$("#showInfo").html(data);
});
}
$(document).ready(function () {
getInfo();//调用getInfo()方法获取公告信息
window.setInterval("getInfo()",10000);
})
</script>
</head>
<body>
<section>
<marquee id="showInfo" direction="up" scrollamount="3">
</marquee>
</section>
</body>
</html>
创建getInfo.jsp页面用于从数据库查询数据
<%@ page language="java" contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8" %>
<%@page import="java.sql.*" %>
<jsp:useBean id="conn" class="chapter12.ConnDB" scope="page"></jsp:useBean>
<ul>
<%
ResultSet rs=conn.executeQuery("select title from info order by id desc;");
if(rs.next()){
do{
out.print("<li>"+rs.getString(1)+"</li>");
}while (rs.next());
}else{
out.print("<li>暂无公告信息！</li>");
}
%>
</ul>
创建名称为ConnDB.java 的类，用于与数据库交互。
package chapter12;
import java.io.InputStream;
import java.sql.*;
import java.util.Properties;
public class ConnDB {
public Connection conn =null; //声明Connection对象的实例
public Statement stmt = null; //声明Statement对象的实例
public ResultSet rs = null; //声明ResultSet对象的示例
//指定资源文件保存的位置
private static String propFileName= "connDB.properties";
//创建并实例化Properties对象的实例
private static Properties prop=new Properties();
//定义并保存数据库驱动的变量
private static String dbClassName ="";
private static String dbUrl="";
private static String user="";
private static String pass="";
/**
* 构造方法
*/
static{
try{
//InputStream in =new Example02().getClass().getClassLoader().getResourceAsStream("dbcpconfig.properties");
//将Properties文件读取到InputStream对象中
//InputStream in=ConnDB.class.getResourceAsStream(propFileName);
System.out.println("开始读取资源");
InputStream in=new ConnDB().getClass().getClassLoader().getResourceAsStream(propFileName);
prop.load(in);
dbClassName = prop.getProperty("DB_CLASS_NAME"); //获取数据库驱动
dbUrl = prop.getProperty("DB_URL"); //获取数据库驱动
user = prop.getProperty("user"); //获取数据库账号
pass = prop.getProperty("pass"); //获取数据库密码
System.out.println(dbUrl);
}catch (Exception e){
e.printStackTrace(); //输出异常信息
}
}
/**
* 连接数据库
*/
public Connection getConection(){
try{
Class.forName(dbClassName).newInstance(); //装载数据库驱动
//建立与数据库URL中定义的数据库的连接
conn = DriverManager.getConnection(dbUrl,user,pass);
}catch (Exception ee){
ee.printStackTrace();
}
if(conn==null){
System.err.print("连接失败");
}
return conn;
}
/**
* 执行查询
*/
public ResultSet executeQuery(String sql){
try{
conn=getConection();
stmt =conn.createStatement(ResultSet.TYPE_SCROLL_INSENSITIVE,ResultSet.CONCUR_READ_ONLY);
//执行SQL语句，并返回一个ResultSet对象rs
rs =stmt.executeQuery(sql);
}catch (SQLException ex){
System.err.print(ex.getErrorCode());
}
return rs;
}
/**
* 关闭数据库的连接
*/
public void close(){
try{
if(rs!=null){
rs.close();
}
if (stmt!=null){
stmt.close();
}
if (conn!=null){
conn.close();
}
}catch (Exception e){
e.printStackTrace();
}
}
}
创建文件connDB.properties，用于存放数据库连接的参数信息。注意把该文件放到资源目录下，否则无法正确读取。
DB_CLASS_NAME =com.mysql.cj.jdbc.Driver
DB_URL=jdbc:mysql://localhost:3306/jdbc?serverTimezone=GMT%2B8
user =root
pass =123456
