入门AJAX
- AJAX概述
- AJAX的使用
- XMLHttpRequest
- 创建XMLHttpRequest对象
- XMLHttpRequest对象的常用方法
- XMLHttpRequest对象的常用属性
- 使用AJAX POST请求实现‘判断用户名’案例
- 实现步骤
- 模拟数据库表单
- 前端代码
- 后端程序
- 效果展示
AJAX概述
什么是AJAX？
AJAX全称（Asynchoronous JavaScript And XML）异步
JavaScript和XML；
在没学AJAX之前，向服务器发送请求，响应后在浏览器渲染页面上，即使是只要更新一点局部页面，也会将整个页面刷新；
不使用AJAX的缺点：
- 性能会有所下降；
- 用户的操作会中断，整个页面会刷新（就是说在页面未刷新之前无法进行其他操作，影响用户体验）。
使用AJAX就可以使得不刷新整个页面的情况下，与服务器进行异步通信。
AJAX作用
AJAX就是可以做到局部刷新！！！- 可以减轻服务器负担。
AJAX是一种工具，是以下技术的结合：
- (1)XHTML和CSS的基于标准的表示技术
- (2)DOM进行动态显示和交互
- (3)XML和XSLT进行数据交换和处理
- (4)XMLHttpRequest进行异步数据检索
- (5)Javascript将以上技术融合在一起
AJAX的使用
- 传统的
web前后端交互中，是浏览器直接访问Tomcat服务器中的Servlet来获取数据，Servlet通过转发数据发送给浏览器，然后浏览器渲染。 - 当使用
AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器，XMLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】
注意：使用
AJAX编写的是前端代码，而不是后端代码。
XMLHttpRequest
创建XMLHttpRequest对象
<script type="text/javascript">
window.onload = function(){
var xml = new XMLHttpRequest()
}
</script>
XMLHttpRequest对象的常用方法
open(String method,String url,boolean asynchor,String username,String password)
该方法用于打开连接服务器端的通道，创建
http请求。
method参数是指请求的提交方式（get,post...）；
url参数是指提交的路径；
asynchor参数是指是否选择异步；
username和password参数是可选参数，用于用户认证。
send()
发送
get请求给服务器，这是由于url路径的组件（参数param，查询query，片段frag组件）是在请求行上的，可以直接在open参数url中进行写入。
send(String content)
发送
post请求给服务器。这里会把content放入请求体中发送给服务器。
setRequestHeader(String header,String value)
用于设置消息头。让请求以
form表单的形式呈现，使得可以在后端读取到数据。仅在以post形式提交时才用的上。
代码固定如下：
setRequestHeader("Content-type","application/x-www-form-urlencoded");
注意：设置消息头要在开启通道之后，发送请求之前。
XMLHttpRequest对象的常用属性
readState
该属性是请求状态的显示。一共有五大状态：
0状态：AJAX异步对象已经创建好了，但是还没打开通道。1状态：open方法已被调用，还没发送请求。2状态：send方法已经被调用，但是还没有到达服务器。3状态：请求已经到达服务器，正在响应的过程中。4状态：AJAX异步对象已经接受到了响应的数据。
onreadstatechage
该属性是指请求状态
readState改变了的事件触发器，通常会指定一个回调函数用于执行事件过程。
该事件过程就是接受服务器响应的内容。
responseText
服务器返回的文本内容.
responseXML
服务器返回的兼容DOM的XML内容。
status
服务器返回的状态码（404,405,500,200…)
使用AJAX POST请求实现‘判断用户名’案例
实现步骤
- 在前端：用户名输入用户名之后，失去表单焦点事件
blur发生，然后发送AJAX POST请求，提交用户名；- 在后端：接受到用户名，连接数据库，根据用户名在表单中搜索；
- 判断：
如果用户名已经存在：后端效应消息：sorry，用户名已存在（以红色字体呈现）
如果用户名不存在：可以响应一个勾（这里响应用户名可以使用，以绿色字体呈现）
模拟数据库表单
下面是已创建的t_user表，里面有两个数据：
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX POST请求验证用户名是否可用</title>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var xhr = new XMLHttpRequest()
document.getElementById("username").onblur = function(){
xhr.onreadystatechange = function(){
if(this.readyState==4){
if(this.status==200){
var myspan = document.getElementById("myspan")
myspan.innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("POST","/ajax/ajax3",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
var username = document.getElementById("username").value
xhr.send("username="+username)
}
document.getElementById("username").onfocus = function(){
document.getElementById("myspan").innerText = ""
}
}
</script>
用户名：<input type="text" id="username" name="username"/>
<span id="myspan"></span>
</body>
</html>
后端程序
package javaweb.ajaxstudy;
import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.*;
/**
* 验证用户名是否可用
*/
@WebServlet("/ajax3")
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");
// 下面写JDBC代码
boolean flag = false;//用于判断用户名是否存在
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try{
Class.forName("com.mysql.cj.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/stu","root","myz031119");
String sql = "select * from t_user where name=?";
ps = conn.prepareStatement(sql);
ps.setString(1,username);
rs = ps.executeQuery();
if(rs.next()){
flag = true;
}
}catch(ClassNotFoundException e){
e.printStackTrace();
}catch(SQLException e){
e.printStackTrace();
}finally{
if(rs!=null){
try {
rs.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(ps!=null){
try {
ps.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException e) {
throw new RuntimeException(e);
}
}
}
if(username!="") {
if (flag) {
out.print("<font color='red'>Sorry，用户名已存在</font>");
} else {
out.print("<font color='green'>用户名可以使用</font>");
}
}
}
}
效果展示
