JavaScript学习—网络请求

南無忘码至尊

于 2024-05-08 00:02:34 发布

阅读量441

点赞数 3

分类专栏： JavaScript学习文章标签： javascript 学习开发语言

本文链接：https://blog.csdn.net/qq_57101277/article/details/138549495

版权

JavaScript学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在 JavaScript 中，XMLHttpRequest 对象是一个用于与服务器交换数据的接口，允许在后台与服务器进行异步通信。这使得网页可以在不中断用户交互的情况下从服务器请求数据。

方法

open()：用于设置请求的类型、URL和是否异步处理请求。
```
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
```
send()：用于发送请求。
```
xhr.send();
```
abort()：用于停止当前的请求。
```
xhr.abort();
```

属性

readyState：表示请求/响应过程的当前状态，其值可以是以下几个常量：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
responseText：以字符串形式返回响应数据。
status：返回服务器响应的 HTTP 状态码。

事件

readystatechange：当 readyState 属性改变时触发。
load：当请求成功完成时触发。
error：当请求失败时触发。

示例代码

var xhr = new XMLHttpRequest();

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

xhr.open('GET', 'example.txt', true);
xhr.send();

在这个例子中，当 readyState 变为 4 并且 status 为 200 时，表示请求成功完成，我们就可以在控制台中看到响应数据。如果请求失败，则会打印出错误信息。

项目案例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch API Example</title>
</head>
<body>
  <h1>Fetch API Example</h1>
  <input type="text" id="urlInput" placeholder="Enter a URL">
  <button onclick="fetchData()">Fetch Data</button>
  <div id="content"></div>

  <script src="script.js"></script>
</body>
</html>

script.js

function fetchData() {
  const urlInput = document.getElementById('urlInput');
  const url = urlInput.value;
  const content = document.getElementById('content');

  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Network response was not ok - ${response.statusText}`);
      }
      return response.text();
    })
    .then(data => {
      content.innerHTML = data;
    })
    .catch(error => {
      content.innerHTML = `Error: ${error.message}`;
    });
}

在 index.html 中，我们创建了一个输入框和一个按钮。当用户输入一个 URL 并点击按钮时，会触发 fetchData 函数。
在 script.js 中，fetchData 函数使用 fetch API 来获取 URL 的内容。如果请求成功，它将内容显示在网页上；如果请求失败，它将错误信息显示在网页上。

这个项目是一个简单的示例，但它展示了如何使用 fetch API 在 JavaScript 中进行网络请求。在实际项目中，您可能需要处理更多的异常情况，例如跨源资源共享（CORS）问题，或者使用其他类型的请求（如 POST 请求）

请注意，虽然 XMLHttpRequest 仍然是一个有效的 API，但现代 JavaScript 开发更倾向于使用 fetch API 或其他库，如 axios 或 jQuery.ajax，因为它们提供了更现代、更简洁的 API 并且支持更多的功能，如请求取消、Promise 支持等。