JavaScript 封装Ajax传递的数据代码

当我们需要使用Ajax进行数据传递时，通过JavaScript封装以实现数据传递是非常常见的做法。下面是一份完整的JavaScript封装Ajax传递数据的攻略。

攻略步骤

1. 创建一个XMLHttpRequest对象
   使用JavaScript中的XMLHttpRequest对象，用于与服务器进行交互。可以通过new XMLHttpRequest()方法来创建一个XMLHttpRequest对象。

let xhr = new XMLHttpRequest();

1. 为请求设置参数
   使用xhr.open(method, URL, async)方法配置请求的参数。其中method表示请求的类型，可以是GET或POST；URL表示请求的url地址；async表示是否开启异步请求。这里以POST请求为例。

xhr.open('POST', url, true);

1. 设置请求头部信息
   使用setRequestHeader()方法向请求添加头部信息，这里加入了Content-type和token两个头部信息用于请求认证。

xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('token', 'xxx');

1. 设置回调函数
   使用onreadystatechange属性设置回调函数，用于接收服务器返回的数据。当readyState状态改变时会触发该函数。readyState是XMLHttpRequest的状态属性，其值会在请求生命周期中不断改变，表示请求过程的不同阶段。当值为4时，表示请求已完成并可以使用返回的数据。

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

1. 发送请求
   使用send()方法向服务器发送请求。这里需要将需要传递的数据以JSON字符串形式传入send()方法。

xhr.send(JSON.stringify(data));

完成以上步骤，即可完成Ajax的封装。下面给出两个示例说明。

示例一

下面是一个简单的使用Ajax发送POST请求的例子，假设用户需要提交一个表单数据到服务器。

function submitForm() {
  let xhr = new XMLHttpRequest();
  xhr.open('POST', '/submitFormData', true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.setRequestHeader('token', 'xxx');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  let formData = {
    name: document.getElementById('name').value,
    email: document.getElementById('email').value,
    message: document.getElementById('message').value
  };
  xhr.send(JSON.stringify(formData));
}

在这个示例中，我们通过XMLHttpRequest对象进行了POST请求的发送，将表单数据以JSON字符串的形式传递给了服务器。

示例二

假设用户需要向服务器获取一个JSON数据，下面是一个发送GET请求的例子。

function getJsonData() {
  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/getJsonData', true);
  xhr.setRequestHeader('Content-type', 'application/json');
  xhr.setRequestHeader('token', 'xxx');
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      let jsonData = JSON.parse(xhr.responseText);
      console.log(jsonData);
    }
  };
  xhr.send();
}

在这个示例中，我们通过XMLHttpRequest对象进行了GET请求的发送，并通过回调函数解析返回的JSON字符串。