js 怎么发送AJAX请求-js教程-PHP中文网

最现代且推荐的ajax请求方式是使用fetch api，1. 它基于promise，语法简洁，支持async/await，2. 可通过配置对象发送get/post请求并自定义请求头，3. 需手动检查response.ok处理http错误，4. 使用abortcontroller结合promise.race实现超时控制，5. 传统xmlhttprequest适用于需上传/下载进度、兼容老旧浏览器或同步请求的场景。遇到请求无响应时，应检查网络、cors、请求参数、代码逻辑及服务器状态。

js 怎么发送AJAX请求

在JavaScript中发送AJAX请求，最现代且推荐的方式是使用

fetch

登录后复制

API，它基于Promise，能更简洁地处理异步操作。当然，传统的

XMLHttpRequest

登录后复制

对象也依然可用，尤其在需要处理请求进度等特定场景时。

通过

fetch

登录后复制

API发送AJAX请求，其实比很多人想象的要直接。它返回一个Promise，让异步代码写起来更像同步。

最基本的GET请求是这样的：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) { // 检查HTTP状态码，确保请求成功
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json(); // 或response.text()，根据服务器返回的数据类型
  })
  .then(data => {
    console.log('获取到的数据:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

登录后复制

如果你需要发送POST请求，或者自定义请求头，

fetch

登录后复制

的第二个参数可以传入一个配置对象：

const postData = {
  name: '张三',
  age: 30
};

fetch('https://api.example.com/submit', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 告诉服务器发送的是JSON数据
    'Authorization': 'Bearer your_token_here' // 认证信息
  },
  body: JSON.stringify(postData) // 将JavaScript对象转换为JSON字符串
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('服务器响应:', data);
  })
  .catch(error => {
    console.error('POST请求失败:', error);
  });

登录后复制

使用

async/await

登录后复制

语法会让代码看起来更整洁，尤其在处理多个异步操作时：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('使用async/await获取到的数据:', data);
  } catch (error) {
    console.error('async/await请求失败:', error);
  }
}

fetchData();

登录后复制

而传统的

XMLHttpRequest

登录后复制

(XHR) 对象，虽然功能强大，但其API设计相对冗长：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 方法, URL, 是否异步
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('XHR获取到的数据:', JSON.parse(xhr.responseText));
  } else {
    console.error('XHR请求失败，状态码:', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('XHR网络错误');
};
xhr.send(); // 发送请求

登录后复制

为什么我的AJAX请求没有响应？

遇到AJAX请求没有响应的情况，通常是挺让人抓狂的，毕竟它不像同步代码那样会直接报错在当前行。这里面涉及的因素很多，从网络层面到代码逻辑，甚至服务器配置，都可能成为“罪魁祸首”。

首先，最常见的是网络问题。浏览器控制台的“Network”标签页是你的第一站。看看请求有没有发出？状态码是什么？如果是pending状态，可能是网络延迟或者请求被阻塞了。如果显示错误码，比如404（Not Found）、500（Internal Server Error），那问题显然出在服务器或URL上。

另一个高频问题是跨域资源共享（CORS）。当你尝试从一个域（比如

your-app.com

登录后复制

）向另一个域（比如

api.example.com

登录后复制

）发送AJAX请求时，浏览器会出于安全考虑阻止它，除非服务器明确允许。你会看到控制台报CORS相关的错误，比如“No 'Access-Control-Allow-Origin' header is present on the requested resource”。这需要后端在响应头中添加

Access-Control-Allow-Origin

登录后复制

等字段来允许你的前端域访问。前端能做的，除了检查请求头是否正确外，就是确保请求方式（GET/POST等）和服务器的CORS配置是匹配的。有时，复杂的请求（如带有自定义头或PUT/DELETE方法）会触发“预检请求”（OPTIONS方法），如果预检请求失败，主请求就不会发出。

请求参数或格式不正确也是个坑。比如，你期望发送JSON数据，但忘记设置

Content-Type: application/json

登录后复制

头，或者

body

登录后复制

内容不是有效的JSON字符串，服务器可能就无法解析。同样，如果后端期望接收表单数据，而你发送了JSON，也会导致解析失败。

再者，JavaScript代码逻辑错误。可能是URL拼写错误，或者异步操作没有正确地用

await

登录后复制

或

.then()

登录后复制

链式处理，导致你在数据还没回来的时候就去访问它。特别是新手，容易忘记

fetch

登录后复制

返回的是Promise，不处理它的解析结果就去用，那当然是拿不到数据。

最后，服务器端问题。即便前端代码完美无瑕，如果后端服务宕机、接口地址变更、数据库连接失败或者业务逻辑出错，请求也自然不会有预期的响应。这时候，就需要和后端开发沟通，或者查看服务器日志来定位问题。

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

查看详情

AJAX请求中如何处理错误和超时？

处理AJAX请求中的错误和超时，是构建健壮应用不可或缺的一部分。我们不能指望网络永远畅通，服务器永远稳定。

对于错误处理，

fetch

登录后复制

API的Promise特性让它变得相对直观。

fetch

登录后复制

本身只会在网络错误（如断网）或CORS问题时抛出错误，进入

.catch()

登录后复制

块。对于HTTP状态码（如404、500），

fetch

登录后复制

认为请求成功到达服务器，所以不会抛出错误，你需要手动检查

response.ok

登录后复制

属性（它等同于

response.status >= 200 && response.status < 300

登录后复制

）或者直接检查

response.status

登录后复制

。

fetch('https://api.example.com/non-existent-endpoint')
  .then(response => {
    if (!response.ok) {
      // HTTP状态码不在200-299范围内，手动抛出错误
      throw new Error(`服务器返回错误: ${response.status} ${response.statusText}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    // 捕获网络错误、CORS错误或上面手动抛出的HTTP错误
    console.error('请求过程中发生错误:', error.message);
    // 可以根据错误类型进行不同的处理，比如显示用户友好的提示
    if (error.message.includes('404')) {
      alert('请求的资源不存在！');
    } else {
      alert('网络或服务器异常，请稍后再试。');
    }
  });

登录后复制

使用

async/await

登录后复制

时，

try...catch

登录后复制

结构是处理错误的最佳实践：

async function safeFetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP Error: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('请求失败:', error);
    // 可以在这里进行错误上报或用户提示
    throw error; // 重新抛出错误，让调用者也能处理
  }
}

// 调用示例
safeFetchData('https://api.example.com/data')
  .then(data => console.log('成功获取:', data))
  .catch(err => console.error('最终处理:', err.message));

登录后复制

至于超时处理，

fetch

登录后复制

API本身没有内置的超时选项，但可以通过

AbortController

登录后复制

和

Promise.race

登录后复制

来优雅地实现。

AbortController

登录后复制

允许你取消一个或多个

fetch

登录后复制

请求。

function fetchWithTimeout(url, options = {}, timeout = 5000) {
  const controller = new AbortController();
  const id = setTimeout(() => controller.abort(), timeout); // 设置一个定时器，超时后调用abort

  return fetch(url, {
    ...options,
    signal: controller.signal // 将AbortController的signal传递给fetch
  }).finally(() => clearTimeout(id)); // 无论成功失败，清除定时器
}

// 使用示例
fetchWithTimeout('https://api.example.com/slow-endpoint', {}, 3000) // 3秒超时
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('请求超时或被取消:', error);
      alert('请求超时，请检查网络或稍后再试。');
    } else {
      console.error('其他请求错误:', error);
    }
  });

登录后复制

这种方式提供了一种灵活的超时控制机制，让你的应用在网络状况不佳时也能提供更好的用户体验。