详细解析Ajax的使用之向服务器发送GET请求-阿里云开发者社区

详细解析Ajax的使用之向服务器发送GET请求

2023-01-11 106

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云解析 DNS，旗舰版 1个月

全局流量管理 GTM，标准版 1个月

公共DNS（含HTTPDNS解析），每月1000万次HTTP解析

简介： 详细解析Ajax的使用之向服务器发送GET请求前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。HTML代码： <h1>ajax的get请求</h1> <button id="btn">获取数据</button> <p>姓名：<span id="user"></span></p> <p>年龄：<span id="age"></span></p> 1 2 3 4JavaScript代码： var oBtn =

详细解析Ajax的使用之向服务器发送GET请求

前面一篇博客我们讲到了如何使用form表单像服务器发送请求，但是请求方式是同步的，效率太低，现在我们讲一下如何使用Ajax的技术向服务器发送异步请求。

HTML代码：

<h1>ajax的get请求</h1><buttonid="btn">获取数据</button><p>姓名：<spanid="user"></span></p><p>年龄：<spanid="age"></span></p>

JavaScript代码：

varoBtn=document.getElementById("btn");
varoUser=document.getElementById("user");
varoAge=document.getElementById("age");
// 1.初始化请求对象varxhr;
if (window.XMLHttpRequest) {
xhr=newXMLHttpRequest();
console.log(xhr.readyState);
    } else {
xhr=newActiveXObject("Microsoft.XMLHTTP");
    }
// 2.发送请求   // 2-1.设置请求的方式 地址等xhr.open("GET", "data.json", true);
console.log(xhr.readyState);
// 2-2.发送请求xhr.send();
console.log(xhr.readyState);
xhr.onreadystatechange=function () {
oBtn.onclick=function () {
console.log(xhr.readyState);
if (xhr.readyState==4&&xhr.status==200) {    
varobj=JSON.parse(xhr.responseText);
// console.log(obj);// console.log(JSON.stringify(obj));oUser.innerText=obj.name;
oAge.innerText=obj.age;
            }
        }
    }
// onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。// readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。// 0: 请求未初始化// 1: 服务器连接已建立// 2: 请求已接收// 3: 请求处理中// 4: 请求已完成，且响应已就绪