js原生ajax五步走

向右看齐 2023-07-10 08:51 115阅读 0赞

> 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();

结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200301185811182.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lDWV9fXw==,size_16,color_FFFFFF,t_70