目录
一：快速搞定AJAX（第一篇）
1、传统请求及缺点
（1）传统的请求都有哪些？
①直接在浏览器地址栏上输入URL。
②点击超链接
③提交form表单
④使用JS代码发送请求
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>演示传统请求，以及传统请求的缺点
</title>
-
</head>
-
<body>
-
-
<!--1、直接在浏览器地址栏上输入URL-->
-
http://localhost:8080/ajax1/request
-
-
<!--2、超链接-->
-
<a href="/ajax1/request">传统请求（超链接）
</a>
-
-
<!--3、form表单提交-->
-
<form action="/ajax1/request" method="get">
-
<input type="submit" value="传统请求（form表单提交）">
-
</form>
-
-
<!--4、通过JS代码来发送请求-->
-
<input type="button" value="传统请求（通过JS代码发送请求）" onclick="sendRequest()">
-
-
<script type="text/javascript">
-
function
sendRequest(
){
-
// 发送请求
-
document.
location.
href =
"/ajax1/request"
-
}
-
</script>
-
-
</body>
-
</html>
（2）传统请求存在的问题？
①页面全部刷新导致了用户的体验较差。
②传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）
（3）从图中对比可以发现，实际上是把前面的页面内容清空，然后把新的页面从零重新打到浏览器上，呈现出效果！
访问前的页面：
访问后的页面代码
2、AJAX请求原理剖析
（1）AJAX可以在浏览器当中发送异步请求，请求A和请求B是异步的；谁也不需要等谁，类似于多线程并发。
（2）AJAX的请求发送之后，不会出现页面清空，然后展示新页面的效果。
（3）浏览器上发送Ajax请求，这些代码是JS语法的代码。其实发送Ajax请求就是需要编写JS代码！
（4）对于AJAX来说，服务器(WEB Server端)可能会给WEB前端响应回来三种数据：
可能是普通文本，可能是XML字符串，可能是JSON字符串（常用）。
3、AJAX概述
（1）AJAX不能称为一种技术，它是多种技术的综合产物 ；AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
（2）什么是异步，什么是同步？
①假设有t1和t2线程，t1和t2线程并发，就是异步。
②假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
③AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的！
（3）AJAX代码属于WEB前端的JS代码。和后端的java没有关系。
（4）AJAX 应用程序可以使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
（5）AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
（6）AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。
（7）在正式学习Ajax之前，先看懂下面一段代码，学会如何绑定事件！不妨写一个简单的需求：页面上有一个按钮，用户点击按钮之后，执行一段JS代码
第一种方式：在按钮中使用onclick事件
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Test JS
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
function
sayHello(
) {
-
alert(
"hello javascript1")
-
}
-
</script>
-
-
<input type="button" value="hello1" onclick="sayHello()">
-
-
</body>
-
</html>
第二种方式：通过JS代码给按钮绑定事件
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Test JS
</title>
-
</head>
-
<body>
-
<input type="button" value="hello2" id="helloBtn">
-
-
<script type="text/javascript">
-
// 这个function就是一个回调函数，当load事件发生之后，这个回调函数才会执行。
-
// 页面加载完毕之后，load事件发生；给id="helloBtn"的元素绑定鼠标单击事件
-
window.
onload =
function (
) {
-
// 获取id="helloBtn"的对象
-
var helloBtn =
document.
getElementById(
"helloBtn");
-
// 给id="helloBtn"元素绑定click事件
-
// 这个function也是一个回调函数;
-
// 当helloBtn被click的时候，被鼠标单击的时候，这个回调函数会执行。
-
helloBtn.
onclick =
function (
) {
-
// this是发生事件的事件源对象。
-
// 是按钮发生了鼠标单击，那么this代表的就是这个按钮对象。
-
alert(
this.
value);
// hello2
-
}
-
-
}
-
</script>
-
-
</body>
-
</html>
4、XMLHttpRequest对象
（1）XMLHttpRequest对象是AJAX的核心对象，用于发送请求以及接收服务器数据的返回
（2）XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象；直接用即可。
（3）创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();（4）XMLHttpRequest对象的方法
| 方法 | 描述 |
|---|---|
| abort() | 取消当前请求 |
| getAllResponseHeaders() | 返回头部信息 |
| getResponseHeader() | 返回特定的头部信息 |
| open(method, url, async, user, psw) | method：请求类型 GET 或 POST url：文件位置 async：true（异步）或 false（同步） user：可选的用户名称 psw：可选的密码 |
| send() | 将请求发送到服务器，用于 GET 请求 |
| send(string) | 将请求发送到服务器，用于 POST 请求 |
| setRequestHeader() | 向要发送的报头添加标签/值对 |
（5）XMLHttpRequest对象的属性
| 属性 | 描述 |
|---|---|
| onreadystatechange | 定义当 readyState 属性发生变化时被调用的函数 |
| readyState | 保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪 |
| responseText | 以字符串返回响应数据 |
| responseXML | 以 XML 数据返回响应数据 |
| status | 返回请求的状态号200: "OK" 403: "Forbidden" 404: "Not Found" |
| statusText | 返回状态文本（比如 "OK" 或 "Not Found"） |
（6）在AJAX的请求以及AJAX接收服务器的响应，完全都是依靠XMLHttpRequest对象的
XMLHttpRequest对象中的readyState属性记录下了XMLHttpRequest对象的状态。
0：请求未初始化
1：服务器连接已建立
2：请求已收到
3：正在处理请求
4：请求已完成且响应已就绪
当XMLHttpRequest对象的readyState属性的值变成4的时候，表示这个AJAX请求以及响应已经全部完成了！
5、AJAX GET请求
（1）发送AJAX get请求，前端代码：
第一步：创建AJAX核心对象XMLHttpRequest
①直接创建所有浏览器都内置的XMLHttpRequest对象，语法格式如下：
var xhr = new XMLHttpRequest();第二步：注册回调函数
①调用onreadystatechange 属性，定义当 readyState 属性发生变化时被调用的函数。
②这个回调函数函数在XMLHttpRequest对象的readyState状态值发生改变的时候被调用。
😊0 -> 1 被调用一次
😊1 -> 2 被调用一次
😊2 -> 3 被调用一次
😊3 -> 4 被调用一次③当XMLHttpRequest对象的readyState的状态是4的时候，表示响应结束了；响应结束之后，一般会有一个HTTP的状态码。HTTP状态码常见的包括：200表示成功了，404表示资源找不到，500表示服务器内部错误。
④通过XMLHttpRequest对象的responseText属性可以获取到服务器（后端）响应回来的内容。虽然服务器可能响应回来：普通文本、XML、JSON、HTML...都以普通文本的形势获取
⑤innerHTML可以设置元素内部的HTML代码。（innerHTML是javascript中的元素属性，可以将后面的内容当做一段HTML代码解释并执行）
-
xhr.onreadystatechange == function () {
-
// ==4表示响应结束
-
if (xhr.readyState ==
4) {
-
// 响应结束会有以一个状态码
-
if(
this.status ==
200){
-
// 正常结束，把接收服务器响应回来的内容放到div涂层中
-
document.getElementById(
"mydiv").innerHTML =
this.responseText;
-
}
-
}
-
}
第三步：开启通道
①open只是浏览器和服务器建立连接，通道打开，并不会发送请求！
②调用XMLHttpRequest对象的open方法；open方法有几个参数：open(method, url, async, user, psw)
😊method: 请求的方式，可以是GET，也可以是POST，也可以是其它请求方式。
😊url：请求的路径
😊async: 只能是true或者false，true表示此ajax请求是一个异步请求，false表示此ajax请求是一个同步请求。（大部分请求都是true，要求异步）
😊user：用户名
😊pwd: 密码，用户名和密码是进行身份认证的，说明要想访问这个服务器上的资源，可能需要提供一些口令才能访问。需不需要用户名和密码，主要看服务器的态度！
xhr.open("GET", "/ajax/ajaxrequest1", true)第四步：发送请求
①直接调用send方法
xhr.send()前端代码：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>ajax get请求
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
document.
getElementById(
"helloBtn").
onclick =
function (
) {
-
// 第一步：创建AJAX核心对象XMLHttpRequest
-
var xhr =
new
XMLHttpRequest();
-
// 第二步：注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
// console.log(xhr.readyState)
-
// 下面的xhr对象也可以换成this，代表当前按钮对象
-
// ==4表示响应结束
-
if (xhr.
readyState ==
4) {
-
// 响应结束会有以一个状态码
-
if (xhr.
status ==
404){
-
alert(
"对不起，您访问的资源不存在，请检查请求路径")
-
}
else
if(
this.
status ==
500){
-
alert(
"对不起，服务器发生了严重的内部错误，请联系管理员")
-
}
else
if(
this.
status ==
200){
-
// 正常结束
-
// 把接收服务器响应回来的内容放到div涂层中
-
document.
getElementById(
"mydiv").
innerHTML =
this.
responseText;
-
}
-
}
-
}
-
-
// 第三步：开启通道
-
xhr.
open(
"GET",
"/ajax/ajaxrequest1",
true);
-
// 第四步：发送请求
-
xhr.
send();
-
-
}
-
}
-
-
</script>
-
-
<!--给一个按钮，用户点击这个按钮的时候发送ajax请求-->
-
<input type="button" value="ajax" id="helloBtn">
-
<!--给一个div图层，ajax接收了响应的数据之后，在div中进行渲染-->
-
<div id="mydiv">
</div>
-
</body>
-
</html>
（2）发送AJAX get请求，后端代码：
服务器的代码还是和以前完全一样的， 只不过现在浏览器客户端的XMLHttpRequest对象会接收到这个响应信息。
-
package com.bjpowernode.javaweb.ajax;
-
-
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.IOException;
-
import java.io.PrintWriter;
-
-
/**
-
* @Author：朗朗乾坤
-
* @Package：com.bjpowernode.javaweb.ajax
-
* @Project：ajax
-
* @name：AjaxRequest1Servlet
-
* @Date：2022/12/5 17:25
-
*/
-
@WebServlet("/ajaxrequest1")
-
public
class
AjaxRequest1Servlet
extends
HttpServlet {
-
@Override
-
protected
void
doGet
(HttpServletRequest request, HttpServletResponse response)
-
throws ServletException, IOException {
-
-
PrintWriter
out
= response.getWriter();
-
out.print(
"<font color='red'>welcome to study ajax!!!!</font>");
-
}
-
}
运行结果如下：
6、AJAX GET请求提交数据
get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value....
第一种情况：直接写在路径后面，写死
前端代码：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>get 请求发送数据
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
document.
getElementById(
"btn").
onclick =
function (
) {
-
// 1、创建AJAX核心对象
-
var xhr =
new
XMLHttpRequest();
-
// 2、注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
if(xhr.
readyState ==
4){
-
if (xhr.
status ==
200) {
-
document.
getElementById(
"myspan").
innerText =
this.
responseText;
-
}
else {
-
alert(xhr.
status)
-
}
-
}
-
}
-
-
///3、开启通道
-
xhr.
open(
"GET",
"/ajax/ajaxrequest2?username=zhangsan&password=123");
-
// 4、发送请求
-
xhr.
send();
-
}
-
}
-
-
</script>
-
-
-
-
<input type="button" value="发送get请求" id="btn">
-
<span id="myspan">
</span>
-
</body>
-
</html>
后端代码：
-
package com.bjpowernode.javaweb.ajax;
-
-
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.IOException;
-
import java.io.PrintWriter;
-
-
/**
-
* @Author：朗朗乾坤
-
* @Package：com.bjpowernode.javaweb.ajax
-
* @Project：ajax
-
* @name：AjaxRequest1Servlet
-
* @Date：2022/12/5 17:25
-
*/
-
@WebServlet("/ajaxrequest2")
-
public
class
AjaxRequest2Servlet
extends
HttpServlet {
-
@Override
-
protected
void
doGet
(HttpServletRequest request, HttpServletResponse response)
-
throws ServletException, IOException {
-
-
// 设置响应的内容类型以及字符集
-
response.setContentType(
"text/html;charset=UTF-8");
-
// 获取响应流
-
PrintWriter
out
= response.getWriter();
-
// 获取ajax get请求提交的数据
-
String
username
= request.getParameter(
"username");
-
String
password
= request.getParameter(
"password");
-
out.print(
"username="+username+
"，password="+password);
-
-
}
-
}
第二种情况：写两个文本框，动态获取
前端代码进行修改：
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>get 请求发送数据
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
document.
getElementById(
"btn").
onclick =
function (
) {
-
// 1、创建AJAX核心对象
-
var xhr =
new
XMLHttpRequest();
-
// 2、注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
if(xhr.
readyState ==
4){
-
if (xhr.
status ==
200) {
-
document.
getElementById(
"myspan").
innerText =
this.
responseText;
-
}
else {
-
alert(xhr.
status)
-
}
-
}
-
}
-
-
///3、开启通道
-
// 获取用户填写的username和password
-
var username =
document.
getElementById(
"username").
value;
-
var password =
document.
getElementById(
"password").
value;
-
-
xhr.
open(
"GET",
"/ajax/ajaxrequest2?username="+username+
"&password="+password);
-
// 4、发送请求
-
xhr.
send();
-
}
-
}
-
-
</script>
-
-
<!--定义两个文本框-->
-
username
<input type="text" id="username">
<br>
-
password
<input type="text" id="password">
<br>
-
-
<input type="button" value="发送get请求" id="btn">
-
<span id="myspan">
</span>
-
</body>
-
</html>
后端代码代码不变
7、AJAX GET请求的缓存问题
（1）对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存，存在缓存问题。对于现在的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
（2）什么是AJAX GET请求缓存问题？
①在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
②发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
③POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存 。
（3）GET请求缓存的优缺点：
优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
缺点：无法实时获取最新的服务器资源。
（4）浏览器什么时候会走缓存？
①第一：是一个GET请求 。
②第二：请求路径已经被浏览器缓存过了；第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
（5）如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题？
可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的；所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
①可以采用时间戳："url?t=" + new Date().getTime()
②或者可以通过随机数："url?t=" + Math.random()
③也可以两者结合：随机数+时间戳....
8、AJAX POST请求及模拟表单提交数据
AJAX POST请求和GET请求的代码区别在哪里？
（1）前端代码区别：
对于Get请求，是把前端的数据直接放入open方法即可
-
xhr.open(
"GET",
"/ajax/ajaxrequest2?username="+username+
"&password="+password);
-
-
xhr.send();
对于Post请求，是把数据放入send方法，放再这里的数据就是在请求体当中提交的；并且还要设置请求头的内容类型时，必须在open之后，send之前。
-
xhr.open(
"POST",
"/ajax/ajaxrequest3",
true);
-
-
// 设置请求头的内容类型。模拟form表单提交数据，在open之后，send之前。
-
xhr.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded")
-
-
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
-
xhr.send(
"username="+username+
"&password="+password)
（2）后端代码区别：
Get请求时重写doGet方法，Post请求时重写doPost方法；其它都相同！
（3）模拟表单提交数据代码
①前端
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
document.
getElementById(
"btn").
onclick =
function (
) {
-
// 发送AJAX POST请求
-
// 1. 创建AJAX核心对象
-
var xhr =
new
XMLHttpRequest();
-
// 2. 注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
if (
this.
readyState ==
4) {
-
if (
this.
status ==
200) {
-
document.
getElementById(
"mydiv").
innerText =
this.
responseText;
-
}
else{
-
alert(
this.
status);
-
}
-
}
-
}
-
// 3. 开启通道
-
xhr.
open(
"POST",
"/ajax/ajaxrequest3",
true);
-
// 怎么模拟AJAX提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码。)
-
// 设置请求头的内容类型时，必须在open之后。
-
// xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
-
xhr.
setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded")
-
// 4. 发送请求
-
// 放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据。
-
// 使用JS代码获取用户填写的用户名和密码
-
var username =
document.
getElementById(
"username").
value;
-
var password =
document.
getElementById(
"password").
value;
-
xhr.
send(
"username="+username+
"&password="+password);
-
-
}
-
-
}
-
</script>
-
-
-
用户名
<input type="text" id="username">
<br>
-
密码
<input type="text" id="password">
<br>
-
<button id="btn">发送AJAX POST请求
</button>
-
-
<div id="mydiv">
</div>
-
</body>
-
</html>
②后端
-
package com.bjpowernode.javaweb.ajax;
-
-
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.IOException;
-
import java.io.PrintWriter;
-
-
/**
-
* @Author：朗朗乾坤
-
* @Package：com.bjpowernode.javaweb.ajax
-
* @Project：ajax
-
* @name：AjaxRequest1Servlet
-
* @Date：2022/12/5 17:25
-
*/
-
@WebServlet("/ajaxrequest3")
-
public
class
AjaxRequest3Servlet
extends
HttpServlet {
-
@Override
-
protected
void
doPost
(HttpServletRequest request, HttpServletResponse response)
-
throws ServletException, IOException {
-
response.setContentType(
"text/html;charset=UTF-8");
-
PrintWriter
out
= response.getWriter();
-
-
// 获取提交数据
-
String
username
= request.getParameter(
"username");
-
String
password
= request.getParameter(
"password");
-
out.print(
"用户名是：" + username +
"，密码是：" + password);
-
}
-
}
9、经典案例：验证用户名是否可用
使用AJAX POST请求实现用户注册的时候，用户名是否可用。（验证用户名是否可以注册）实现步骤如下：
①在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送AJAX POST请求，提交用户名
②在后端，接收到用户名，连接数据库，根据用户名去表中搜索
③如果用户名已存在，后端响应消息：对不起，用户名已存在（在前端页面以红色字体展示）
④如果用户名不存在，后端响应消息：用户名可以使用（在前端页面以绿色字体展示）
（1）创建数据库表，这里就是用前面学习Servlet创建的t_user表
（2）前端代码
使用onblur表示失去焦点事件，点出去显示提示；
使用onfocus获取焦点事件，点进去清除提示。
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
// 获取焦点,点进去清除提示
-
document.
getElementById(
"username").
onfocus =
function(
){
-
document.
getElementById(
"myspan").
innerHTML =
" ";
-
}
-
-
-
// 失去焦点事件，显示提示
-
document.
getElementById(
"username").
onblur =
function (
) {
-
// 发送AJAX POST请求
-
// 1、创建核心对象
-
var xhr =
new
XMLHttpRequest();
-
// 2、注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
if (
this.
readyState ==
4) {
-
if (
this.
status ==
200) {
-
document.
getElementById(
"myspan").
innerHTML =
this.
responseText;
-
}
else {
-
alert(
this.
status);
-
}
-
}
-
}
-
// 3、开启通道
-
xhr.
open(
"POST",
"/ajax/ajaxrequest4",
true)
-
// 4、发送请求
-
xhr.
setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
-
// 获取表单数据
-
var username =
document.
getElementById(
"username").
value;
-
xhr.
send(
"username="+username);
-
}
-
-
}
-
</script>
-
-
用户名：
<input type="text" id="username">
-
<span id="myspan">
</span>
-
</body>
-
</html>
（3）后端代码
后端代码就需要连接数据库，与前端提交的表单数据进行验证
注：连接数据库需要把驱动(.jar)包放到lib目录下
-
package com.bjpowernode.javaweb.ajax;
-
-
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.IOException;
-
import java.io.PrintWriter;
-
import java.sql.*;
-
-
/**
-
* @Author：朗朗乾坤
-
* @Package：com.bjpowernode.javaweb.ajax
-
* @Project：ajax
-
* @name：AjaxRequest4Servlet
-
* @Date：2022/12/6 14:29
-
*/
-
@WebServlet("/ajaxrequest4")
-
public
class
AjaxRequest4Servlet
extends
HttpServlet {
-
@Override
-
protected
void
doPost
(HttpServletRequest request, HttpServletResponse response)
-
throws ServletException, IOException {
-
// 响应到浏览器
-
response.setContentType(
"text/html;charset=UTF-8");
-
PrintWriter
out
= response.getWriter();
-
// 打一个布尔标记
-
boolean
success
=
false;
-
// 获取前端提交的数据
-
String
username
= request.getParameter(
"username");
-
// 连接数据库
-
Connection
conn
=
null;
-
PreparedStatement
ps
=
null;
-
ResultSet
rs
=
null;
-
try {
-
// 注册驱动
-
Class.forName(
"com.mysql.jdbc.Driver");
-
// 获取连接
-
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC",
"root",
"123");
-
// 获取预编译的数据库操作对象
-
String
sql
=
"select id,username from t_user where username = ?";
-
ps = conn.prepareStatement(sql);
-
ps.setString(
1,username);
-
// 执行sql
-
rs = ps.executeQuery();
-
// 处理查询结果集
-
// 如果能查询到数据说明是存在的
-
if (rs.next()) {
-
success =
true;
-
}
-
}
catch (ClassNotFoundException e) {
-
e.printStackTrace();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
finally {
-
// 释放资源
-
if (rs !=
null) {
-
try {
-
rs.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
if (ps !=
null) {
-
try {
-
ps.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
if (conn !=
null) {
-
try {
-
conn.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
}
-
if (success) {
-
// 用户名已存在，不可用
-
out.print(
"<font color='red'>对不起，用户名已存在</font>");
-
}
else{
-
// 用户名不存在，可以使用
-
out.print(
"<font color='green'>用户名可以使用</font>");
-
}
-
}
-
}
（4）效果展示
输入的名字数据库中有：
输入的名字数据库中没有：
10、经典案例：显示学生列表
用户点击按钮之后，发送AJAX请求，显示学生列表。
在后端java程序中拼接HTML代码，然后将HTML代码直接响应到浏览器客户端。这种方式不好，不应该在java代码中编写HTML代码，能否在java程序中直接向前端响应数据？可以，可以在后端拼接JSON格式的字符串，或者XML格式的字符串，将这个字符串发送给前端，前端解析即可。
（1）创建数据库表，我们还是用上面的t_user表，把password当做学号看即可
（2）前端代码
把最终的结果放入一个表格当中，为了便于操作中间块，给表格加上tbody属性
-
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>发送AJAX请求，显示学生列表
</title>
-
</head>
-
<body>
-
<script type="text/javascript">
-
window.
onload =
function (
) {
-
document.
getElementById(
"btn").
onclick =
function (
) {
-
// 1.创建核心对象
-
var xhr =
new
XMLHttpRequest();
-
// 2.注册回调函数
-
xhr.
onreadystatechange =
function (
) {
-
if (
this.
readyState ==
4) {
-
if (
this.
status ==
200) {
-
document.
getElementById(
"mybody").
innerHTML =
this.
responseText
-
}
else {
-
alert(
this.
status)
-
}
-
}
-
}
-
// 3.开启通道
-
xhr.
open(
"GET",
"/ajax/ajaxrequest5",
true)
-
// 4.发送请求
-
xhr.
send()
-
}
-
}
-
</script>
-
-
<input type="button" value="显示学员列表" id="btn">
-
<table border="1px" width="50%">
-
<tr>
-
<th>序号
</th>
-
<th>姓名
</th>
-
<th>学号
</th>
-
</tr>
-
<!--具体的内容需要连接数据库动态获取，为了便于操作，写一个tbody-->
-
<tbody id="mybody">
-
<!--具体内容响应在这里-->
-
</tbody>
-
-
</table>
-
-
-
</body>
-
</html>
（3）后端代码
后端连接数据库，取出数据；注意：我们使用拼串的方式，把所有数据拼接完毕；再去输出
-
package com.bjpowernode.javaweb.ajax;
-
-
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.IOException;
-
import java.io.PrintWriter;
-
import java.sql.*;
-
-
/**
-
* @Author：朗朗乾坤
-
* @Package：com.bjpowernode.javaweb.ajax
-
* @Project：ajax
-
* @name：AjaxRequest5Servlet
-
* @Date：2022/12/6 17:13
-
*/
-
@WebServlet("/ajaxrequest5")
-
public
class
AjaxRequest5Servlet
extends
HttpServlet {
-
@Override
-
protected
void
doGet
(HttpServletRequest request, HttpServletResponse response)
-
throws ServletException, IOException {
-
// 响应到浏览器
-
response.setContentType(
"text/html;charset=UTF-8");
-
PrintWriter
out
= response.getWriter();
-
// 连接数据库
-
Connection
conn
=
null;
-
PreparedStatement
ps
=
null;
-
ResultSet
rs
=
null;
-
try {
-
// 注册驱动
-
Class.forName(
"com.mysql.jdbc.Driver");
-
// 获取连接
-
conn = DriverManager.getConnection(
"jdbc:mysql://localhost:3306/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC",
"root",
"123");
-
// 获取预编译的数据库操作对象
-
String
sql
=
"select id,username,password from t_user ";
-
ps = conn.prepareStatement(sql);
-
// 执行sql
-
rs = ps.executeQuery();
-
// 处理查询结果集
-
StringBuffer
html
=
new
StringBuffer();
// 使用拼串的方式
-
while (rs.next()) {
-
String
id
= rs.getString(
"id");
-
String
username
= rs.getString(
"username");
-
String
password
= rs.getString(
"password");
-
// 拼串
-
html.append(
"<tr>");
-
html.append(
"<td>"+id+
"</td>");
-
html.append(
"<td>"+username+
"</td>");
-
html.append(
"<td>"+password+
"</td>");
-
html.append(
"</tr>");
-
}
-
// 输出写在外面，全部拼好串在输出
-
out.print(html);
-
}
catch (ClassNotFoundException e) {
-
e.printStackTrace();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
finally {
-
// 释放资源
-
if (rs !=
null) {
-
try {
-
rs.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
if (ps !=
null) {
-
try {
-
ps.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
if (conn !=
null) {
-
try {
-
conn.close();
-
}
catch (SQLException e) {
-
e.printStackTrace();
-
}
-
}
-
}
-
-
}
-
}
（3）效果展示
①未点击按钮
② 点击按钮
（4）存在的问题：在后端代码拼串的过程中书写了前端代码，看着很诡异，不利于维护；那么能不能直接将数据返回，给WEB前端数据就行了。让WEB前端能够拿到数据就行，然后页面展示的功能交给WEB前端来处理。可以，返回数据可以采用JSON的格式（常用），也可以采用XML的格式！所以接下来就开始学习基于JSON和XML的数据交换。
转载：https://blog.csdn.net/m0_61933976/article/details/128183563