掌握JS发送Ajax请求：入门必看技巧与实例解析

引言

Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术。JavaScript 发送 Ajax 请求是前端开发中常见且重要的技能。本文将详细介绍如何使用 JavaScript 发送 Ajax 请求，包括入门技巧和实例解析。

入门技巧

1. 使用原生 JavaScript

原生 JavaScript 提供了 XMLHttpRequest 对象来发送 Ajax 请求。以下是使用原生 JavaScript 发送 GET 请求的基本步骤：

var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send();

2. 使用 Fetch API

Fetch API 提供了一种更现代、更简洁的方法来发送网络请求。以下是使用 Fetch API 发送 GET 请求的基本步骤：

fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

3. 使用库

虽然原生 JavaScript 和 Fetch API 已经足够强大，但一些库（如 jQuery、Axios）提供了更丰富的功能，例如请求取消、自动转换响应类型等。以下是使用 Axios 发送 GET 请求的示例：

axios.get('https://api.example.com/data') .then(response => console.log(response.data)) .catch(error => console.error('Error:', error));

实例解析

实例 1：使用原生 JavaScript 发送 POST 请求

var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText); } }; xhr.send(JSON.stringify({ key: 'value' }));

实例 2：使用 Fetch API 发送 DELETE 请求

fetch('https://api.example.com/data', { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

实例 3：使用 Axios 发送 PUT 请求

axios.put('https://api.example.com/data', { key: 'value' }) .then(response => console.log(response.data)) .catch(error => console.error('Error:', error));