淘先锋技术网

首页 1 2 3 4 5 6 7

封装原生 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 请求,并通过传递回调函数来处理请求的结果。