• 原生方式实现Ajax技术


    一:什么是Ajax?

    Ajax:异步的JavaScript和XML,用于完成网页局部刷新功能(修改少量数据只用局部刷新,不用再整个网页重新加载);

      XML的作用:1.是用于数据传输,但现在都在使用JSON

            2.用于存取数据(已经不用),被数据库取代

            3.用于写配置文件,现在还在少量使用,逐渐被注解取代

     

    注意:Ajax请求不能写跳转(1.会报错。2.把跳转的页面当作字符串传回去)

    二:使用原生的方式实现Ajax

    1、创建一个Ajax对象

      从Ajax对象xhr创建开始,它的所有操作都被监听

      xhr本身是有一个状态的概念,这个状态:readyState

      0(为初始化):对象已经建立,但是尚未初始化(尚未调用open)方法

      1(初始化):对象已建立,尚未调用send方法

      2(发送数据):send方法已经调用,但是当前的状态及http头未知

      3(数据发送中):已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误

      4(完成):数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据

      

       //内置了一个类:XMLHttpRequest;兼容IE需要创建ActiveXobject
    
      //在js中,所有变量定义都使用var
    
      var xhr= new XMLHttpRequest();    

    2、准备请求 .open(methodType(请求类型),methodUrl(请求到后端的地址),isSys(是否异步)):请求类型:get/post。是否异步:默认为true

      注意:如果要传参的话,get请求在路径中传参数,post请求在send中传参

    复制代码
    //get请求
    xhr.open("get","/地址?传到后台的参数");
    //post请求
    xhr.open("post","/login");

    //如果是post请求,必须设置请求头的类型,后台才能够接收到前台传过去的相应的数据;当然,get请求不需要设置
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    复制代码

    3、准备监听Ajax相应的状态变化:on(监听),readystate(状态) ,change(匿名方法)

      

    复制代码
    xhr.onreadystatechange = function() {
    
        //xhr.status:请求状态(200表示成功)
    
        //xhr.readyState:获取到响应的值:(当它的状态等于4-->整个请求已经完成,你就可以获取数据了 )
    
        if(xhr.status==200 && xhr.readyState == 4){
    
          //获取相应的值
    
          var result= xhr.responseText;
    
          //放到相应的位置
    
          document.getElementById("写id").imnnerHTML = result;
    
        }
    
      }
    复制代码

    4、发送请求  .sed(varBody)---->varBody:post请求传参要写(key=value&key=value&...);get请求不用写

      

    //get请求
    xhr.sed();
    //post请求
    xhr.send("userName="+userName+"&pwd="+pwd);

    get请求前端完整的html代码:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>原生Ajax测试</title>
    <script type="text/javascript">
        function getTime(){
            //1.创建ajax对象
            var xhr= new XMLHttpRequest();
            //2.准备请求(请求类型,后端地址):此处请求并没有传数据出去,只是发送了一个请求
            xhr.open("get","/gettime");
            //3.监听ajax的状态变化
            xhr.onreadystatechange= funtion(){
                if(xhr.status==200 && xhr.readyState==4){
                    var result = xhr.responseText;
                    //放到相应的位置
                    document.getElementById("time").innerHTML = result;
                }
            }
            //4.发送请求
            xhr.send();
        }
    </script>
    </head>
    <body>
     <button onclick="getTime()">得到时间</button><span id="time"></span>
    </body>
    </html>
    复制代码

     get请求后端的java代码:

    复制代码
    package ajax.servlet;
    
    import java.io.IOException;
    import java.util.Date;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/gettime")//前端请求过来的地址
    public class GetTimeServlet extends HttpServlet {
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //用于前后台交互数据测试
            String date = new Date().toLocaleString();
            //通过响应返回相应的数据
            resp.getWriter().print(date);
        }
    }
    复制代码

    post请求前端完整的html代码:

    复制代码
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript">
        function login(){
            //1.获取到用户名与密码
            var userName = document.getElementById("userName").value;
            var pwd = document.getElementById("pwd").value;
            //2.创建ajax对象
            var xhr= new XMLHttpRequest();
            //3.准备请求(请求类型,后台地址)
            xhr.open("post","/login");
            //如果是post请求,必须设置请求头的类型,后台才能够接收到前台传过去的相应的数据
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //3.监听ajax的状态变化
            xhr.onreadystatechange= function(){
                if(xhr.status==200 && xhr.readyState==4){
                    var result = xhr.responseText;
                    // responseText获取到的都是字符串
                    if(result == "true"){//登录成功
                        window.location.href="https://www.baidu.com";
                    }else{//登录失败
                        document.getElementById("erSpan").innerHTML="用户名或密码错误!";
                    }
                }
            }
            //4.发送请求:post请求必须通过.send()传数据到后台
            xhr.send("userName="+userName+"&pwd="+pwd);
        }
    </script>
    </head>
    <body>
        <span id="erSpan"></span>
        <form action="/login" method="post">
            用户名:<input type="text" name="userName" id="userName" /> <br />
            密码<input type="text" name="pwd" id="pwd" /><br />
            <input type="button" value="ajax提交" onclick="login()" />
        </form>
    </body>
    </html>
    复制代码

    post请求后端的java代码:

    复制代码
    package ajax.servlet;
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/login")
    public class LoginServlet extends HttpServlet{
        @Override
        protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            //字符集编码,必须写,不然中文会乱码
            req.setCharacterEncoding("utf-8");
            resp.setContentType("utf-8");
            
            //接收到前台传过来的值
            String userName = req.getParameter("userName");
            String pwd = req.getParameter("pwd");
            
            //System.out.println(userName+":"+pwd);
            //测试
            if("流星".equals(userName) && "123".equals(pwd)){
                //向前端返回Boolean类型的true,但前端接收到的是String类型
                resp.getWriter().print(true);
            }else{
                resp.getWriter().print(false);
            }
        }
    }
  • 相关阅读:
    本地时间与UTC(世界协调时间)的转换
    windows共享在linux下挂载
    日期中带的 T 是什么意思
    FCBU喜马拉雅音频批量下载器
    C#使用[CefSharp]Chrome浏览器(1)安装
    云锵投资 2022 年 2 月简报
    云锵投资 2022 年 1 月简报
    MySQL分组(group by)取最大值、最小值
    tabel布局中给tr加border边框
    ant 使用指南
  • 原文地址:https://www.cnblogs.com/wanghj-15/p/10969495.html
Copyright © 2020-2023  润新知