ajax 原生请求方式详解：ajax原生写法-原生ajax发送请求

核心关键词

1. XMLHttpRequest对象

   原生AJAX的核心API,用于创建异步请求。

2. 请求步骤

   • 创建对象：const xhr = new XMLHttpRequest();
   • 初始化请求：xhr.open(method, url, async)

     参数：请求方法（GET/POST）、URL、是否异步（默认true）。

     

   • 设置请求头：xhr.setRequestHeader('Content-Type', 'application/json')
   • 发送请求：xhr.send(body)（GET请求时body为null）
   • 监听状态：xhr.onreadystatechange 或 xhr.onload

3. 事件与状态码

   • readyState：请求状态（0-4，4表示完成）。
   • status：HTTP响应状态码（如200成功、404未找到）。

4. 响应处理

   • 获取文本：xhr.responseText
   • 获取XML：xhr.responseXML
   • 错误处理：xhr.onerror

5. 兼容性

   • 旧版IE（<IE7）需使用ActiveXObject。

6. POST请求示例

   

   const xhr = new XMLHttpRequest();  
   xhr.open('POST', '/api', true);  
   xhr.setRequestHeader('Content-Type', 'application/json');  
   xhr.onload = () => {  
     if (xhr.status === 200) console.log(xhr.responseText);  
   };  
   xhr.send(JSON.stringify({ key: 'value' }));  

7. GET请求示例

   const xhr = new XMLHttpRequest();  
   xhr.open('GET', '/api?id=123', true);  
   xhr.onload = () => {  
     if (xhr.status === 200) console.log(xhr.responseText);  
   };  
   xhr.send();  

8. 优缺点

   • 优点：无需第三方库，兼容性强。
   • 缺点：代码冗余，需手动处理兼容性和错误。

如需进一步简化,可结合现代fetch API或框架（如Axios）。