原生 JS Ajax,GET和POST 请求实例代码

下面是关于“原生 JS Ajax，GET 和 POST 请求实例代码”的完整攻略。

1. 前置知识

在学习原生 JS Ajax，GET 和 POST 请求之前，你需要掌握以下知识：

• 前端基础知识，如 HTML，CSS，JavaScript。
• HTTP 协议基本概念和请求方式（GET 和 POST）的理解。

2. Ajax 请求

Ajax 是一种在后台与服务器交换数据的技术，JavaScript 和 XML 是其基础。通过 Ajax，前端页面可以不用刷新页面而与服务器交互，从而实现异步请求和动态更新前端页面的效果。

2.1 XMLHttpRequest

XMLHttpRequest 是在 JavaScript 中处理 Ajax 请求的核心对象，可以用来向服务器发送请求并接收响应。

下面是一个简单的 GET 请求示例：

let xhr = new XMLHttpRequest();

xhr.open('GET', 'http://example.com/api', true);

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.log('Error', xhr.statusText);
  }
};

xhr.onerror = function() {
  console.log('Error');
};

xhr.send();

上面的代码中，创建了一个 XMLHttpRequest 对象，然后用 open 方法指定请求的方法和地址，设置了 onerror 和 onload 事件处理函数，最后发送请求。

2.2 Promise 封装

为了方便使用，在实际开发中，我们通常会将 XMLHttpRequest 封装成 Promise 的形式。

下面是一个 GET 请求的 Promise 封装示例：

const getData = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

getData('http://example.com/api')
  .then(data => console.log(data))
  .catch(error => console.log(error));

上面的代码中，创建了一个名为 getData 的 Promise 函数，该函数接受一个 URL 参数作为请求地址。其中，在函数内部创建了 XMLHttpRequest 对象，并用 open 方法设置了请求的方法和地址，然后设置了成功和失败的回调函数（onload 和 onerror）。最后，将请求发送出去，并通过 Promise 原生的 resolve 和 reject 方法来实现对请求成功和失败的处理。

2.3 POST 请求示例

POST 请求和 GET 请求的区别一般在于数据传递的方式不同，GET 请求通过 URL 来传递参数，而 POST 请求则通过请求体传递参数。

下面是一个 POST 请求的示例代码：

const postData = (url, data) => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=utf-8');
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send(JSON.stringify(data));
  });
}

const data = { name: 'Jack', age: 18 };

postData('http://example.com/api', data)
  .then(data => console.log(data))
  .catch(error => console.log(error));

上面的代码中，POST 请求通过 setRequestHeader 方法设置了请求头，然后通过 send 方法发送请求，并在 onreadystatechange 方法中处理请求成功和失败后的情况。

3. 总结

通过本文的学习，我们了解了原生 JS Ajax，GET 和 POST 请求的基本实现原理和示例代码，也学习了如何通过 Promise 将 Ajax 封装成更便捷易用的形式。同时，我们还能够通过一些高级的应用场景来完善自己对于 Ajax 的认识和应用能力。