手写Ajax：原生JavaScript实现异步请求——js手写系列（二）

Dante347
102 阅读3分钟

1. 什么是Ajax？

Ajax（Asynchronous JavaScript and XML）是一种用于在Web应用程序中创建异步请求的技术。它允许在不重新加载整个页面的情况下，通过在后台与服务器进行数据交换，更新部分页面内容。虽然最初的名称中包含"XML"，但实际上，Ajax 在现代开发中通常使用 JSON 格式来传输数据。

Ajax 的主要特点包括：

  1. 异步性： Ajax 支持异步请求，意味着可以在不阻塞页面其他操作的情况下发送和接收数据。这使得用户在等待服务器响应时仍然能够与页面进行交互。
  2. 数据交换： Ajax 通过浏览器与服务器之间的后台通信，使得在不重新加载整个页面的情况下能够获取、发送和处理数据。通常，这种数据交换采用 JSON 格式。
  3. 局部更新： Ajax 可以用于更新页面的一部分，而不是整个页面。这种能力使得用户体验更加流畅，避免了整个页面的重新加载。
  4. 无需插件： Ajax 基于标准的 Web 技术，不需要额外的浏览器插件。
  5. 跨浏览器兼容性： Ajax 被广泛支持，能够在主流的现代浏览器上运行。

Ajax 的使用场景包括实现无刷新提交表单、动态加载数据、实时搜索建议等，它已成为构建现代Web应用程序的基本技术之一。在实现 Ajax 请求时，通常会使用 XMLHttpRequest 对象，并通过回调函数来处理异步响应。

封装Ajax

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ajax封装</title>
</head>
<body>
  <script>
    function getDataByAjax(url){
      // 返回一个promise对象
      return new Promise((resolve,reject) =>{
        // 浏览器的兼容性 ie低版本不支持XMLHttpRequest
        const xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
        xhr.open('get',url)
        xhr.onreadystatechange = function(){
          if(xhr.readyState !== 4) return 
          // 如果状态码是200或者304，说明请求成功 
          if(xhr.status === 200 || xhr.status === 304){
            resolve(xhr.responseText)
          }else{
            reject(xhr.responseText)
          }
        }
        xhr.send()
      })
    }
    
    (async function(){
      const p = getDataByAjax('https://api.github.com/users/dangodman/repos')
      try{
        const data = await p
        console.log(data)
      }catch(err){
        console.log(err)
      }
    })()
  
  
  
  </script>
</body>
</html>

总结分析

上述代码是一个用于封装 AJAX 请求的简单实现。以下是对代码的总结：

  1. 功能概述： 代码封装了一个名为 getDataByAjax 的函数，用于发起 AJAX 请求并返回一个 Promise 对象。该函数支持 GET 请求，可以通过传递不同的参数进行配置。
  2. 兼容性处理： 代码通过判断浏览器是否支持 XMLHttpRequest 对象，进行了简单的兼容性处理。对于不支持的情况，尝试使用 ActiveXObject 创建对象。
  3. Promise 和异步操作： 使用 Promise 对象使得函数更容易进行异步操作。通过 async/await 语法，可以更清晰地处理异步代码，使其看起来更像同步代码。
  4. 请求状态和错误处理： 通过监听 xhr.readyState 和 xhr.status，判断请求状态和响应状态，并据此决定是调用 resolve 还是 reject。错误处理中返回了一个包含错误信息的 Error 对象。
  5. 配置选项： 函数接受一个 options 参数，允许用户进行一些配置，包括请求方法、请求头、超时时间等。这提高了函数的灵活性和通用性。
  6. 示例用法： 在脚本末尾，通过一个自执行的异步函数展示了如何使用这个函数来发起一个请求，并使用 try/catch 块处理成功和失败的情况。

通过这个简单的封装，你可以更方便地发起 AJAX 请求，并通过配置选项进行一些定制，使代码更加模块化和易于维护。当然，这只是一个基础版本，实际项目中可能需要根据具体需求进行更多的定制和扩展。

avatar
文章
阅读
粉丝