AJAX---发送POST请求、Get请求、请求四步、解决低版本的缓存问题

川长思鸟来 2024-04-06 09:39 3阅读 0赞

**目录**

一、readyState状态值的理解

二、第一个AJAX请求详解

发送AJAX四步

发送Get请求

解决低版本IE浏览器的AJAX的Get缓存问题

AJAX发送POST请求

AJAX案例：POST请求验证用户名是否可用

--------------------

##  ##

## 一、readyState状态值的理解 ##

![68d88a3859f244ec8ed225122f20c25a.png][]

## 二、第一个AJAX请求详解 ##

![162cc93ae708457094eb32deb44feef9.png][]

![4666f778a4374199abf72470fdeb0dba.png][]

HTTP常见状态码： 200成功 404资源找不到 500表示服务器内部错误

### **发送AJAX四步** ###

1.第一步：创建AJAX核心对象XMLHttpRequest

var xhr = new XMLHttpRequest();

2.第二步：注册回调函数   readystate状态码一改变，这里就执行回调函数（重要）

当状态码等于4的时候，我们要做一些操作了

xhr.onreadystatechange = function (){
                    //这里的回调函数会被调用多次 0-1 1-2 2-3 3-4 一共调用四次
                    //console.log(xhr.readyState)
                  //也可以写成xhr.readyState
                  if(this.readyState ==4){
                    // console.log("响应结束了")
                    //下面是http状态码
                    if(this.status==4){
                      alert("对不起，您访问的资源不存在，请检查请求路径")
                    }else if(this.status ==500){
                      alert("对不起，服务器发生了严重的内部错误，请联系管理员")
                    }else if(this.status ==200){
                      alert("响应成功，完美")
                    //  通过XMLHttpRequest对象获取响应的信息，通过对象的responseText属性获取相应信息（以字符串的形式
                    //  alert( this.responseText)
                      document.getElementById("mydiv").innerText=this.responseText
                    }
                  }
                }

3.开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求）

//    open(method,url,async,user,psw)
                //    method规定请求get或post   asynv：true（异步—）false（同步）
                //    user：可选的用户名称       psw：可选的密码
                //    用户名和密码是进行身份认证的，说明想要访问这个服务器上的资源，可能需要提供一些口令才能访问，需不需要用户名和密码，主要看服务器
                xhr.open("GET","/ajax/ajaxrequest1",true)
    
    //ajax是项目名

4.发送请求

xhr.send();

后端代码

@WebServlet("/ajaxrequest1")
    public class RequestServlet extends HttpServlet {
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            //Servlet向浏览器响应一段数据
            PrintWriter out = response.getWriter();
            //out对象向浏览器输出信息
            //这个对象打印输出以后，前端的XMLHttpRequest对象就会接收到
            //out后面可以是普通文本 JSON HTML XML
            out.print("welcome to study ajax!!!");
        }
    }

## 发送Get请求 ##

// 3.开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
                //获取用户填写的usercode和username
                var usercode = document.getElementById("usercode").value
                var username = document.getElementById("username").value
    
                xhr.open("GET","/ajax/ajaxrequest2?usercode="+usercode+"&username="+username,true)

@Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            //Servlet向浏览器响应一段数据
            PrintWriter out = response.getWriter();
            String usercode=request.getParameter("usercode");
            String username=request.getParameter("username");
            out.print("usercode="+usercode+"username="+username);
        }

## 解决低版本IE浏览器的AJAX的Get缓存问题 ##

![bb05bc4736a04fa28ee80addb341f599.png][]

下面我们是添加的一个时间戳，当然也可以添加一个随机数

//时间戳
    xhr.open("GET","/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username,true)

## AJAX发送POST请求 ##

xhr.open("POST","/ajax/ajaxrequest3",true)

//    4.发送请求
                //模拟form变淡提交的关键代码（这段代码一定要在open之后提交）
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    
                //    放到send（）这个函数小括号当中的数据，会自动在请求体当中提交数据
                //    使用js代码获取
                var username = document.getElementById("username").value
                var password = document.getElementById("password").value
                xhr.send("username="+username+"&password="+password)

@Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
            response.setContentType("text/html;charset=UTF-8");
            //Servlet向浏览器响应一段数据
            PrintWriter out = response.getWriter();
            //获取提交的数据
            String username = request.getParameter("username");
            String password = request.getParameter("password");
    
            out.print("username="+username+"password="+password);
        }

## AJAX案例：POST请求验证用户名是否可用 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>POST验证</title>
    </head>
    <body>
    用户名：<input type="text" id="uname">
    <span id="tipMsg"></span>
    
    
    <script>
        window.onload = function () {
            //失去焦点函数
            document.getElementById("uname").onblur = function () {
    
                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/ajaxrequest5", true)
    
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
                var uname = document.getElementById("uname").value
                // var password = document.getElementById("password")
                xhr.send("uname="+uname)
            }
        }
    </script>
    </body>
    </html>

@WebServlet("/ajaxrequest5")
    public class RequestServlet5  extends HttpServlet {
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    //        标记
            boolean flag = false;
    
            //       获取用户名
            String uname = request.getParameter("uname");
    
    //        连接数据库
            Connection conn = null;
            PreparedStatement ps = null;
            ResultSet rs = null;
            try {
    //            1.注册驱动
                Class.forName("com.mysql.cj.jdbc.Driver");
    //            2.获取连接
                conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajax?serverTimezone=GMT","root","admin");
    //            3.获取预编译的数据库操作对象
                String sql = "select id,name from t_user where name=?";
                ps=conn.prepareStatement(sql);
                ps.setString(1,uname);
    //            4.执行SQL语句
                rs = ps.executeQuery();
    //            5.处理结果集
                if(rs.next()){
    
    //                用户名已经存在
                    flag=true;
                }else {
                    flag=false;
                }
            } catch (ClassNotFoundException e) {
                e.printStackTrace();
            } catch (SQLException 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("<font color='red'>对不起，用户名已存在</font> ");
            }else{
    //            用户名不存在
                out.print("<font color='green'>用户名可以使用 </font> ");
            }
    
        }
    }

![06996f06e82b46f799d2ec73fde82e15.png][]

##  ##

[68d88a3859f244ec8ed225122f20c25a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0c1b92411b57441992e5919ed18bfa87.png
[162cc93ae708457094eb32deb44feef9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bcc56e929ee14e20b0d5059cdfabebab.png
[4666f778a4374199abf72470fdeb0dba.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/a5cb9d6a2b6f45c7876196e8d42ae06b.png
[bb05bc4736a04fa28ee80addb341f599.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/97339a525eda4e0581038a93f6d94767.png
[06996f06e82b46f799d2ec73fde82e15.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/e6e55e9cee114a998ae733cc12ece452.png