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

    目录

    一、readyState状态值的理解

    二、第一个AJAX请求详解

    发送AJAX四步

    发送Get请求

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

    AJAX发送POST请求

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

    一、readyState状态值的理解

    二、第一个AJAX请求详解

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

    发送AJAX四步

    1.第一步：创建AJAX核心对象XMLHttpRequest
           var xhr = new XMLHttpRequest();
    2.第二步：注册回调函数   readystate状态码一改变，这里就执行回调函数（重要）

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

    1.             xhr.onreadystatechange = function (){
    2.                 //这里的回调函数会被调用多次 0-1 1-2 2-3 3-4 一共调用四次
    3.                 //console.log(xhr.readyState)
    4.               //也可以写成xhr.readyState
    5.               if(this.readyState ==4){
    6.                 // console.log("响应结束了")
    7.                 //下面是http状态码
    8.                 if(this.status==4){
    9.                   alert("对不起，您访问的资源不存在，请检查请求路径")
    10.                 }else if(this.status ==500){
    11.                   alert("对不起，服务器发生了严重的内部错误，请联系管理员")
    12.                 }else if(this.status ==200){
    13.                   alert("响应成功，完美")
    14.                 //  通过XMLHttpRequest对象获取响应的信息，通过对象的responseText属性获取相应信息（以字符串的形式
    15.                 //  alert( this.responseText)
    16.                   document.getElementById("mydiv").innerText=this.responseText
    17.                 }
    18.               }
    19.             }
    3.开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
    1.             //    open(method,url,async,user,psw)
    2.             //    method规定请求get或post   asynv：true（异步—）false（同步）
    3.             //    user：可选的用户名称       psw：可选的密码
    4.             //    用户名和密码是进行身份认证的，说明想要访问这个服务器上的资源，可能需要提供一些口令才能访问，需不需要用户名和密码，主要看服务器
    5.             xhr.open("GET","/ajax/ajaxrequest1",true)
    6.  
    7. //ajax是项目名
     4.发送请求
    xhr.send();

      后端代码

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

    发送Get请求

    1.             // 3.开启通道(open只是浏览器和服务器建立连接，通道打开，并不会发送请求）
    2.             //获取用户填写的usercode和username
    3.             var usercode = document.getElementById("usercode").value
    4.             var username = document.getElementById("username").value
    5.  
    6.             xhr.open("GET","/ajax/ajaxrequest2?usercode="+usercode+"&username="+username,true)
    1.     @Override
    2.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    3.         response.setContentType("text/html;charset=UTF-8");
    4.         //Servlet向浏览器响应一段数据
    5.         PrintWriter out = response.getWriter();
    6.         String usercode=request.getParameter("usercode");
    7.         String username=request.getParameter("username");
    8.         out.print("usercode="+usercode+"username="+username);
    9.     }

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

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

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

    AJAX发送POST请求

     xhr.open("POST","/ajax/ajaxrequest3",true)
    1.             //    4.发送请求
    2.             //模拟form变淡提交的关键代码（这段代码一定要在open之后提交）
    3.             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    4.  
    5.             //    放到send（）这个函数小括号当中的数据，会自动在请求体当中提交数据
    6.             //    使用js代码获取
    7.             var username = document.getElementById("username").value
    8.             var password = document.getElementById("password").value
    9.             xhr.send("username="+username+"&password="+password)
    1.     @Override
    2.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    3.         response.setContentType("text/html;charset=UTF-8");
    4.         //Servlet向浏览器响应一段数据
    5.         PrintWriter out = response.getWriter();
    6.         //获取提交的数据
    7.         String username = request.getParameter("username");
    8.         String password = request.getParameter("password");
    9.  
    10.         out.print("username="+username+"password="+password);
    11.     }

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>POST验证title>
    6. head>
    7. <body>
    8. 用户名：<input type="text" id="uname">
    9. <span id="tipMsg">span>
    10.  
    11.  
    12. <script>
    13.     window.onload = function () {
    14.         //失去焦点函数
    15.         document.getElementById("uname").onblur = function () {
    16.  
    17.             var xhr = new XMLHttpRequest();
    18.  
    19.             xhr.onreadystatechange = function () {
    20.                 if(this.readyState==4){
    21.                     if(this.status ==200){
    22.                         document.getElementById("tipMsg").innerHTML = this.responseText
    23.                     }else{
    24.                         alert(this.status)
    25.                     }
    26.                 }
    27.             }
    28.  
    29.             xhr.open("POST", "/ajax/ajaxrequest5", true)
    30.  
    31.             xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
    32.             var uname = document.getElementById("uname").value
    33.             // var password = document.getElementById("password")
    34.             xhr.send("uname="+uname)
    35.         }
    36.     }
    37. script>
    38. body>
    39. html>

    1. @WebServlet("/ajaxrequest5")
    2. public class RequestServlet5  extends HttpServlet {
    3.     @Override
    4.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    5. //        标记
    6.         boolean flag = false;
    7.  
    8.         //       获取用户名
    9.         String uname = request.getParameter("uname");
    10.  
    11. //        连接数据库
    12.         Connection conn = null;
    13.         PreparedStatement ps = null;
    14.         ResultSet rs = null;
    15.         try {
    16. //            1.注册驱动
    17.             Class.forName("com.mysql.cj.jdbc.Driver");
    18. //            2.获取连接
    19.             conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/ajax?serverTimezone=GMT","root","admin");
    20. //            3.获取预编译的数据库操作对象
    21.             String sql = "select id,name from t_user where name=?";
    22.             ps=conn.prepareStatement(sql);
    23.             ps.setString(1,uname);
    24. //            4.执行SQL语句
    25.             rs = ps.executeQuery();
    26. //            5.处理结果集
    27.             if(rs.next()){
    28.  
    29. //                用户名已经存在
    30.                 flag=true;
    31.             }else {
    32.                 flag=false;
    33.             }
    34.         } catch (ClassNotFoundException e) {
    35.             e.printStackTrace();
    36.         } catch (SQLException e) {
    37.             e.printStackTrace();
    38.         } finally {
    39. //            6.释放资源
    40.             if(rs!=null){
    41.                 try {
    42.                     rs.close();
    43.                 } catch (SQLException e) {
    44.                     e.printStackTrace();
    45.                 }
    46.             }
    47.             if(ps!=null){
    48.                 try {
    49.                     ps.close();
    50.                 } catch (SQLException e) {
    51.                     e.printStackTrace();
    52.                 }
    53.             }
    54.             if(conn!=null){
    55.                 try {
    56.                     conn.close();
    57.                 } catch (SQLException e) {
    58.                     e.printStackTrace();
    59.                 }
    60.             }
    61.         }
    62.  
    63. //        相应结果到浏览器
    64.         response.setContentType("text/html;charset=UTF-8");
    65.         PrintWriter out = response.getWriter();
    66.         if(flag){
    67. //            用户名存在
    68.             out.print("对不起，用户名已存在 ");
    69.         }else{
    70. //            用户名不存在
    71.             out.print("用户名可以使用  ");
    72.         }
    73.  
    74.     }
    75. }

  • 相关阅读:
    render-props和高阶组件
    FSC商标门户网站重置密码操作指南
    【Java从入门到精通】Java异常处理
    ETL数据转换方式有哪些
    JavaSE反射前置之Properties类
    Pyside6 QTextEdit
    1.8 Elasticsearch建立IK中文分词器
    2023-09-14 mysql-Item_subselect-分析
    tcp网络编程——2
    如何将镜像体积海量缩减
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126891307