AJAX（异步的 JavaScript 和 XML）

最新推荐文章于 2024-08-12 22:28:07 发布

激进的黄瓜

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量356

点赞数 2

分类专栏： Java 新手文章标签： javascript ajax xml

本文链接：https://blog.csdn.net/Dshuai7191/article/details/126681178

版权

新手同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

Java

34 篇文章 0 订阅

订阅专栏

本文深入探讨了AJAX技术，包括原生JavaScript实现，jQuery的应用，以及在Vue框架中的使用。重点讲解了AJAX的readyState响应码，强调了不同HTTP方法的用途，以及get和post请求的适用场景。文中还提到了JSON数据格式在AJAX请求中的应用，并介绍了axios库作为现代异步请求的解决方案。

摘要由CSDN通过智能技术生成

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>