原生xml发送请求

使用原生JS XMLHttpRequest发送网络请求

• 原生发送方法

原生JS提供了XMLHttpRequest对象来发送和接收HTTP请求的接口。

GET 请求例：

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function() {

  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  
    var response = JSON.parse(xhr.responseText);
    
    console.log(response);
    
  }
  
};

xhr.send();

以上代码创建了一个XMLHttpRequest对象，并调用open方法指定请求的URL和请求类型为GET。然后通过onreadystatechange事件监听请求状态的变化，在请求完成且状态码为200时，通过JSON.parse解析响应数据并进行处理。

POST 请求例：

var xhr = new XMLHttpRequest();

xhr.open('POST', 'https://api.example.com/data', true);

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {

  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  
    var response = JSON.parse(xhr.responseText);
    
    console.log(response);
    
  }
  
};

xhr.send(JSON.stringify({ key: 'value' }));

以上代码与GET请求类似，只是在open方法中指定请求的类型为POST，并通过setRequestHeader方法设置请求头的Content-Type为application/json，然后通过send方法发送请求体数据。

封装发送方法

为了提高代码的复用性和可维护性，我们可以对XMLHttpRequest进行封装，以更便捷地发送网络请求。

封装 GET 请求例：

function getRequest(url, successCallback, errorCallback) {

  var xhr = new XMLHttpRequest();
  
  xhr.open('GET', url, true);
  
  xhr.onreadystatechange = function() {
  
    if (xhr.readyState === XMLHttpRequest.DONE) {
    
      if (xhr.status === 200) {
      
        var response = JSON.parse(xhr.responseText);
        
        successCallback && successCallback(response);
        
      } else {
      
        errorCallback && errorCallback(xhr.statusText);
        
      }
      
    }
    
  };
  
  xhr.send();
  
}

以上代码定义了一个 getRequest 函数，接受三个参数：请求的URL、请求成功的回调函数和请求失败的回调函数。在函数内部，首先创建一个 XMLHttpRequest 对象，并调用 open 方法设置请求的 URL 和请求类型为 GET 。然后通过 onreadystatechange 事件监听请求状态的变化，当请求完成并且状态码为 200 时，通过 JSON.parse 解析响应数据，并调用成功回调函数。如果请求失败，则调用失败回调函数，并传入状态描述。

封装 POST 请求例：

function postRequest(url, data, successCallback, errorCallback) {

  var xhr = new XMLHttpRequest();
  
  xhr.open('POST', url, true);
  
  xhr.setRequestHeader('Content-Type', 'application/json');
  
  xhr.onreadystatechange = function() {
  
    if (xhr.readyState === XMLHttpRequest.DONE) {
    
      if (xhr.status === 200) {
      
        var response = JSON.parse(xhr.responseText);
        
        successCallback && successCallback(response);
        
      } else {
      
        errorCallback && errorCallback(xhr.statusText);
        
      }
      
    }
    
  };
  
  xhr.send(JSON.stringify(data));
  
}

以上代码定义了一个 postRequest 函数，除了 URL 和回调函数外，额外接受一个 data 参数用于指定 POST 请求的数据。在函数内部，与发送 GET 请求类似，只是调用 open 方法时设置请求的类型为 POST ，并通过 setRequestHeader 方法设置请求头的 Content-Type 为 application/json ，然后将 data 参数转为 JSON 字符串并通过 send 方法发送请求体数据。

总结原生JS XMLHttpRequest 对象发送网络请求的方法，并封装发送方法以提高代码的复用性和可维护性。使用原生JS可以灵活地控制请求的方式和参数，并处理响应数据。

以上示例代码展示了原生发送方法和封装发送方法的用法