ajax如何请求数据原生js

问题：使用ajax如何请求获得数据

我该怎么完善这串代码，使得可以在控制台请求到数据

参考GPT：您可以在以下代码基础上完善：

<script>
let playList = document.getElementById('playList');

function ajaxRequest() {
  // 1. 创建 XMLHttpRequest 对象
  let xhr = new XMLHttpRequest();
  
  // 2. 设置请求参数
  xhr.open("GET", "http://localhost:3aea/related/playlist", true);
  
  // 3. 设置响应处理函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let jsonObj = JSON.parse(xhr.responseText);
      console.log(jsonObj); // 在控制台输出获取到的数据
    }
  };
  
  // 4. 发送请求
  xhr.send();
}

ajaxRequest();
</script>

在这个例子中，我们首先创建了一个 XMLHttpRequest 对象，然后使用 open 方法设置请求参数，包括请求类型和请求 URL，最后使用 send 方法发送请求。
在发送请求前，我们使用 onreadystatechange 事件处理函数绑定了一个回调函数，该回调函数会在响应状态改变时被调用。在这个回调函数中，我们检查 readyState 和 status，如果都符合要求，就说明请求已经完成。

你可能会需要跨域的问题！设置服务端的header请求头

该回答引用于gpt与OKX安生共同编写：

该回答引用于gpt与OKX安生共同编写：

您可以使用XMLHttpRequest对象来发送AJAX请求并获得数据。以下是代码：

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

// 监听状态变化事件
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，获取响应数据并处理
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData); // 在控制台输出响应数据
  }
};

// 发送AJAX请求
xhr.open('GET', 'http://www.example.com/data.json');
xhr.send();

在上述示例中，我们首先创建了一个XMLHttpRequest对象，并监听其状态变化事件。然后，通过调用open()方法设置请求方式和URL，再调用send()方法发送请求。当请求完成后，如果HTTP状态码为200，就表示请求成功，我们可以通过responseText属性获取服务器返回的响应数据。注意，因为响应数据可能是JSON格式的字符串，因此需要使用JSON.parse()方法将其转换为JavaScript对象。

请注意，由于浏览器的安全限制，跨域请求时需要进行跨域请求配置或代理服务器设置才能正常访问远程服务器。另外，在实际开发中，可以使用jQuery等现代JavaScript库来简化AJAX请求的编写过程。

如有用的话，还望采纳哦~

不知道你这个问题是否已经解决, 如果还没有解决的话:

你看下这篇博客吧, 应该有用👉 ：Ajax 请求超时和网络异常

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

以下是参考GPT和自己的见解：
你可以使用下面的程序实现ajax请求，这种方式要自己判断返回的状态码以及响应状态xhr.readyState，也要自己控制请求发送的时机
在使用XMLHttpRequest对象时，它有一个readystate属性，它表示当前请求的状态。readystate属性有以下四个可能的值：

1.XMLHttpRequest.OPENED （值为1）：请求已经被创建，但还没有调用send()方法发送请求。

2.XMLHttpRequest.HEADERS_RECEIVED （值为2）：已经调用send()方法，并且头部和状态已经可获得。

3.XMLHttpRequest.LOADING （值为3）：下载中； responseText属性已经包含部分数据。

4.XMLHttpRequest.DONE （值为4）：下载操作已完成。

以下是每个状态的更详细描述：

1.XMLHttpRequest.OPENED （值为1）：在调用open()方法之后，请求被创建，但是还没有被发送。在这个状态下，您可以调用setRequestHeader()方法来设置请求头。

2.XMLHttpRequest.HEADERS_RECEIVED （值为2）：在调用send()方法之后，服务器已经返回了响应头和响应状态码。在这个状态下，您可以使用getAllResponseHeaders()方法来获取所有响应头，使用getResponseHeader()方法来获取单个响应头，使用status属性来获取响应状态码，使用statusText属性来获取响应状态文本。

3.XMLHttpRequest.LOADING （值为3）：在响应正文下载过程中，浏览器将触发多个progress事件，以便您能够跟踪下载进度，并且响应文本已经开始下载，但是还没有被完全接收。

4.XMLHttpRequest.DONE （值为4）：在响应正文下载完成时，浏览器将触发一个load事件，请求已经完成。在这个状态下，您可以使用responseText或responseXML属性来获取响应正文，使用status和statusText属性来获取响应状态和状态文本，使用getResponseHeader()方法来获取响应头。


let playList = document.getElementById('playList');
var xhr = new XMLHttpRequest();
xhr.open('GET', '/related/playlist', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // 对响应数据进行处理
  }
};
xhr.send();

你也可以使用如下方式进行ajax的请求，这种方式使用起来比较便捷，只是需要你额外引入jquery

$.ajax({
  url: '/related/playlist',    // 你请求接口路径 your-api-url
  method: 'GET',
  dataType: 'json',
  success: function(response) {
    // 对响应数据进行处理
  },
  error: function(xhr, status, error) {
    // 对错误进行处理
  }
});

在上面的代码中，我们使用jQuery的ajax()函数发起了一个GET请求，指定了API URL、响应数据类型和成功/错误回调函数。在成功回调函数中，我们可以对响应数据进行处理。在错误回调函数中，我们可以处理任何错误信息。

无论您选择使用XMLHttpRequest对象还是jQuery库，都应该确保您的API URL正确，并遵循HTTP协议的要求。

你上是我的回答，如果帮到了你，就点个赞吧。

浏览器按下 F12 ，然后增加 console.log(jsonobj);
就可以正常打印了


 
function ajaxRequest() {
  // 1. 创建 XMLHttpRequest 对象
  let xhr = new XMLHttpRequest();
  
  // 2. 设置请求参数
  xhr.open("GET", "http://localhost:3aea/related/playlist", true);
  
  // 3. 设置响应处理函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let jsonObj = JSON.parse(xhr.responseText);
      console.log(jsonObj); // 在控制台输出获取到的数据
    }
  };
  
  // 4. 发送请求
  xhr.send();
}

你已经实现功能了，使用console.log(jsonObj) ，再浏览器按F12就可以查看请求结果了


<script>
let playList = document.getElementById('playList');
var result=''
function ajaxRequest() {
  // 1. 创建 XMLHttpRequest 对象
  let xhr = new XMLHttpRequest();
  
  // 2. 设置请求参数
  xhr.open("GET", "http://localhost:3aea/related/playlist", true);
  
  // 3. 设置响应处理函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let jsonObj = JSON.parse(xhr.responseText);
      result=jsonObj //这个就是你要拿到的数据结果
      console.log(jsonObj); // 在控制台输出获取到的数据
    }
  };
  
  // 4. 发送请求
  xhr.send();
}

ajaxRequest();
</script>

你现在是获取不到数据还是啥，接口能请求通的话就在你那个if语句里加个console.log(jsonObj)就可以在控制台看到数据打印了

以下答案由GPT-3.5大模型与博主波罗歌共同编写：
可以使用XMLHttpRequest对象实现Ajax请求。下面是一个简单的例子：

```javascript
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://a/