登录
首页 >  文章 >  前端

JS用AJAX发送请求的完整方法

时间：2025-06-23 21:01:25 351浏览 收藏

还在为JS如何发送AJAX请求而烦恼吗？本文将深入解析XMLHttpRequest对象，助你轻松掌握AJAX核心技术。从创建XMLHttpRequest对象开始，详细讲解如何配置请求方式、URL，设置请求头，以及监听响应事件，处理服务器返回的数据。同时，还会涉及到readyState属性详解、错误处理、跨域请求(CORS)问题解决方案、withCredentials属性作用、abort()方法的使用，以及如何使用FormData对象上传文件和监控上传进度。掌握XMLHttpRequest，让你在不刷新页面的情况下，轻松与服务器交换数据，提升用户体验。无论你是前端新手还是经验丰富的开发者，都能从中受益。

使用JavaScript发送AJAX请求的核心是XMLHttpRequest对象。1. 创建对象：let xhr = new XMLHttpRequest(); 2. 配置请求方式和URL，如xhr.open('GET', 'https://api.example.com/data'); 或xhr.open('POST', 'https://api.example.com/submit'); 并设置请求头xhr.setRequestHeader('Content-Type', 'application/json'); 3. 监听响应事件，如xhr.onload用于处理服务器返回的数据；4. 发送请求，GET用xhr.send()，POST则传递数据如xhr.send(JSON.stringify(data))。此外，readyState属性可跟踪请求状态变化，onreadystatechange用于监听状态变更；错误可通过onerror、ontimeout及onload中处理状态码捕获；跨域问题通常由服务器设置Access-Control-Allow-Origin解决；withCredentials控制是否发送cookie；abort()方法取消请求；上传文件需用FormData对象并通过xhr.upload.onprogress监控进度。

HTML如何用JS发送AJAX请求？XMLHttpRequest对象详解

简单来说，使用JavaScript发送AJAX请求，核心在于利用XMLHttpRequest对象。它允许你在不刷新整个页面的情况下，与服务器交换数据。

HTML如何用JS发送AJAX请求？XMLHttpRequest对象详解

解决方案

HTML如何用JS发送AJAX请求？XMLHttpRequest对象详解

首先，你需要创建一个XMLHttpRequest对象。这就像准备一个信使，让他帮你跑腿送信：

let xhr = new XMLHttpRequest();

接下来，配置这个信使。告诉他你想用什么方式（GET还是POST）送信，以及送信的目的地（URL）：

HTML如何用JS发送AJAX请求？XMLHttpRequest对象详解
xhr.open('GET', 'https://api.example.com/data'); // 假设这是一个获取数据的API

或者，如果你想用POST方式发送数据：

xhr.open('POST', 'https://api.example.com/submit');
xhr.setRequestHeader('Content-Type', 'application/json'); // 告诉服务器你发送的是JSON数据

setRequestHeader非常重要，它告诉服务器你发送的数据类型。如果服务器期望收到JSON，而你没告诉它，它可能会解析失败。

然后，你需要告诉信使，当他收到回信时，应该怎么做。这可以通过监听xhr.onload事件来实现：

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功！
    console.log('Success:', xhr.responseText);
  } else {
    // 请求失败...
    console.log('Request failed with status:', xhr.status);
  }
};

这里的xhr.status是HTTP状态码，200-299通常表示成功。

最后，让信使出发！

xhr.send(); // GET请求不需要发送数据

如果是POST请求，你需要发送数据：

let data = { name: 'John Doe', age: 30 };
xhr.send(JSON.stringify(data)); // 将JavaScript对象转换为JSON字符串

这就是一个基本的AJAX请求的流程。

XMLHttpRequest对象的readyState属性详解

readyState属性表示请求的当前状态。它有五个可能的值：

  • 0: UNSENT (未初始化) - XMLHttpRequest 对象已创建，但 open() 方法尚未调用。
  • 1: OPENED (已打开) - open() 方法已调用。
  • 2: HEADERS_RECEIVED (已发送头部) - send() 方法已调用，并且头部和状态已获得。
  • 3: LOADING (加载中) - 正在下载响应体；responseText 中已获取部分数据。
  • 4: DONE (完成) - 整个操作已完成。

你可以通过监听readystatechange事件来跟踪请求的状态：

xhr.onreadystatechange = function() {
  console.log('ReadyState:', xhr.readyState);
  if (xhr.readyState === 4) {
    // 请求完成
    if (xhr.status >= 200 && xhr.status < 300) {
      console.log('Success:', xhr.responseText);
    } else {
      console.log('Request failed with status:', xhr.status);
    }
  }
};

使用readyState的好处是可以更细粒度地控制请求流程。例如，你可以在readyState为3时显示一个加载动画。

如何处理AJAX请求中的错误？

除了监听onload事件，你还可以监听onerror和ontimeout事件来处理错误：

xhr.onerror = function() {
  console.log('Network Error'); // 网络错误，例如断网
};

xhr.ontimeout = function() {
  console.log('Timeout Error'); // 请求超时
};

xhr.timeout = 5000; // 设置超时时间为5秒

onerror通常表示网络错误，例如断网。ontimeout表示请求超时。

此外，服务器也可能返回错误状态码（例如404, 500）。这些错误需要在onload事件中处理：

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('Success:', xhr.responseText);
  } else {
    console.log('Request failed with status:', xhr.status);
    // 根据不同的状态码进行不同的处理
    if (xhr.status === 404) {
      console.log('Resource not found');
    } else if (xhr.status === 500) {
      console.log('Server error');
    }
  }
};

跨域请求(CORS)问题如何解决？

当你的网页尝试从与自身域名不同的域名请求资源时，就会遇到跨域问题。浏览器会阻止这种请求，以保护用户安全。

解决CORS问题的方法有很多，其中最常见的是在服务器端设置Access-Control-Allow-Origin响应头。

如果你无法控制服务器端，可以尝试使用JSONP。JSONP的原理是利用