Bài Ajax 03: Ajax hoạt động như thế nào?

0
290

Xin chào các bạn, trong bài học ngày hôm nay chúng ta sẽ cùng nhau tìm hiểu về cách hoạt động của Ajax.

Các bước vận hành của AJAX

Dưới đây là các bước hoạt động của Ajax:

  • Một yêu cầu của khách hàng xảy ra.
  • Một đối tượng XMLHttpRequest được tạo.
  • Đối tượng XMLHttpRequest được cấu hình.
  • Đối tượng XMLHttpRequest đưa ra yêu cầu không đồng bộ đến Máy chủ web.
  • Máy chủ web trả về kết quả chứa tài liệu XML.
  • Đối tượng XMLHttpRequest gọi hàm callback() và xử lý kết quả.
  • HTML DOM được cập nhật.

Bây giờ chúng ta sẽ nói về từng bước một.

Một yêu cầu của khách hàng xảy ra.

  • Hàm JavaScript được gọi là kết quả của một sự kiện.
  • Ví dụ – Hàm JavaScript validateUserId() được ánh xạ như một trình xử lý sự kiện thành một sự kiện onkeyup trên trường input của form có id được đặt thành “userid
  • <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId();">

Một đối tượng XMLHttpRequest được tạo

Đối tượng XMLHttpRequest được cấu hình

Trong bước này, chúng ta sẽ viết một hàm mà nó sẽ được kích hoạt bởi sự kiện trên máy người dùng và hàm callback processRequest() sẽ được khai báo.

Đối tượng XMLHttpRequest đưa ra yêu cầu không đồng bộ đến Máy chủ web

Đoạn code có sẵn ở trên. Code được viết bằng kiểu chữ in đậm có trách nhiệm đưa ra yêu cầu cho máy chủ web. Tất cả điều này đang được thực hiện bằng cách sử dụng đối tượng XMLHttpRequest ajaxRequest.

Máy chủ web trả về kết quả chứa tài liệu XML

Bạn có thể triển khai đoạn code từ phía máy chủ của mình bằng bất kỳ ngôn ngữ nào, tuy nhiên logic của nó như sau.

  • Nhận một yêu cầu từ khách hàng.
  • Phân tích đầu vào từ máy khách.
  • Làm yêu cầu xử lý.
  • Gửi đầu ra cho khách hàng.

Nếu chúng ta giả sử rằng bạn sẽ viết một yêu cầu phục vụ, thì đây là đoạn code.

Đối tượng XMLHttpRequest gọi hàm callback() và xử lý kết quả

Đối tượng XMLHttpRequest đã được cấu hình để gọi hàm processRequest() khi có sự thay đổi trạng thái thành readyState của đối tượng XMLHttpRequest. Bây giờ chức năng này sẽ nhận được kết quả từ máy chủ và sẽ thực hiện xử lý theo yêu cầu. Như trong ví dụ sau, nó đặt một thông báo trở thành đúng hoặc sai dựa trên giá trị được trả về từ Máy chủ web.

HTML DOM được cập nhật

Đây là bước cuối cùng và trong bước này, trang HTML của bạn sẽ được cập nhật. Nó xảy ra theo cách sau:

  • JavaScript được tham chiếu đến bất kỳ phần tử nào trong một trang bằng API DOM.
  • Cách được đề xuất để có được một tham chiếu đến một phần tử là gọi nó.

Kết luận

Như vậy trong bài học ngày hôm nay chúng ta đã cùng nhau tìm hiểu về cách hoạt động của Ajax. Trong bài tiếp theo mình sẽ giới thiệu đến các bạn XMLHttpRequest trong Ajax.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây