实战步奏概要
需要使用到 XMLHttpRequest
这个对象对资源进行请求,获取资源,主要使用为 json
格式, 再对其进行解析,加载至页面。
具体步奏
1. 实例化 XMLHttpRequest
对象
let ourRequest = new XMLHttpRequest();
2. 指定数据接收方式,并明确数据来源
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/pets-data.json');
- 第一个参数,是用
GET
来获取数据,选项为HTTP请求类型, 有GET
,POST
,PUT
,DELETE
- 第二个参数,指明数据来源
3. 对接收到数据的处理
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
let ourData = JSON.parse(ourRequest.responseText);
//ourData 为获取的数据,可以在这里对数据进行操作
//测试: console.log(ourData);
} else {
console.log('We connected to the server, but it return an error');
}
}
ourRequest.status
对是否成功获取信息进行判断ourRequest.responseText
为获取的数据JSON.parse()
对获取的数据进行解析,因为原始数据为字符串,需要变为可操作的json格式
4. 容错处理
ourRequest.onerror = function() {
console.log('Connected error');
};
5. 进行数据获取
ourRequest.send();