通过制作自定义 HTTP 库使用 XMLHttpRequest 删除请求

这里的任务是展示如何通过创建自定义 HTTP 库来使用XMLHttpRequest将数据删除到 API。将使用包含对象数组的占位符 API 作为示例。在此 API 上执行 DELETE 请求。 API 的 URL 是 https://jsonplaceholder.typicode.com/posts/

先决条件：

• 需要具备 HTML、CSS 和 JavaScript 的基本知识。
• 必须创建一个 HTML 文件，其中添加了基本的 HTML 标记，如下例所示。在正文的最后，我们附上了两个脚本，分别是library.js 和app.js。然后我们将创建这些文件。

创建 library.js 文件：

1. 首先创建一个函数easyHTTP并初始化一个新的XMLHttpRequest()对象。
2. 使用easyHTTP.prototype.delete为 delete 方法创建了一个新原型。它包含两个参数url和一个回调。
3. 使用open方法打开一个新请求。它需要三个参数，第一个是请求的类型（GET、POST、PUT 或 DELETE），第二个是 API 的URL ，最后一个是 布尔值，其中true表示异步调用， false表示同步调用。
4. onload处理程序用于显示数据。它在 API 调用完成后执行。检查响应的状态。如果状态代码为200，则运行包含两个参数、错误和响应文本的回调函数。如果状态代码不是 200，则回调函数将简单地打印错误消息。
5. 最后一步是使用send()函数发送请求。

创建 app.js 文件：

1. 我们将首先使用new关键字实例化之前创建的easyHTTP 。
2. 然后我们通过URL和删除函数原型的回调函数。
3. 回调函数包含两个参数，即，如果出现任何错误和响应，以获得实际响应打印错误。

下面的代码示例演示了所有必需文件的创建。

index.html 的代码

HTML

  Delete request


  
    Delete request using xmlhttpRequest/
    Ajax by making custom HTTP library.
  
  
  
  
  

library.js 的代码

Javascript

function easyHTTP() {
  // Initialising new XMLHttpRequest method.
  this.http = new XMLHttpRequest();
}
  
// Make an HTTP Delete Request
easyHTTP.prototype.delete
  = function (url, callback) {
    
  // Open an request (GET/POST/PUT/DELETE,
  // PATH, ASYNC - TRUE/FALSE)
  this.http.open("DELETE", url, true);
  
  // Assigning this to self to have
  // scope of this into the function
  let self = this;
  
  // When the response is ready
  this.http.onload = function () {
    
    // Checking status
    if (self.http.status === 200) {
      
      // Callback function (Error, response text)
      callback(null, "Post Deleted");
    } else {
      
      // Callback function (Error message)
      callback("Error: " + self.http.status);
    }
  };
  
  // Send the request
  this.http.send();
};

app.js 的代码

Javascript

// Instantiate easyHTTP
const http = new easyHTTP();
  
// Use the delete prototype
// method with (URL, callback(error, response text))
http.delete("https://jsonplaceholder.typicode.com/posts/1",
 function (
  err,
  response
) {
  if (err) {
    console.log(err);
  } else {
    console.log(response);
  }
});

输出：

在任何浏览器中打开index.html文件并打开开发者控制台。程序的输出将在此处可见。还可以使用 Networks 选项卡观察DELETE请求及其详细信息。