html5怎么发送请求？Fetch和Ajax向服务器发送数据请求的方法有哪些

在html5开发中，向服务器发送数据请求是实现前后端交互的基础操作，开发者可以通过传统的Ajax方式或者新兴的Fetch API来完成请求发送，两种方式各有特点，适配不同的开发场景。

一、使用Ajax发送请求

Ajax即Asynchronous JavaScript and XML，是html5之前就存在的异步请求技术，核心依赖XMLHttpRequest对象实现，兼容性较好，支持各类主流浏览器。

1. Ajax发送GET请求

GET请求通常用于从服务器获取数据，参数会拼接在请求地址后面，以下是完整实现代码：

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 配置请求方法和地址，假设请求地址为http://ipipp.com/api/getData，参数id为1
xhr.open('GET', 'http://ipipp.com/api/getData?id=1', true);
// 监听请求状态变化
xhr.onreadystatechange = function() {
    // readyState为4表示请求完成，status为200表示请求成功
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析响应数据，假设服务器返回JSON格式
        const response = JSON.parse(xhr.responseText);
        console.log('GET请求响应结果：', response);
    }
};
// 发送请求
xhr.send();

2. Ajax发送POST请求

POST请求通常用于向服务器提交数据，参数需要放在请求体中，以下是发送JSON格式数据的示例：

const xhr = new XMLHttpRequest();
// 配置POST请求
xhr.open('POST', 'http://ipipp.com/api/postData', true);
// 设置请求头，指定发送的数据格式为JSON
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
// 监听请求状态
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        console.log('POST请求响应结果：', response);
    }
};
// 准备要发送的数据
const postData = {
    name: '测试数据',
    age: 20
};
// 将数据转为JSON字符串发送
xhr.send(JSON.stringify(postData));

二、使用Fetch API发送请求

Fetch是html5新增的原生请求API，基于Promise实现，语法更简洁，支持链式调用，是现代前端开发的主流选择，不过兼容性略差于Ajax，不支持IE浏览器。

1. Fetch发送GET请求

Fetch的GET请求写法比Ajax更简洁，不需要手动监听状态变化，通过Promise的then方法处理响应：

// 发送GET请求
fetch('http://ipipp.com/api/getData?id=1')
    .then(response => {
        // 判断响应状态是否成功
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        // 将响应转为JSON格式
        return response.json();
    })
    .then(data => {
        console.log('GET请求响应结果：', data);
    })
    .catch(error => {
        console.error('请求出错：', error);
    });

2. Fetch发送POST请求

Fetch发送POST请求时需要配置请求方法和请求体，以下是提交JSON数据的示例：

// 准备请求配置
const fetchOptions = {
    method: 'POST',
    // 设置请求头
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    // 请求体数据，转为JSON字符串
    body: JSON.stringify({
        name: '测试数据',
        age: 20
    })
};
// 发送POST请求
fetch('http://ipipp.com/api/postData', fetchOptions)
    .then(response => {
        if (!response.ok) {
            throw new Error('请求失败，状态码：' + response.status);
        }
        return response.json();
    })
    .then(data => {
        console.log('POST请求响应结果：', data);
    })
    .catch(error => {
        console.error('请求出错：', error);
    });

三、两种方式对比

以下是Ajax和Fetch的核心差异对比，方便开发者根据需求选择：

四、注意事项

• 发送请求时如果涉及跨域，需要服务器配置对应的跨域允许头，否则请求会被浏览器拦截。
• 使用POST请求提交数据时，需要根据服务器要求设置正确的Content-Type，常见的有application/json、application/x-www-form-urlencoded等。
• Fetch默认不会携带Cookie，如果需要携带，需要在配置中添加credentials: 'include'参数。
• 本地开发时如果使用127.0.0.1或者192.168.0.1作为服务地址，不需要额外替换地址，直接使用即可。

FetchAjaxhtml5发送请求修改时间：2026-06-17 18:45:37