ajax如何自己写数据，ajax发送请求获取数据

在Web开发中,原生JavaScript实现AJAX（Asynchronous JavaScript and XML）请求是理解前端异步通信机制的核心基础，虽然jQuery等库简化了操作，但掌握原生XMLHttpRequest或Fetch API不仅能提升代码性能，更能深入理解HTTP协议与浏览器事件循环机制，核心上文小编总结是：通过原生XMLHttpRequest对象或现代Fetch API，开发者可以完全掌控异步数据的发送与接收，实现无需刷新页面的局部数据更新，这是构建现代单页应用（SPA）的基石。

原生XMLHttpRequest的实现逻辑

XMLHttpRequest（XHR）是AJAX技术的核心对象，尽管语法略显繁琐，但它提供了最底层的控制能力，实现过程主要分为四个步骤：创建对象、配置请求、发送请求、处理响应。

实例化XHR对象,在大多数现代浏览器中，直接使用new XMLHttpRequest()即可，调用open()方法初始化请求，该方法接收三个参数：请求方法（如GET、POST）、请求URL以及是否异步的标志位（通常为true），随后，必须设置onreadystatechange事件监听器，用于监控请求状态的变化，当readyState变为4且status为200时，表示请求成功，此时可通过responseText或responseXML获取服务器返回的数据，调用send()方法发送请求，若使用POST方法，需通过setRequestHeader设置Content-Type为application/x-www-form-urlencoded，并在send中传入序列化后的数据字符串。

现代Fetch API的优势与实践

相较于XHR,Fetch API基于Promise设计，代码更简洁，且天然支持异步/await语法，极大地提升了代码的可读性和维护性，Fetch的核心优势在于其轻量级和模块化设计。

使用Fetch发起GET请求时,只需调用fetch(url)，返回一个Promise对象，通过.then()链式调用处理响应，需要注意的是，Fetch默认不会发送Cookie，除非配置credentials: 'include'，Fetch仅在网络故障或请求被阻止时拒绝Promise，而不会在HTTP错误（如404、500）时自动拒绝，因此需要在.then()中手动检查response.ok属性。

对于POST请求,Fetch需要传入一个配置对象，包含method、headers和body。headers通常设置为{'Content-Type': 'application/json'}，而body则需使用JSON.stringify()将JavaScript对象转换为JSON字符串，这种结构化的数据交换方式已成为现代Web开发的标准实践。

错误处理与用户体验优化

无论使用XHR还是Fetch,健壮的错误处理机制都是专业开发的必备要素，网络请求可能因多种原因失败，如服务器宕机、网络中断或跨域限制，在代码中，应始终包含try...catch块（针对async/await）或.catch()方法（针对Promise）来捕获异常。

从用户体验（UX）角度考虑，异步请求往往伴随加载状态，在请求发起前，应显示加载指示器（如Spinner），请求结束后隐藏，这能有效缓解用户等待焦虑，对于长时间未响应的请求，应设置超时机制，避免用户无限期等待，在XHR中可通过timeout属性设置，在Fetch中则需结合AbortController实现取消请求的功能。

跨域问题的解决方案

在实际开发中,跨域资源共享（CORS）是常见痛点，浏览器出于安全考虑，默认禁止Ajax请求不同源的资源，解决此问题主要有两种思路：后端配置和前端代理。

后端配置是最根本的解决方案,服务器需在响应头中添加Access-Control-Allow-Origin，指定允许访问的域名，或设置为允许所有域名，若涉及凭证（Cookie），还需添加Access-Control-Allow-Credentials: true，且前端请求中需开启withCredentials。

若无法修改后端配置,前端可采用代理方案，在开发环境中，可通过Webpack或Vite的配置，将特定API请求代理到后端服务器，从而绕过浏览器的同源策略，在生产环境中，则需确保Nginx等反向代理服务器正确配置CORS头。

性能优化建议

高频次的Ajax请求会严重影响页面性能,建议采用防抖（Debounce）和节流（Throttle）技术，限制请求频率，在搜索框输入时，不应每次按键都发起请求，而应在用户停止输入一定时间后再发送请求，利用HTTP缓存机制，如设置Cache-Control头，可减少不必要的网络传输，对于大量数据，应考虑分页加载或虚拟滚动技术，避免一次性加载过多数据导致内存溢出。

相关问答

Q1: 为什么Fetch API在HTTP 404错误时不会抛出异常？ A: Fetch的设计哲学是将网络错误与HTTP状态错误分离，Fetch仅在发生网络故障（如DNS失败、断网）时拒绝Promise，对于4xx或5xx状态码，Fetch认为请求已成功到达服务器，只是服务器返回了错误响应，开发者必须手动检查response.ok或response.status来判断业务逻辑是否成功，这促使开发者更严谨地处理各种HTTP状态。

Q2: 如何在原生Ajax中实现请求超时取消？ A: 在XMLHttpRequest中，可通过设置xhr.timeout属性（单位为毫秒）并在ontimeout事件中处理超时逻辑，若需动态取消请求，可调用xhr.abort()方法，在Fetch中，需创建AbortController实例，将其signal属性传入fetch配置中，当需要取消请求时，调用controller.abort()，此时Promise将拒绝并抛出AbortError异常，开发者可在catch块中忽略此错误以优化用户体验。

如果您在实现异步请求时遇到具体的报错或性能瓶颈,欢迎在评论区留言，我们将提供针对性的代码优化建议。