最现代且推荐的ajax请求方式是使用fetch api，1. 它基于promise，语法简洁，支持async/await，2. 可通过配置对象发送get/post请求并自定义请求头，3. 需手动检查response.ok处理http错误，4. 使用abortcontroller结合promise.race实现超时控制，5. 传统xmlhttprequest适用于需上传/下载进度、兼容老旧浏览器或同步请求的场景。遇到请求无响应时，应检查网络、cors、请求参数、代码逻辑及服务器状态。
在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，不处理它的解析结果就去用，那当然是拿不到数据。
最后，服务器端问题。即便前端代码完美无瑕，如果后端服务宕机、接口地址变更、数据库连接失败或者业务逻辑出错，请求也自然不会有预期的响应。这时候，就需要和后端开发沟通，或者查看服务器日志来定位问题。
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); } });
这种方式提供了一种灵活的超时控制机制，让你的应用在网络状况不佳时也能提供更好的用户体验。
何时选择XMLHttpRequest而不是Fetch API？
尽管
fetch
API无疑是现代Web开发中发送AJAX请求的首选，因为它基于Promise，语法更简洁，并且设计上更符合现代异步编程范式，但在某些特定场景下，
XMLHttpRequest
(XHR) 仍然有其存在的价值，或者说，在某些方面它提供了
fetch
API目前不具备的直接能力。
最主要的一个理由是上传/下载进度事件。如果你需要为文件上传或下载显示精确的进度条，
XMLHttpRequest
提供了
progress
事件，你可以监听
xhr.upload.onprogress
来获取上传进度，或者
xhr.onprogress
来获取下载进度。
fetch
API在处理这类事件上就显得力不从心了，因为它返回的是一个Promise，并且对底层的数据流处理做了抽象，直接获取进度信息并不方便（虽然可以通过ReadableStream来间接实现，但复杂度更高）。
另一个考虑因素是取消请求的兼容性。虽然
fetch
现在有了
AbortController
来取消请求，但这是一个相对较新的API，在一些非常老旧的浏览器环境中可能不被支持。而
XMLHttpRequest
的
abort()
方法则拥有更广泛的浏览器兼容性。当然，对于大多数现代Web应用来说，这不再是一个主要问题，因为
AbortController
的兼容性已经相当不错，并且可以通过polyfill来进一步提升。
再者，是同步请求。虽然强烈不推荐在主线程中使用同步AJAX请求（因为它会阻塞UI，导致页面卡死），但在Web Workers中，或者极少数特殊场景下，你可能需要一个同步的请求。
XMLHttpRequest
支持通过将
open()
方法的第三个参数设置为
false
来实现同步请求，而
fetch
API则完全是异步的，不提供同步模式。
最后，可能是一些遗留代码或特定库的依赖。在维护老项目时，如果它们已经大量使用了
XMLHttpRequest
，并且没有明显的性能或功能瓶颈，那么继续沿用它可能比重构为
fetch
更划算。一些第三方库可能也基于XHR构建，直接使用它们的API比自己封装
fetch
更方便。
总的来说，对于绝大多数日常的API交互、数据获取和提交，
fetch
API都是更优的选择，因为它更符合JavaScript的异步特性，代码更具可读性和可维护性。只有当你明确需要XHR特有的功能（如精细的上传下载进度条）或者必须兼容非常老的浏览器环境时，才需要考虑
XMLHttpRequest
。
以上就是js 怎么发送AJAX请求的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1516517.html
微信扫一扫 
支付宝扫一扫 
