原声js发送ajax请求

使用原生 JavaScript 发送 AJAX（Asynchronous JavaScript and XML）请求是一种常见的与服务器进行异步通信的方法。尽管现代开发中更常用 fetch API 或第三方库（如 Axios），但了解 AJAX 的基础概念仍然非常重要。

基本概念

AJAX 允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。它主要依赖于 XMLHttpRequest 对象来实现。

优势

提升用户体验：无需刷新整个页面即可更新部分内容。
减少服务器负载：只请求必要的数据，降低服务器负担。
提高性能：异步通信避免阻塞页面加载。

类型

AJAX 请求主要分为以下几种类型：

GET 请求：用于从服务器获取数据。
POST 请求：用于向服务器发送数据。
PUT 请求：用于更新服务器上的资源。
DELETE 请求：用于删除服务器上的资源。

应用场景

动态内容加载：例如，加载评论、分页数据等。
表单提交：无需刷新页面即可提交表单数据。
实时搜索建议：根据用户输入实时获取搜索建议。

示例代码

以下是使用原生 JavaScript 发送 AJAX GET 和 POST 请求的示例：

发送 GET 请求

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

// 配置请求
xhr.open('GET', 'https://api.example.com/data', true);

// 设置响应类型
xhr.responseType = 'json';

// 注册回调函数
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('成功:', xhr.response);
    } else {
        console.error('错误:', xhr.statusText);
    }
};

// 处理网络错误
xhr.onerror = function() {
    console.error('网络错误');
};

// 发送请求
xhr.send();

发送 POST 请求

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

// 配置请求
xhr.open('POST', 'https://api.example.com/data', true);

// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');

// 注册回调函数
xhr.onload = function() {
    if (xhr.status === 201) { // 201 Created
        console.log('成功:', xhr.response);
    } else {
        console.error('错误:', xhr.statusText);
    }
};

// 处理网络错误
xhr.onerror = function() {
    console.error('网络错误');
};

// 发送请求体
var data = JSON.stringify({
    name: 'John',
    age: 30
});
xhr.send(data);

常见问题及解决方法

跨域请求问题（CORS）：
- 原因：浏览器的同源策略限制了不同源之间的请求。
- 解决方法：服务器端设置适当的 CORS 头，允许跨域请求。

请求超时：
- 原因：服务器响应时间过长或网络延迟。
- 解决方法：设置 xhr.timeout 并处理 timeout 事件。
- 解决方法：设置 xhr.timeout 并处理 timeout 事件。
处理 JSON 数据：
- 原因：服务器返回的数据格式不正确或解析失败。
- 解决方法：确保服务器返回正确的 JSON 格式，并在客户端正确解析。
- 解决方法：确保服务器返回正确的 JSON 格式，并在客户端正确解析。