JS Get请求|极客笔记

JS Get请求

一、什么是GET请求？

在网络请求中，GET请求是最常见的一种请求方式之一。GET请求用于从服务器获取数据，并且通过URL的参数传递数据。在浏览器的地址栏中输入网址并回车，就是发送了一个GET请求。

GET请求的主要特点如下：

GET请求是非常简单和直观的，在URL中可见请求的参数和数据；
GET请求对数据的长度有限制，一般在2KB到8KB之间；
GET请求会被浏览器缓存，如果请求的URL相同，浏览器会直接返回缓存的结果；
GET请求不会对数据进行修改，只是获取数据而不会改变服务器端的状态；
GET请求可以被收藏为书签。

二、如何使用JS发送GET请求？

在JS中，我们可以使用XMLHttpRequest对象来发送GET请求。XMLHttpRequest是一种用于在后台与服务器交换数据的技术，它可以在不重新加载整个页面的情况下更新页面的一部分。以下是使用JS发送GET请求的基本步骤：

创建一个XMLHttpRequest对象。
使用open()方法指定请求的类型、URL以及是否要同步执行。
使用send()方法发送请求。
通过监听onreadystatechange事件来处理服务器返回的数据。

下面是一个简单的使用JS发送GET请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

上述代码中，我们创建了一个XMLHttpRequest对象，并使用open()方法指定了GET请求的URL和异步执行。然后，我们使用send()方法发送了GET请求。最后，通过监听onreadystatechange事件，当请求的状态为4（即请求完成）且服务器返回的状态码为200（即请求成功）时，打印出服务器返回的数据。

三、GET请求的参数传递方式

GET请求的参数是通过URL的查询字符串（Query String）传递的。查询字符串是URL中的一部分，用于传递键值对参数。查询字符串的格式为key=value，多个参数之间使用&符号分隔。

例如，下面是一个包含两个参数的GET请求的URL：

https://api.example.com/data?name=John&age=25

在JS中，我们可以通过拼接URL的方式添加查询参数。下面是一个示例代码：

const name = 'John';
const age = 25;
const url = 'https://api.example.com/data?name=' + name + '&age=' + age;

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

上述代码中，我们根据name和age的值拼接了URL，然后发送了GET请求。服务器端可以通过解析URL的查询字符串来获取参数的值。

另外，如果使用框架或库来发送GET请求，一般会提供更方便的方式来传递参数，例如使用对象形式的参数。

四、GET请求的返回结果

当发送GET请求后，服务器会返回相应的数据。在JS中，我们可以通过XMLHttpRequest对象的responseText属性来获取服务器返回的数据。

下面是一个示例代码，展示如何处理服务器返回的JSON数据：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};

上述代码中，我们发送了一个GET请求，并通过JSON.parse()方法将服务器返回的JSON字符串解析为对象。然后，我们可以使用console.log()方法打印出解析后的对象。

如果返回的是HTML文档或其他类型的数据，可以直接使用responseText属性获取完整的响应内容。

五、GET请求的错误处理

在实际应用中，可能会遇到一些错误情况，例如网络连接失败、服务器错误等。JS提供了一些机制来处理这些错误。

在XMLHttpRequest对象中，有一个onerror事件，可以监听请求失败的情况。以下是一个示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Request failed: ' + xhr.status);
    }
  }
};

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

在上述代码中，我们通过监听onerror事件来处理请求失败的情况。当请求发生错误时，会执行xhr.onerror的回调函数，并打印出相应的错误信息。

此外，还可以通过onabort事件来处理请求被取消的情况，通过ontimeout事件来处理请求超时的情况。

六、跨域请求问题

在JS发送GET请求时，可能会遇到跨域请求的问题。跨域请求是指在浏览器发送请求的过程中，请求的源和请求的目标属于不同的域。

由于浏览器的同源策略限制，跨域请求默认是被禁止的。但是，可以通过服务器设置相关的响应头来允许跨域请求。

常见的解决跨域请求问题的方法有以下几种：

JSONP（JSON with Padding）：通过动态创建<script>标签来实现跨域请求。
CORS（Cross-Origin Resource Sharing）：服务器在响应中设置相应的头信息，允许跨域请求。
代理服务器：将请求发送到同域下的服务器，由该服务器转发请求到目标服务器，然后将响应返回给浏览器。

在实际应用中，应根据具体的情况选择适合的解决方案。

七、常见问题及解决方法

1. GET请求传递中文参数乱码问题

GET请求将参数放在URL中传递，如果参数中包含中文字符，可能会出现乱码问题。解决方法是对参数进行URL编码。

在JS中，可以使用encodeURIComponent()方法对参数进行编码。以下是一个示例代码：

const name = '张三';
const encodedName = encodeURIComponent(name);
const url = 'https://api.example.com/data?name=' + encodedName;

在上述代码中，我们对name进行了URL编码，并将编码后的值拼接到URL中。

2. GET请求超时问题

在实际应用中，可能会遇到GET请求超时的问题。如果在规定的时间内服务器没有返回响应，就会触发超时错误。

为了解决GET请求超时的问题，我们可以使用timeout属性来设置超时时间，并通过ontimeout事件处理超时事件。以下是一个示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.timeout = 5000; // 设置超时时间为5秒
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log('Request failed: ' + xhr.status);
    }
  }
};

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

xhr.ontimeout = function() {
  console.log('Request timeout');
};

在上述代码中，我们通过xhr.timeout属性设置超时时间为5秒，当请求超过规定时间没有返回响应时，会执行xhr.ontimeout的回调函数，并打印出相应的提示信息。