AJAX技术

前端小草籽

已于 2022-07-31 23:28:06 修改

阅读量82

点赞数

分类专栏： node.js 文章标签： ajax 前端

于 2022-07-31 22:47:55 首次发布

本文链接：https://blog.csdn.net/weixin_47075145/article/details/126091357

版权

node.js 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文介绍了前端页面刷新的两种主要技术：整页刷新，即跳转到新的HTML页面；以及局部刷新，利用JavaScript进行AJAX请求动态更新DOM。通过示例函数`load1()`，详细解析了AJAX请求的过程，包括创建请求对象、配置请求信息、发送请求及处理响应数据。重点讨论了如何通过AJAX实现页面部分内容的无刷新更新。

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

前端刷新页面有两种技术

1.整页面刷新跳转到一个新的网页 html

2.局部刷新用js 去做网络请求，然后请求得到的数据，DOM操起去动态渲染

        function load1(){
            console.log(666666666);
            //AJAX 技术
            //window.XMLHttpRequest
            //1.创建 AJAX对象
            // 兼容性写法  let xhr = new XMLHttpRequest()|| new ActiveXObject('Micsoft.XMLHTTP');
            let xhr = new XMLHttpRequest();
            
            //2.配置连接信息
            xhr.open('GET','/ajax1',true); //是否异步请求，默认是true

            //3.发送网络请求
            xhr.send()

            //4.等待  如果后端把数据包发过来了 xhr.readyState 就会变为 4
            xhr.onreadystatechange = function(){
                console.log(xhr.readyState);
                //xhr.readyState == 4 数字，代表网络请求到了哪一步了（哪个状态），4代表：网络请求 后端发送了数据包过来
                // xhr.status == 200代表业务上的正确与错误
                if(xhr.readyState == 4 && xhr.status == 200){
                    console.log(xhr.responseText,11);
                }else if(xhr.readyState == 4 && xhr.status == 404){
                     //404 只是代表业务失败了，并不代表网络请求失败
                    console.log(xhr.responseText,22);
                    var obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                }
            }
        }