正文

掌握JavaScript轻松提交PUT请求：手把手教你使用fetch API和XMLHttpRequest实现网页数据更新

/0 浏览量
0509

在这个数字时代，前端开发者常常需要与服务器进行数据交互，更新现有的资源信息。其中，PUT请求是用于更新资源的关键HTTP方法之一。本文将手把手教你如何使用JavaScript中的fetch API和XMLHttpRequest来轻松提交PUT请求，并实现网页数据的更新。

一、理解PUT请求

首先，我们需要了解什么是PUT请求。PUT请求通常用于更新资源。当你发送一个PUT请求到服务器时，如果服务器端存在该资源的对应版本，则会替换该资源的整个表示；如果不存在，则会创建一个新资源。

二、使用fetch API提交PUT请求

fetch API是现代浏览器提供的一个接口，用于在客户端发起网络请求。下面是一个使用fetch API提交PUT请求的基本示例：

function putRequest(url, data) {
    fetch(url, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
    })
    .catch((error) => {
        console.error('Error:', error);
    });
}

// 调用函数
putRequest('https://example.com/api/resource', { id: 1, name: '更新后的名称' });

1. 创建fetch调用

使用fetch(url, options)方法发送请求，其中url是请求的URL，options是一个包含各种选项的对象。

2. 设置请求方法

在options对象中，将method属性设置为’PUT’，表明这是一个PUT请求。

3. 设置请求头

设置headers属性，例如在这个例子中，我们将’Content-Type’设置为’application/json’，因为我们将要发送JSON格式的数据。

4. 发送请求体

将数据转换为JSON字符串，并将其作为请求体发送。这是通过JSON.stringify(data)完成的。

5. 处理响应

使用.then()方法处理响应。在这个例子中，我们期望响应是JSON格式，因此使用response.json()将响应体转换为JSON。

三、使用XMLHttpRequest提交PUT请求

虽然fetch API更为现代和强大，但许多旧版浏览器仍然支持XMLHttpRequest。下面是使用XMLHttpRequest提交PUT请求的示例：

function putRequest(url, data) {
    var xhr = new XMLHttpRequest();
    xhr.open('PUT', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('Success:', JSON.parse(xhr.responseText));
        }
    };
    xhr.send(JSON.stringify(data));
}

// 调用函数
putRequest('https://example.com/api/resource', { id: 1, name: '更新后的名称' });

1. 创建XMLHttpRequest对象

使用new XMLHttpRequest()创建一个XMLHttpRequest对象。

2. 设置请求方法和URL

使用open(method, url, async)方法设置请求方法和URL。

3. 设置请求头

使用setRequestHeader(name, value)方法设置请求头。

4. 设置响应处理函数

在onreadystatechange事件中，检查readyState属性以确定请求是否完成。当readyState为4且status为200时，请求成功。

5. 发送请求体

使用send(body)方法发送请求体。

四、总结

通过本文，你了解了PUT请求的基本概念，以及如何使用fetch API和XMLHttpRequest在JavaScript中提交PUT请求。无论你是在使用现代浏览器还是兼容旧版浏览器，掌握这些方法将帮助你轻松地更新网页数据。

-- 展开阅读全文 --