AJAX请求问题

2022-02-28 20:32:19 阅读：175 来源： 互联网

标签：function axios 请求问题 xhr AJAX btns

AJAX

页面不刷新，即可获得数据更新。
登录检测。懒加载，按需加载。提高网页的加载速度。
优点
无需刷新页面就可以与服务器端进行通信。
允许根据用户事件来更新部分页面内容。
缺点
没有浏览历史，不能后退。
存在跨域问题，（同源）
SEO（爬虫）不友好，爬虫爬不到。因为网页节点中没有。

请求报文

格式与参数

行

请求类型 get post
URL
http协议版本

头

名字：值
host:atguigu.com

空行

固定的，必须有

体

请求类型为get时，可以为空，
请求类型为post时，不可以为空。

响应报文

行

协议版本
响应状态码
状态字符串
http/1.1 200 ok

头

对响应的一些描述，比如长度，格式等

空行

一定要有

体

返回请求的结果

AJAX基本步骤

第一步

//1.创建对象
            const xhr = new XMLHttpRequest();

第二步

//2.初始化  设置请求方法和url
            //传递参数的话，就在url后面用？分隔&连接
            xhr.open('GET', 'http://127.0.0.1:8000/server');

第三步

 //3.发送
            xhr.send();

第四步

//4.事件绑定 处理服务器端返回的结果
            //on 表示当...时候
            //readystate  是xhr  对象中的属性，表示状态  0 1 2 3 4
            //3表示服务器返回了部分结果，4表示返回了全部结果
            //change 改变
            xhr.onreadystatechange = function() {
                //服务端返回了所有结果
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 2开头的都是成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                        console.log(xhr.status); //状态码
                        console.log(xhr.statusText); //状态字符串
                        console.log(xhr.getAllResponseHeaders()); //所有响应头
                        console.log(xhr.response); //响应体
                    }
                }
            }
        })

超时与网络异常处理

 //设置AJAX步骤
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //超时设置2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function() {
                    alert("网络异常，请稍后重试")
                }
                //网络异常回调
            xhr.onerror = function() {
                    alert("你的网络似乎出现了一些问题！")
                }
                //2.初始化
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            //3.发送
            xhr.send()
                //4.处理服务端返回的结果
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status <= 400) {
                        result.innerHTML = xhr.response
                    }
                }
            }


        })

重复请求问题

    <button>发送请求</button>
    <button>取消请求</button>

    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button')
        let xhr = null;
        //标识变量
        let isSending = false; //是否正在发送请求
        btns[0].onclick = function() {
            //判断标识符变量
            if (isSending) xhr.abort() //如果正在发送请求，则取消该请求，创建一个新的
            xhr = new XMLHttpRequest()
                //修改标识符变量,证明有一个请求正在发送
            isSending = true
            xhr.open('GET', 'http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    //请求完成后，修改标识符变量的值
                    isSending = false
                }
            }
        }

        btns[1].onclick = function() {
            //调用abort方法来取消请求
            xhr.abort()
        }

AJAX中的axios

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送 AJAX请求</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        const btns = document.querySelectorAll('button')
            //配置baseURl
        axios.defaults.baseURL = 'http://127.0.0.1:8000';
        //发送GET请求
        btns[0].onclick = function() {

            //GET请去
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'shagnguigu',
                    age: 10

                }
            }).then(value => {
                console.log(value);
            })
        }

        //发送POST请求
        btns[1].onclick = function() {
            axios.post('/axios-server',
                //配置请求体信息
                {
                    username: 'admin',
                    password: 'admin'
                },
                //先配置请求体信息，在配置其他参数信息
                {
                    //配置URL参数
                    params: {
                        id: 100,
                        vip: 9
                    },
                    //配置请求头信息
                    headers: {
                        height: 180,
                        weight: 180
                    },

                })
        }

        //利用axios函数发送请求
        btns[2].onclick = function() {
            axios({
                //请求方法
                methods: 'POST',
                //url
                url: '/axios-server',
                //配置URL参数
                params: {
                    vip: 200,
                    level: 30
                },
                //头信息
                headers: {
                    a: 200,
                    b: 300
                },
                //配置请求体信息
                data: {
                    username: 'admine',
                    password: 'admine'
                }
                //处理返回结果
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

标签：function,axios,请求,问题,xhr,AJAX,btns
来源： https://blog.csdn.net/Da_ci_hua/article/details/123191063

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9