AJAX简易实战笔记

xiaoxiao2021-03-25 137

实战步奏概要

需要使用到 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();