Kịch bản thuyết trình: Slide 132

Mình tiếp tục với slide 132 về JavaScript AJAX.

Ví dụ minh họa

AJAX sử dụng XMLHttpRequest để gửi/nhận dữ liệu với server.

Các bước chính:

• new XMLHttpRequest() → tạo ra một đối tượng để gửi/nhận dữ liệu với server.

• xhttp.open("GET", "ajax_info.txt", true) → định nghĩa yêu cầu GET đến file ajax_info.txt (chứa nội dung cần thay đổi).

• xhttp.send() → gửi yêu cầu đến server.

• xhttp.onload → khi server trả kết quả, hàm này sẽ chạy.

  • this.responseText chính là dữ liệu trả về từ server (nội dung file ajax_info.txt).
  • document.getElementById("demo").innerHTML = ... → thay thế toàn bộ nội dung trong <div id="demo"> bằng dữ liệu vừa nhận được.

Kết quả:

• Ban đầu: hiển thị text "Original content".
• Sau khi bấm nút: nội dung trong ajax_info.txt (ví dụ "Hello! This content was loaded using AJAX.") sẽ thay thế text cũ mà không cần reload trang.

Lưu ý: AJAX là công nghệ cũ, hiện nay người ta thường dùng Fetch API (slide 127-128) thay thế vì code ngắn gọn và dễ đọc hơn. Tuy nhiên AJAX vẫn quan trọng để hiểu cách JavaScript giao tiếp với server.

Như vậy là mình đã trình bày xong về AJAX và cách sử dụng XMLHttpRequest để tải dữ liệu từ server.