js原生ajax五步走

ajax给web领域带来了无穷无尽的活力，而我的博客却只有一个jquery的说明，这怎么能行呢？不符合我的气质！

ajax其实不复杂，一种技术的出现，是为了大家更方便的实现功能的，而不是难倒开发者。

总结一下：①创建一个XMLHTTPRequest对象  ②利用open方法连接服务器（所谓的接口）  ③创建请求读取完成的事件，执行设计的功能   ④利用send方法向服务器发送请求  ⑤操作dom 渲染页面

        ajax
        // 1.创建对象
        let xmr=new XMLHttpRequest();
        // 2.连接服务器
        xmr.open();//5个参数  1 请求类型 2 请求路径 3 同步、异步 4 5 用户名 密码
        // 3.创建请求读取完成读取事件（可以放在第二步）
        xmr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xmr.response)
                // 5.操作dom元素 渲染页面
            }
        }
        // 4.给服务器发送请求
        xmr.send();//有参数写（post） 无参数不写（get）
  
       

实例：

           //读取data.txt文件的数据  注意 vscode直接用浏览器打开的话存在了跨域问题，我查过，说是环境的缺陷，
           //webstorm完美运行，或者利用Live Server插件，在服务器执行解决，小伙伴们有此问题也可以私聊啊哈哈
            let xmr=new XMLHttpRequest();
            xmr.open('get','./data.txt');
            xmr.onreadystatechange=function(){
                if(xmr.readyState==4&&xmr.status==200){
                    console.log(xmr.response);
                }
            }
            xmr.send();

结果：