JSON, API và giao tiếp dữ liệu: Khi JavaScript nói chuyện với thế giới

Một trong những khoảnh khắc khiến mình “ngộ” ra sức mạnh thực sự của JavaScript,
là khi nhận ra ngôn ngữ này không chỉ chạy trong trình duyệt – mà còn nói chuyện với cả thế giới thông qua API và JSON.

Trong bài viết này, mình muốn chia sẻ một cách nhìn gần gũi về cách dữ liệu được trao đổi trong JavaScript,
vì sao JSON trở thành “ngôn ngữ chung”, và cách mọi thứ hoạt động phía sau mỗi dòng fetch().

1. JSON là gì và vì sao nó phổ biến?

JSON (JavaScript Object Notation) là một định dạng dữ liệu nhẹ, dễ đọc, dễ chuyển đổi,
được sinh ra từ JavaScript nhưng nay đã trở thành tiêu chuẩn toàn cầu cho giao tiếp giữa client và server.

Ví dụ một đối tượng JavaScript:

const user = {
  name: "Minh Hiếu",
  age: 22,
  skills: ["Java", "JavaScript", "Security"],
};

Khi gửi qua mạng, nó được chuyển thành chuỗi JSON:

{
  "name": "Minh Hiếu",
  "age": 22,
  "skills": ["Java", "JavaScript", "Security"]
}

Vì sao JSON phổ biến:

• Cấu trúc đơn giản, dễ đọc.
• Dễ parse (chuyển đổi) giữa chuỗi và object.
• Hỗ trợ hầu hết ngôn ngữ lập trình hiện nay.

2. API – Cầu nối giữa client và server

Khi JavaScript chạy trong trình duyệt, nó không chỉ hiển thị nội dung tĩnh mà còn gửi và nhận dữ liệu động từ server thông qua API (Application Programming Interface).

Ví dụ: gọi một API công khai để lấy dữ liệu người dùng.

fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((data) => {
    console.log("Tên người dùng:", data.name);
  })
  .catch((error) => {
    console.error("Lỗi khi gọi API:", error);
  });

Giải thích:

• fetch() gửi request đến URL.
• Khi server phản hồi, JavaScript chuyển dữ liệu JSON thành object (response.json()).
• Dữ liệu này được xử lý trong Promise chain – cách làm việc bất đồng bộ đặc trưng của JS.

3. Phân biệt fetch, async/await và Promise

Ngày xưa, khi mình mới học JS, đoạn code bất đồng bộ thường “lồng vào nhau” kiểu callback:

getData(url, function (response) {
  parseData(response, function (result) {
    display(result);
  });
});

Ngày nay, mọi thứ gọn hơn nhiều với async/await:

async function loadUser() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/users/1"
    );
    const data = await response.json();
    console.log("Tên người dùng:", data.name);
  } catch (error) {
    console.error("Lỗi:", error);
  }
}
loadUser();

Cú pháp await giúp code trông đồng bộ hơn nhưng vẫn chạy bất đồng bộ phía dưới – một bước tiến lớn về trải nghiệm lập trình.

4. Khi JavaScript “nói chuyện” với backend

JavaScript có thể gửi request nhiều kiểu:

• GET để lấy dữ liệu
• POST để gửi dữ liệu mới
• PUT để cập nhật
• DELETE để xóa

Ví dụ gửi dữ liệu dạng JSON:

async function createUser() {
  const newUser = {
    name: "Tiết Thanh Minh Hiếu",
    email: "hieu@example.com",
  };

  const response = await fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(newUser),
  });

  const data = await response.json();
  console.log("Đã tạo user:", data);
}
createUser();

Ở đây:

• headers cho server biết dữ liệu đang gửi là JSON.
• body chứa chuỗi JSON từ object.
• Server phản hồi lại dữ liệu – JavaScript lại parse ngược để sử dụng.

5. Bảo mật khi giao tiếp qua API

Dù đây chưa phải chủ đề của Series 3 (Security), nhưng mình muốn nhấn mạnh sớm: API luôn là điểm dễ bị tấn công nhất nếu không được kiểm soát đúng cách.

Một số lưu ý:

• Không để lộ API key trong frontend.
• Sử dụng HTTPS thay vì HTTP.
• Kiểm tra dữ liệu nhận được từ API (validation).
• Dùng cơ chế CORS hợp lý để giới hạn nguồn gọi.

Những nguyên tắc này là nền tảng cho phần “Web Security” mà mình sẽ viết sau.

6. JSON trong thực tế – Không chỉ là dữ liệu

Ngày nay JSON không chỉ dùng trong web, mà còn:

• Trao đổi giữa microservices trong backend.
• Lưu cấu hình hệ thống.
• Truyền dữ liệu trong AI/ML pipelines.
• Là định dạng trung gian khi export/import dữ liệu.

Chính nhờ tính đơn giản và phổ quát, JSON trở thành “ngôn ngữ chung” của thế giới phần mềm hiện đại.

7. Tổng kết

Khi học JavaScript, ta thường tập trung vào cú pháp và hàm. Nhưng đến khi hiểu cách nó giao tiếp qua JSON và API, ta mới thật sự bước vào thế giới lập trình mạng.

JavaScript không chỉ là ngôn ngữ của trình duyệt. Nó là ngôn ngữ của kết nối, nơi mọi dữ liệu, request và phản hồi hòa vào nhau thành một dòng chảy liên tục.

Và một khi hiểu điều đó, bạn đã tiến thêm một bước trên hành trình trở thành một kỹ sư phần mềm toàn diện.

Keep learning, keep coding.