手把手教你用JS实现GET请求，附详细代码实例

还在为JavaScript发送GET请求而烦恼吗？本文【手把手教你用JS发送GET请求（附代码实例）】将带你掌握三种主流方法：**fetch API**、**XMLHttpRequest**以及**jQuery的$.ajax**。现代JavaScript首选的fetch API简洁强大，本文提供详细代码示例，教你如何添加参数并处理返回数据。对于需要兼容性的老项目，XMLHttpRequest依然实用，我们将解析其使用方法和注意事项。此外，jQuery的$.ajax以其便捷性，简化你的开发流程。本文还将深入探讨跨域问题（CORS）的解决方案，包括服务器端配置和JSONP的使用。最后，分享性能优化建议，如利用缓存和节流/防抖技术，助你写出更高效的JavaScript代码。无论你是新手还是经验丰富的开发者，都能从中受益！

JavaScript中发送GET请求的主要方法有三种：1. fetch API，2. XMLHttpRequest，3. jQuery的$.ajax方法。fetch API是现代JavaScript的首选，简洁且强大；XMLHttpRequest适用于需要兼容性的老项目；jQuery的$.ajax方法使用方便，封装了很多细节。

在JavaScript中发送GET请求的方法有很多，主要是通过XMLHttpRequest对象、fetch API或者第三方库如jQuery的$.ajax方法来实现。今天我来详细探讨一下如何使用这些方法来发送GET请求，并分享一些实用的经验。

首先，如果你使用的是现代的JavaScript，那么fetch API无疑是首选，它简洁而强大。让我给你展示一个基本的例子：

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

这个例子中，我们向https://api.example.com/data发送了一个GET请求，然后处理返回的数据。如果你想添加一些参数，可以通过URL来传递：

const params = new URLSearchParams({ name: 'John', age: 30 });
fetch(`https://api.example.com/data?${params.toString()}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这里我们使用URLSearchParams来构建查询字符串，这使得代码更易读和维护。

然而，有时候你可能会遇到一些老项目或者需要兼容性更好的解决方案，这时XMLHttpRequest就派上用场了。它的使用稍微复杂一些，但也能很好地完成任务：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Network Error');
};
xhr.send();

使用XMLHttpRequest时，你需要手动处理状态码和错误，这可能会增加一些复杂性，但它在所有现代浏览器中都得到了广泛支持。

如果你在使用jQuery，那么$.ajax是一个非常方便的选择：

$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error('Error:', error);
  }
});

jQuery的$.ajax方法封装了很多细节，使得发送请求变得非常简单。

在实际应用中，你可能会遇到一些常见的陷阱，比如跨域问题。如果你遇到CORS（跨源资源共享）错误，可以在服务器端配置允许跨域请求，或者使用JSONP（仅限于GET请求）。JSONP的实现方式如下：

function handleResponse(data) {
  console.log(data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

JSONP通过动态创建