AJAX简易实战笔记

最新推荐文章于 2022-03-22 21:34:20 发布

schwarzeni

最新推荐文章于 2022-03-22 21:34:20 发布

阅读量390

点赞数

分类专栏： javascript 文章标签： ajax

本文链接：https://blog.csdn.net/nzyalj/article/details/60883111

版权

javascript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

实战步奏概要

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