1. ajax get缓存问题 9
对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
2. 什么是AJAX GET请求缓存问题呢？ 9
- 在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
- 发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
- POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。
2.1 GET请求缓存的优缺点：9
- 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
- 缺点：无法实时获取最新的服务器资源。
2.2 浏览器什么时候会走缓存？9
- 第一：是一个GET请求
- 第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
2.3 如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？ 9
- 可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
- 可以采用时间戳："url?t=" + new Date().getTime()
- 或者可以通过随机数："url?t=" + Math.random()
- 也可以随机数+时间戳....
代码在E:\java学习\Ajax\course\course3\web
ajax2.html
<!--熟悉发送ajax get请求的写法 7-->
<!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("btn").onclick = function (){
//创建AJAX核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if(this.readyState==4){//只有等于4是表示结束了
if(this.status == 200){//只有等于200表示正常
// 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
// 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来
// ：普通文本、XML、JSON、HTML...）
// innerHTML属性是javascript中的语法，和ajax的XMLHttpRequest对象无关。
// innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做
// 一段HTML代码解释并执行）
//document.getElementById("myspan").innerHTML = this.responseText
document.getElementById("mydiv").innerHTML = this.responseText
// innerText也不是AJAX中的，是javascript中的元素属性，和XMLHttpRequest无关。
// innerText也是设置元素中的内容，但是即使后面是一段HTML代码，也是将其看做一个普通字符串设置进去。
//document.getElementById("myspan").innerText = this.responseText
}else {//表示不正常
alert(this.status)//打印出不正常的状态码
}
}
}
//开启通道
//ajax get请求提交的数据 8
//获取用户填写usercode和username
var usercode = document.getElementById("usercode").value
var username = document.getElementById("username").value
//解决AJAX GET请求的缓存问题 9
//方法一给一个时间戳
//alert(new Date().getTime())
//xhr.open("GET","/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username,true)
//方法二使用随机数
xhr.open("GET","/ajax/ajaxrequest2?t="+Math.random()+"&usercode="+usercode+"&username="+username,true)
//发送请求
xhr.send()
}
}
</script>
<!--ajax get请求提交的数据 8-->
usercode<input type="text" id="usercode"><br>
username<input type="text" id="username"><br>
<button id="btn">发送ajax get请求</button>
<span id="myspan"></span>
<div id="mydiv"></div> <!--div是独自占一行-->
</body>
</html>
com.bjpowerndoe.ajax.servlet
AjaxRequest2Servlet
package com.bjpowerndoe.ajax.servlet;
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;
//熟悉发送ajax get请求的写法 7
@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();
//响应
//out.print("用户名已存在");
//获取ajax get请求提交的数据 8
String usercode = request.getParameter("usercode");
String username = request.getParameter("username");
out.print("usercode="+usercode+",username="+username);
}
}3. AJAX POST请求 10
代码在E:\java学习\Ajax\course\course3\web
ajax4.html
<!--发送ajax post请求 10-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax post请求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("mybtn").onclick = function (){
//发送ajax post请求
//创建ajax核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if(this.status==200){
document.getElementById("mydiv").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
//开启通道
xhr.open("POST","/ajax/ajaxrequest",true)
//发送请求
xhr.send()
}
}
</script>
<button id="mybtn">发送ajax post请求</button>
<div id="mydiv"></div>
</body>
</html>
com.bjpowerndoe.ajax.servlet
AjaxRequest3Servlet
package com.bjpowerndoe.ajax.servlet;
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;
//发送ajax post请求 10
@WebServlet("/ajaxrequest")
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();
out.print("用户名已存在!!!");
}
}- AJAX POST请求和GET请求的代码区别在哪里？就是前端代码有区别。后端代码没有区别。
3.1 发送AJAX POST请求提交数据 11
// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)代码在E:\java学习\Ajax\course\course3\web
ajax4.html
<!--发送ajax post请求 10-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发送ajax post请求</title>
</head>
<body>
<script type="text/javascript">
window.onload = function (){
document.getElementById("mybtn").onclick = function (){
//发送ajax post请求
//创建ajax核心对象
var xhr = new XMLHttpRequest();
//注册回调函数
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if(this.status==200){
document.getElementById("mydiv").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
//开启通道
xhr.open("POST","/ajax/ajaxrequest",true)
//发送请求
// 怎么模拟AJAX提交form表单呢？设置请求头的内容类型(这行代码非常关键，是模拟form表单提交的关键代码。)
// 设置请求头的内容类型时，必须在open之后。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
// 放到send()这个函数的小括号当中的数据，会自动在请求体当中提交数据。 11
// 使用JS代码获取用户填写的用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//xhr.send("注意格式：放在这里的数据就是在请求体当中提交的，格式不能随便来，
// 还是需要遵循HTTP的协议：name=value&name=value&name=value")
xhr.send("username="+username+"&password="+password)
}
}
</script>
<!--ajax post请求提交的数据 11-->
用户名<input type="text" id="username"><br>
密码<input type="password" id="password"><br>
<button id="mybtn">发送ajax post请求</button>
<div id="mydiv"></div>
</body>
</html>
com.bjpowerndoe.ajax.servlet
AjaxRequest3Servlet
package com.bjpowerndoe.ajax.servlet;
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;
//发送ajax post请求 10
@WebServlet("/ajaxrequest")
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();
//out.print("用户名已存在!!!");
//获取其ajax post请求提交的数据 11
String username = request.getParameter("username");
String password = request.getParameter("password");
out.print("username="+username+",password="+password);
}
}4. 实现一个案例：12
使用AJAX POST请求实现用户注册的时候，用户名是否可用。（验证用户名是否可以注册）实现步骤如下：
- 在前端，用户输入用户名之后，失去焦点事件blur发生，然后发送AJAX POST请求，提交用户名
- 在后端，接收到用户名，连接数据库，根据用户名去表中搜索
- 如果用户名已存在
- 后端响应消息：对不起，用户名已存在（在前端页面以红色字体展示）
- 如果用户名不存在
- 后端响应消息：用户名可以使用（在前端页面以绿色字体展示）
代码在com.bjpowerndoe.ajax.servlet
AjaxRequest4Servlet
package com.bjpowerndoe.ajax.servlet;
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.*;
//ajax post 请求验证用户名是否可用 12
@WebServlet("/ajaxrequest4")
public class AjaxRequest4Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取用户名
String uname = request.getParameter("uname");
//打布尔标记（一种编程模型）
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/bjpowernode?useUnicode=true&characterEncoding=utf8&serverTimezone=UTC","root","lzl");
//获取预编译数据库操作对象
String sql = "select id,username from t_user where username = ?";
ps = conn.prepareStatement(sql);
ps.setString(1,uname);
//执行SQL语句
rs = ps.executeQuery();
//处理结果集
if(rs.next()){
//用户名已存在
flag = true;
}
} catch (Exception e) {
e.printStackTrace();
}finally {
// 6.释放资源
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();
}
}
}
//响应结果到浏览器
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
if(flag){
out.print("对不起，用户名已存在");
}else{
//用户名不存在，可用
out.print("用户名可用");
}
}
}ajax5.html
<!--ajax post 请求验证用户名是否可用 12-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax post 请求验证用户名是否可用</title>
</head>
<body>
<script type="text/javascript">
//给文本框绑定失去焦点事件
window.onload = function (){
//获得焦点
document.getElementById("username").onfocus = function (){
document.getElementById("tipMsg").innerHTML = ""
}
document.getElementById("username").onblur = function (){
//console.log("正在发送ajax post请求")
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (){
if (this.readyState==4) {
if(this.status==200){
document.getElementById("tipMsg").innerHTML = this.responseText
}else{
alert(this.status)
}
}
}
xhr.open("POST","/ajax/ajaxrequest4",true)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
//获取表单数据
var username = document.getElementById("username").value
xhr.send("uname="+username)
}
}
</script>
用户名<input type="text" id="username" >
<span id="tipMsg"></span>
</body>
</html>
