• AJAX（异步的 JavaScript 和 XML）

    ajax

    异步刷新（局部刷新），可以给后台发请求

    四种发请求的方式：

    • 地址栏（可以发get请求）
    • a标签（可以发get请求）
    • form表单（可以发post请求）
    • Location.href或window.open( )（可以发get请求）

    异步：整个页面不会全部刷新，只有某个局部在刷新

    比如：验证用户名是否存在

    刷新：

    一、原生JS的ajax

    <body>
    <p>
        账号：<input type="text" id="user name"><span id="msg">span>
    p>
    <input type="button" onclick="valid()" value="验证">

    <script>
        // 发送get请求
        function valid(){
            let username = document.querySelector("#username").value;
            let msg = document.querySelector("#msg");
            //当失去焦点时，向后台发请求（使用JS原生的ajax）
            let xhr = new XMLHttpRequest();
            //设置请求的方式和url地址
            //第一个参数是get或者post请求，第二个参数是要把请求发到哪
            
            //发送GET请求
            xhr.open("GET","valid.do?username=" + username);
            //发送
            //括号里的参数是请求体
            xhr.send(null);

            //发送POST请求
            xhr.open("POST","valid.do");
            //POST请求需要设置一下请求头信息
            //Content-type：发送的请求的内容的类型
            //application/x-www-form-urlencoded：文档流
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            //发请求
            xhr.send("username="+username + "&password=123456");
            
            //后台给出响应
            //指定xhr状态变化的处理函数
            xhr.onreadystatechange = function (){
                //如果响应码是4，可以正常接收后台的响应
                if(this.readyState === 4){
                    //通过xhr的responseText可以获取到对应的响应体
                    // console.log(this.responseText);
                    switch (this.responseText){
                        case "1":
                            msg.innerHTML = "用户名可用";
                            break;
                        case "0":
                            msg.innerHTML = "用户名已存在";
                    }
                }
            }
        }
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50

    注意1：使用ajax发送请求，页面是不可以通过后台跳转页面

    如果需要跳页面，也是通过我们前端的JS来跳转，不可以通过serlvet跳转

    注意2：ajax和form表单不能同时使用

    ajax：不跳页面

    form：一定跳走

    请求体：post请求才有请求体

    ajax发起请求，后台给出的响应会回到ajax的响应处理函数

    readyState响应码

    0：xhr被创建成功，但是open方法未调用

    1：open方法被调用，建立了连接

    **2：**send方法被调用，可以获取状态行和响应头

    **3：**可以拿到响应体，响应体加载中

    **4：**响应体下载完成，可以直接使用responseText。代表请求可以正常发送，响应能够正常接收。

    二、JQuery的ajax

    json串

    json串的格式：键值对

    三、Vue的ajax

    axios

    对原生ajax的一个封装

    ES6语法、Promise语法

    axios如果发送get请求：

    ​ 这个请求中如果有参数，那还是一个默认的以文档流的形式发送，和之前的任何一种请求方式没有任何区别。

    axios如果发送post请求：

    ​ 会把post请求的请求体转成json串，然后再发给后台。

    发get请求和post请求的场景

    get请求：后台没有对应的对象来封装，不能有私密数据。

    post请求：后台都是有对象跟着的。

    封装对象的前提：

    json串中的数据的key和对象的属性名要一致。

    set方法的名字要对应上，跟属性名无关。

  • 相关阅读:
    熟悉开机后登陆进入Linux系统和退出系统的过程。
    Linux 基础
    QT编程，QT内存管理、信号与槽、
    解决提示CUDA内存不够，但 GPU显示还有足够的空间
    【2022新版】Java 终极学习路线（文末高清大图）-共计9大模块/6大框架/13个中间件
    某火车订票系统数据库中
    SQL开源替代品，诞生了
    在公司学习日，学习了结构思考力
    第二节——Vue 基本介绍
    多线程可见
  • 原文地址：https://blog.csdn.net/Dshuai7191/article/details/126681178