正文

掌握JS中发起GET请求的秘诀：轻松上手XMLHttpRequest和fetch API，让你快速学会如何从服务器获取数据。

/0 浏览量
0418

在Web开发中，与服务器进行数据交互是必不可少的技能。其中，发起GET请求是获取服务器数据的常用方式。本文将带你轻松上手两种常用的JavaScript技术——XMLHttpRequest和fetch API，让你能够快速学会如何从服务器获取数据。

一、XMLHttpRequest：经典的GET请求方式

1.1 XMLHttpRequest简介

XMLHttpRequest（简称XHR）是HTML5中用于在后台与服务器交换数据的对象。通过XHR，你可以发送异步请求，而无需重新加载页面。

1.2 发起GET请求

以下是一个使用XHR发起GET请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

在上面的代码中，我们创建了一个XHR对象，并通过open方法指定请求类型为GET，请求URL为https://api.example.com/data，以及一个异步标志true。然后，我们定义了一个onreadystatechange事件处理函数，用于在请求完成时处理响应。最后，通过send方法发送请求。

1.3 注意事项

  • 在发送请求之前，确保请求URL是正确的。
  • 在处理响应时，要注意判断请求状态码（status）和响应状态（readyState）。
  • 在实际开发中，可能需要处理跨域请求（CORS），此时需要服务器支持CORS。

二、fetch API：现代化的GET请求方式

2.1 fetch API简介

fetch API是现代浏览器提供的一种用于网络请求的接口。相比XHR，fetch API更加简洁、易于使用。

2.2 发起GET请求

以下是一个使用fetch API发起GET请求的示例：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

在上面的代码中，我们使用fetch函数发送GET请求，并传入请求URL。请求成功后，我们使用.then方法解析JSON格式的响应数据，并打印到控制台。如果请求失败，则使用.catch方法捕获错误信息。

2.3 注意事项

  • fetch API默认不会处理CORS请求，如果需要跨域访问资源，需要服务器支持CORS。
  • fetch API返回的是一个Promise对象，因此在处理响应时，需要使用.then和.catch方法。
  • fetch API不支持同步请求，因此在请求过程中，页面不会加载。

三、总结

通过本文的介绍，相信你已经掌握了使用JavaScript发起GET请求的两种常用方式：XMLHttpRequest和fetch API。在实际开发中，你可以根据项目需求和浏览器兼容性选择合适的方法。希望本文能帮助你提高Web开发技能，祝你学习愉快！

-- 展开阅读全文 --