JS 手写: Ajax

2023-05-17 15:17:46 浏览数 (1)

# 思路

  1. 创建 XMLHttpRequest 实例
  2. 发出 HTTP 请求
  3. 服务器返回 XML 格式的字符串
  4. JS 解析 XML 字符串
  5. 随着历史推进,XML 已经被淘汰,取而代之的是 JSON

# 版本 1

代码语言:javascript复制
function ajax () {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://api.github.com/users/cell');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status <= 300) {
        let string = xhr.responseText;
        let json = JSON.parse(string);
      }
    }
  };
  xhr.send();
}

# Promise 版本

代码语言:javascript复制
function ajax (url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status <= 300) {
          let string = xhr.responseText;
          let json = JSON.parse(string);
          resolve(json);
        } else {
          reject(new Error(xhr.statusText));
        }
      }
    };
    xhr.send();
  });
}

const url = `https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=cell`;
ajax(url).then(data => {
  console.log(data);
}).catch(err => {
  console.log(err);
});

0 人点赞