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

最新推荐文章于 2024-07-17 21:25:32 发布

我爱布朗熊

最新推荐文章于 2024-07-17 21:25:32 发布

阅读量512

点赞数

分类专栏： # Ajax 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126891307

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

AJAX发送POST请求

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

一、readyState状态值的理解

二、第一个AJAX请求详解

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缓存问题

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

//时间戳
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> ");
        }

    }
}