五、将响应体内容显示在前端div中

默九思

已于 2023-07-09 20:32:22 修改

阅读量180

点赞数 1

分类专栏： AJAX学习文章标签：前端

于 2023-07-09 10:49:06 首次发布

本文链接：https://blog.csdn.net/qq_43733614/article/details/131615881

版权

AJAX学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

继上

在前端1-GET.html文件中，添加如下代码

    <!--点击按钮发送请求，将响应体显示在div中-->
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //按钮绑定事件
        btn.onclick = function(){
            //1.创建对象   xhr是Ajax
            const xhr = new XMLHttpRequest();
            //2.初始化  设置请求方法和url；可以使用？添加请求参数，&连接多个参数
            xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定    处理服务端返回结果
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //判断响应状态码是否成功，200~299都表示成功
                    if(xhr.status >= 200 && xhr.status <300){
                        //设置div文本内容
                        result.innerHTML = xhr.response;
                        
                    }
                }
            }
        }
    </script>

F5运行当前html文件，点击发送请求：所有代码如下：

<!--前端 浏览器准备-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Get 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border:solid 1px #90D;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id = "result"></div>
    <!--点击按钮发送请求，将响应体显示在div中-->
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //按钮绑定事件
        btn.onclick = function(){
            //1.创建对象   xhr是Ajax
            const xhr = new XMLHttpRequest();
            //2.初始化  设置请求方法和url; 使用?添加请求参数，&连接多条参数
            xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定    处理服务端返回结果
            //on    当...什么时候
            //readystate  是xhr对象中的属性，表示状态
            //0 未初始化，1 open方法调用完毕，2 send方法调用完毕，3 服务端返回部分结果，4 服务端返回全部结果
            //change    改变
            
            //该方法会在状态改变时别调用，一共调用4次
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //判断响应状态码200，404，403，401，500
                    //200~299都表示成功
                    if(xhr.status >= 200 && xhr.status <300){
                        //设置div文本内容
                        result.innerHTML = xhr.response;
                        //处理结果 包括 行，头，空行，体
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符
                        // console.log(xhr.getAllResponseHeaders());//所有响应头
                        // console.log(xhr.response);//响应体
                    }
                }
            }
        }
    </script>
</body>
</html>

个人学习记录，欢迎指点讨论