Hướng Dẫn Chi Tiết Gửi HTTP Request Trong JavaScript Dành Cho Người Mới Bắt Đầu

Trong thế giới công nghệ hiện đại, việc tương tác giữa các ứng dụng web thường được thực hiện qua giao thức HTTP. Hãy tưởng tượng rằng bạn đang xây dựng một ứng dụng thương mại điện tử và muốn thêm sản phẩm mới vào danh sách. Khi bạn nhập thông tin và nhấn nút "Tạo", một HTTP request sẽ được gửi đến máy chủ (backend) chứa dữ liệu bạn đã cung cấp. Máy chủ sẽ xử lý thông tin đó để cập nhật cơ sở dữ liệu và sau đó gửi lại phản hồi (HTTP response) về cho trình duyệt. Qua quá trình này, requests và responses cần tuân theo định dạng HTTP để có thể hiểu và giao tiếp với nhau một cách hiệu quả1

Các Phương Thức HTTP Request Thông Dụng

Có nhiều phương thức HTTP request mà người lập trình viên có thể sử dụng, mỗi phương thức phục vụ cho những mục đích nhất định. Dưới đây là một số phương thức phổ biến:

1. Phương Thức GET

Phương thức GET được dùng để yêu cầu dữ liệu từ máy chủ. Các tham số thường được nhúng trong URL, được phân tách bằng cặp key/value:

http://example.com/index.html?name1=value1&name2=value2

Dấu hỏi chấm (?) chỉ ra sự bắt đầu của danh sách các tham số, trong khi dấu và (&) dùng để phân tách các tham số khác nhau.

2. Phương Thức POST

Phương thức POST thường được sử dụng để gửi dữ liệu đến máy chủ, cho phép thêm tài nguyên mới hoặc cập nhật một tài nguyên đã tồn tại.

POST /index.html HTTP/1.1
Host: example.com
name1=value1&name2=value2

3. Phương Thức DELETE

Phương thức DELETE được sử dụng để xóa một tài nguyên khỏi máy chủ.

4. Phương Thức HEAD

Phương thức HEAD hoạt động giống như GET nhưng chỉ nhận đầu phản hồi mà không có phần thân. Điều này hữu ích để kiểm tra xem máy chủ có hoạt động hay không.

5. Phương Thức PUT

Phương thức PUT được sử dụng để cập nhật tài nguyên đã tồn tại. Khi thực hiện PUT, tài nguyên cũ sẽ bị ghi đè.

Fetch API Trong JavaScript

Trước đây, việc gửi HTTP request trong JavaScript gặp nhiều khó khăn do thiếu những phương pháp tiêu chuẩn. Nhiều lập trình viên sử dụng XMLHttpRequest (AJAX) hoặc các thư viện bên ngoài như Axios hoặc jQuery. Fetch API xuất hiện vào năm 2015, cung cấp một cách hiện đại và đơn giản để gửi HTTP request. Fetch API là một phần của JavaScript nên không cần thêm thư viện bên ngoài.

Gửi GET Request Với Fetch API

Fetch API cung cấp cơ chế promise, giúp viết mã đơn giản hơn. Dưới đây là ví dụ về gửi yêu cầu GET:

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Mạng không ổn định");
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Lỗi Fetch:", error));

Gửi POST Request Với Fetch API

Để gửi yêu cầu POST, bạn cần chỉ định rõ ràng phương thức và gửi dữ liệu trong phần thân yêu cầu:

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

Gửi PUT và DELETE Request Với Fetch API

Để gửi yêu cầu PUT hoặc DELETE, chỉ cần thay đổi phương thức trong cấu hình fetch:

fetch("https://jsonplaceholder.typicode.com/users/123", {
  method: "DELETE",
});

XMLHttpRequest (AJAX) Trong JavaScript

Bên cạnh fetch(), bạn có thể sử dụng XMLHttpRequest để gửi yêu cầu HTTP. Cú pháp có phần phức tạp hơn và thường dẫn đến việc gọi hàm khéo, được gọi là callback hell.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Lỗi:", xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error("Yêu cầu lỗi");
};
xhr.send();

Sử Dụng Thư Viện Bên Ngoài

Ngoài các phương thức tích hợp sẵn, bạn cũng có thể sử dụng thư viện bên ngoài như jQuery hoặc Axios để gửi HTTP request dễ dàng hơn:

$.get("https://api.example.com/data", function (data) {
  console.log(data);
}).fail(function (error) {
  console.error("Lỗi:", error);
});

Hy vọng rằng bài viết đã cung cấp cho bạn cái nhìn tổng quan và hướng dẫn chi tiết về cách gửi HTTP requests bằng JavaScript. Hãy thử nghiệm với các phương thức khác nhau và chọn cách phù hợp nhất cho dự án của bạn.
source: viblo