JS中的Ajax

封装原生 Ajax 请求

在 JavaScript 中，可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码，以及对代码的详细注解。

1.简单的Ajax封装代码

 <h2>ajax原生</h2>
    <script>
        //1.创建xhr对象
        var xhr = new XMLHttpRequest();
        //2.准备发送('请求方式get/post','url地址'，boolean)布尔值是异步，默认为true
        xhr.open('get','ajax.php',true)
        //3.发送 send(),get请求send()为空，
        xhr.send();
        //4.监听函数
        //备注，监听当前ajax请求，经行到哪一步，
        xhr.onreadystatechange=function(){
            //状态改变，5种状态
           if(xhr.readyState===4&&xhr.status===200){
            console.log(xhr.responseText)
           }
        }    
        
    </script>

2.标准的Ajax封装代码

/**
 * 发起 Ajax 请求
 * @param {string} method - 请求方法，如 'GET' 或 'POST'
 * @param {string} url - 请求 URL
 * @param {object} data - 请求数据，可选
 * @param {function} successCallback - 请求成功的回调函数，可选
 * @param {function} errorCallback - 请求失败的回调函数，可选
 */
function ajaxRequest(method, url, data, successCallback, errorCallback) {
  // 创建 XMLHttpRequest 对象
  var xhr = new XMLHttpRequest();

  // 监听请求状态变化
  xhr.onreadystatechange = function () {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        // 请求成功
        if (successCallback) {
          successCallback(xhr.responseText);
        }
      } else {
        // 请求失败
        if (errorCallback) {
          errorCallback(xhr.status);
        }
      }
    }
  };

  // 打开请求
  xhr.open(method, url, true);

  // 设置请求头
  xhr.setRequestHeader('Content-Type', 'application/json');

  // 发送请求
  if (data) {
    xhr.send(JSON.stringify(data));
  } else {
    xhr.send();
  }
}

上述代码封装了一个名为 ajaxRequest 的函数，用于发起 Ajax 请求。下面是对函数参数和代码逻辑的详细注解：

• method：请求方法，可以是 'GET'、'POST' 等。
• url：请求的 URL。
• data：请求的数据，可选参数。如果需要向服务器发送数据，可以通过这个参数传递。
• successCallback：请求成功的回调函数，可选参数。当请求成功时，将调用此函数，并将服务器返回的响应文本作为参数传递给它。
• errorCallback：请求失败的回调函数，可选参数。当请求失败时，将调用此函数，并将 HTTP 状态码作为参数传递给它。

在函数内部，首先创建了一个 XMLHttpRequest 对象，用于发送 Ajax 请求。然后通过监听 xhr 对象的 onreadystatechange 事件，来处理请求状态的变化。

当 xhr.readyState 的值等于 XMLHttpRequest.DONE 时，表示请求已完成。此时，根据 xhr.status 的值判断请求成功还是失败。如果 xhr.status 的值等于 200，表示请求成功，调用 successCallback 函数并将服务器返回的响应文本作为参数传递给它；否则，表示请求失败，调用 errorCallback 函数并将 HTTP 状态码作为参数传递给它。

接下来，使用 xhr.open 方法打开请求，并使用 xhr.setRequestHeader 方法设置请求头为 'Content-Type': 'application/json'。最后，使用 xhr.send 方法发送请求，如果存在 data 参数，则将其转换为 JSON 字符串并发送。

通过调用 ajaxRequest 函数，可以方便地发起 Ajax 请求，并通过传递回调函数来处理请求的结果。