前端开发者必备：掌握js封装ajax实现GET与POST请求

2023-09-09 05:51:43

用 JavaScript 征服 AJAX：掌握 GET 和 POST 请求

导语

各位前端开发界的精英们，准备踏上征服 AJAX 的征程了吗？作为前端开发人员，掌握这项技能至关重要，它将极大提升你的代码质量和开发效率。今天，我们将深入剖析 JavaScript 封装 AJAX 的奥秘，从 GET 和 POST 请求入手，带你领略其精髓。

1. AJAX 的魅力

AJAX（异步 JavaScript 和 XML）是一种前端技术，让网页无需重新加载即可与服务器异步交换数据。它赋予了网页动态更新能力，大大提升了用户体验的流畅度和效率。

2. GET 和 POST 请求的理解

GET 请求 ：最基本的 HTTP 请求方法，用于从服务器获取资源，如文章、图片或视频。

POST 请求 ：用于向服务器发送数据，如提交表单、注册账号或上传文件。

3. 封装 AJAX 的步骤

掌握 JavaScript 封装 AJAX 的步骤是关键：

创建XMLHttpRequest 对象。
设置请求类型和请求地址。
设置请求头信息（可选）。
发送请求。
监听服务器响应。

4. GET 请求示例

function getArticle(id) {
  // 创建XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 设置请求类型和请求地址
  xhr.open('GET', 'get_article.php?id=' + id, true);

  // 监听服务器响应
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，解析并显示服务器返回的数据
      var data = JSON.parse(xhr.responseText);
      document.getElementById('article').innerHTML = data.title + '<br>' + data.content;
    }
  };

  // 发送请求
  xhr.send();
}

5. POST 请求示例

function submitForm() {
  // 创建XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 设置请求类型和请求地址
  xhr.open('POST', 'submit_form.php', true);

  // 设置请求头信息
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // 监听服务器响应
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，解析并显示服务器返回的数据
      var data = JSON.parse(xhr.responseText);
      document.getElementById('result').innerHTML = data.message;
    }
  };

  // 准备要发送的数据
  var data = new FormData(document.getElementById('form'));

  // 发送请求
  xhr.send(data);
}