手把手教你用JS写Ajax，超详细教程+代码实例！

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JS实现Ajax请求超详细教程（附代码示例）》，涉及到，有需要的可以收藏一下

AJAX 是一种无需刷新页面即可与服务器通信的技术，主要通过 JavaScript 实现。1. 使用 XMLHttpRequest 发送请求：创建对象、配置参数、发送请求、处理响应；2. 推荐使用更现代的 fetch API，基于 Promise，语法更简洁；3. 跨域问题可通过服务器端配置 CORS、JSONP、代理服务器等方式解决；4. 请求超时可设置 timeout 属性或使用 AbortController；5. 文件上传使用 FormData 对象；6. 可通过 abort 方法取消请求；7. 错误处理需结合状态码、网络错误、超时等综合处理；8. 实际开发中应根据兼容性选择 XMLHttpRequest 或 fetch。

AJAX，简单来说，就是让你的网页不用刷新就能和服务器“聊天”的技术。JS 是实现这个“聊天”的工具，而我们要聊的就是怎么用 JS 发送 AJAX 请求，以及一些实用技巧。

解决方案

发送 AJAX 请求的核心在于 XMLHttpRequest 对象（现在更推荐使用 fetch API，但为了兼容性，我们先说 XMLHttpRequest）。

基本步骤：

1. 创建 XMLHttpRequest 对象：

   

   let xhr = new XMLHttpRequest();

2. 配置请求：

   xhr.open('GET', 'your_api_endpoint', true); // true 表示异步请求

   • GET 是请求方法，也可以是 POST, PUT, DELETE 等。
   • your_api_endpoint 是你服务器的 API 地址。
   • true 表示异步请求，false 表示同步请求（不推荐同步，会阻塞页面）。

3. 设置请求头（可选）：

   xhr.setRequestHeader('Content-Type', 'application/json'); // 如果发送 JSON 数据

4. 发送请求：

   xhr.send(); // GET 请求不需要发送数据，POST 请求可以发送数据，例如：xhr.send(JSON.stringify(data));

5. 处理响应：

   xhr.onload = function() {
     if (xhr.status >= 200 && xhr.status < 300) {
       // 请求成功
       console.log('Success:', xhr.responseText);
       // 处理返回的数据，例如 JSON.parse(xhr.responseText)
     } else {
       // 请求失败
       console.log('Request failed.  Returned status of ' + xhr.status);
     }
   };
   
   xhr.onerror = function() {
     console.log('There was a network error.'); // 处理网络错误
   };

完整示例：

function sendAjaxRequest(url, method, data, callback) {
  let xhr = new XMLHttpRequest();
  xhr.open(method, url, true);

  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      callback(null, xhr.responseText); // 成功回调
    } else {
      callback('Request failed.  Returned status of ' + xhr.status, null); // 失败回调
    }
  };

  xhr.onerror = function() {
    callback('There was a network error.', null); // 网络错误回调
  };

  if (method === 'POST') {
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.send(JSON.stringify(data));
  } else {
    xhr.send();
  }
}

// 使用示例：
sendAjaxRequest('/api/users', 'GET', null, function(error, response) {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
    // 处理用户数据
  }
});

sendAjaxRequest('/api/users', 'POST', { name: 'John Doe', email: 'john.doe@example.com' }, function(error, response) {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log('Response:', response);
    // 处理服务器返回的响应
  }
});

如何处理 AJAX 请求中的跨域问题（CORS）？

CORS (Cross-Origin Resource Sharing) 是浏览器的一种安全机制，用于限制来自不同源的脚本访问资源。简单来说，如果你的网页和 API 服务器不在同一个域名下，就会遇到 CORS 问题。

解决方法：

• 服务器端配置： 这是最常见的解决方法。服务器需要在响应头中添加 Access-Control-Allow-Origin 字段。

  • Access-Control-Allow-Origin: * 允许所有域名访问（不推荐在生产环境中使用）。
  • Access-Control-Allow-Origin: https://your-domain.com 只允许特定域名访问。

• JSONP（仅限 GET 请求）： JSONP 是一种古老的跨域技术，它利用

  注意事项：

  • FormData 对象会自动设置 Content-Type 为 multipart/form-data，不需要手动设置。
  • 服务器端需要正确处理 multipart/form-data 类型的请求。

  如何取消正在进行的 AJAX 请求？

  有时候，我们需要取消正在进行的 AJAX 请求，例如用户切换了页面或者输入了新的搜索条件。

  使用 XMLHttpRequest 取消请求：

  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/users', true);
  
  xhr.onload = function() {
    // ...
  };
  
  xhr.onerror = function() {
    // ...
  };
  
  xhr.send();
  
  // 取消请求：
  xhr.abort();

  使用 fetch API 取消请求：

  与设置超时类似，也需要使用 AbortController。

  const controller = new AbortController();
  
  fetch('/api/users', { signal: controller.signal })
    .then(response => {
      // ...
    })
    .catch(error => {
      if (error.name === 'AbortError') {
        console.log('Request aborted.');
        // 处理请求取消
      } else {
        // ...
      }
    });
  
  // 取消请求：
  controller.abort();

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

  良好的错误处理是 AJAX 应用的关键。 我们需要考虑到各种可能出现的错误，例如网络错误、服务器错误、超时等。

  常见的错误处理方法：

  • 检查 HTTP 状态码： XMLHttpRequest 的 status 属性和 fetch API 的 response.ok 属性可以用来判断请求是否成功。
  • 处理网络错误： XMLHttpRequest 的 onerror 事件和 fetch API 的 catch 方法可以用来捕获网络错误。
  • 设置超时： 避免长时间等待，提高用户体验。
  • 显示友好的错误信息： 不要直接将错误信息显示给用户，而是显示更友好的提示。
  • 记录错误日志： 将错误信息记录到服务器端，方便调试和分析。

  示例：

  fetch('/api/users')
    .then(response => {
      if (!response.ok) {
        console.error('HTTP error, status = ' + response.status);
        throw new Error('HTTP error, status = ' + response.status); //抛出错误，让catch捕获
      }
      return response.json();
    })
    .then(data => {
      // ...
    })
    .catch(error => {
      console.error('Error:', error);
      // 显示友好的错误信息
      alert('An error occurred while fetching data. Please try again later.');
      // 记录错误日志
      logError(error);
    });

  总而言之，掌握 AJAX 的发送方式，以及错误处理、跨域问题等，能让你在前端开发中更加得心应手。选择 XMLHttpRequest 还是 fetch API，取决于你的项目需求和兼容性考虑。

  今天关于《手把手教你用JS写Ajax，超详细教程+代码实例！》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于ajax的内容请关注golang学习网公众号！