53- آموزش جاوااسکریپت | پروژه عملی : قسمت 2 از 2- تکمیل کتابخانه AJAX (EasyHTTP): پیاده‌سازی متدهای POST، PUT و DELETE

در بخش قبلی، متد GET را برای دریافت داده‌ها پیاده‌سازی کردیم. در این آموزش، کتابخانه EasyHTTP را با افزودن متدهای POST (برای ایجاد)، PUT (برای ویرایش) و DELETE (برای حذف) کامل می‌کنیم تا یک ابزار کاربردی برای تعامل با APIهای RESTful داشته باشیم.

۱. پیاده‌سازی متد POST

برای ارسال داده (مثلاً ایجاد یک پست جدید)، باید علاوه بر URL، شیء داده (data) را نیز دریافت کنیم. همچنین باید Content-Type را روی application/json تنظیم کرده و داده‌ها را با JSON.stringify به رشته تبدیل کنیم.

EasyHTTP.prototype.post = function(url, data, callback) {
  var self = this;
  this.http.open('POST', url, true);
  this.http.setRequestHeader('Content-type', 'application/json');

  this.http.onload = function() {
    callback(null, self.http.responseText);
  };

  this.http.send(JSON.stringify(data));
};

۲. پیاده‌سازی متد PUT

متد PUT شباهت بسیار زیادی به POST دارد. تنها تفاوت اصلی در متد درخواست است که باید روی PUT تنظیم شود.

EasyHTTP.prototype.put = function(url, data, callback) {
  var self = this;
  this.http.open('PUT', url, true);
  this.http.setRequestHeader('Content-type', 'application/json');

  this.http.onload = function() {
    callback(null, self.http.responseText);
  };

  this.http.send(JSON.stringify(data));
};

۳. پیاده‌سازی متد DELETE

این متد مشابه GET است، با این تفاوت که عملیات حذف را روی منبع مورد نظر (مبتنی بر ID در URL) انجام می‌دهد.

EasyHTTP.prototype.delete = function(url, callback) {
  var self = this;
  this.http.open('DELETE', url, true);

  this.http.onload = function() {
    if (self.http.status === 200) {
      callback(null, 'Post Deleted');
    } else {
      callback('Error: ' + self.http.status);
    }
  };

  this.http.send();
};

نحوه استفاده در پروژه (app.js)

پس از افزودن متدها به easyhttp.js، می‌توانید به‌سادگی از آن‌ها استفاده کنید:

const http = new EasyHTTP();

// مثال برای POST
const data = { title: 'Custom Post', body: 'This is a custom post' };
http.post('https://jsonplaceholder.typicode.com/posts', data, function(err, post) {
  if (err) console.log(err);
  else console.log(post);
});

// مثال برای PUT
http.put('https://jsonplaceholder.typicode.com/posts/1', data, function(err, post) {
  if (err) console.log(err);
  else console.log(post);
});

// مثال برای DELETE
http.delete('https://jsonplaceholder.typicode.com/posts/1', function(err, response) {
  if (err) console.log(err);
  else console.log(response);
});

با تکمیل این متدها، کتابخانه EasyHTTP اکنون می‌تواند تمامی عملیات‌های اصلی CRUD (ایجاد، خواندن، ویرایش و حذف) را مدیریت کند. این ساختار شیءگرا استفاده از AJAX را در پروژه‌های آینده بسیار ساده‌تر می‌کند.