Trong các dòng mã trên, truy vấn được chỉ định ở dạng URL theo sau là ? . Nếu gửi hai hoặc nhiều biến, hãy sử dụng dấu và [&] giữa hai biến. Phương pháp trên như được hiển thị áp dụng cho yêu cầu GET. Gửi dữ liệu qua POST, sau đó gửi nó trong phương thức gửi như hình bên dưới
Trong bài đăng trên blog này, tôi muốn hướng dẫn bạn những kiến thức cơ bản về AJAX và chỉ cho bạn một số ví dụ đơn giản để giúp bạn bắt đầu
Ảnh của Greg Rakozy trên Bapt
AJAX là viết tắt của JavaScript và XML không đồng bộ. Tóm lại, đó là việc sử dụng đối tượng XMLHttpRequest để giao tiếp với các máy chủ. Nói một cách đơn giản hơn, AJAX là một kỹ thuật để truy cập máy chủ web từ một trang web. AJAX cho phép các trang web được cập nhật không đồng bộ bằng cách trao đổi dữ liệu với máy chủ web đằng sau hậu trường. Điều này có nghĩa là có thể cập nhật các phần của trang web mà không cần tải lại toàn bộ trang
Các trang web hiện đại có tính tương tác cao và phải có khả năng phản hồi linh hoạt với đầu vào của người dùng. Ví dụ: khi người dùng tạo một tài khoản mới trên một trang web, email của họ phải được kiểm tra để đảm bảo rằng nó chưa được đăng ký. Điều này chỉ có thể được thực hiện nếu các thành phần riêng lẻ của trang web có thể được thao tác bất kể khi nào trang web được tải
Lợi ích lớn nhất của AJAX là các trang web không còn cần phải tải lại hoàn toàn để phản hồi đầu vào của người dùng. Nội dung tĩnh không thay đổi, trong khi thông tin động có thể được thêm vào DOM khi cần. Trong ví dụ trên khi tạo người dùng mới, một yêu cầu sẽ được gửi đến máy chủ web để kiểm tra xem địa chỉ email do người dùng gửi có khả dụng để tạo hồ sơ mới hay không. Sau đó, dữ liệu này được gửi lại cho khách hàng
Nếu không có AJAX, biểu mẫu sẽ được gửi và toàn bộ trang sẽ được tải lại. Nhưng AJAX cho phép bạn gửi yêu cầu đến máy chủ bất kỳ lúc nào bằng JavaScript
Nếu bạn cần thêm các ví dụ về AJAX, hãy nghĩ đến việc tương tác với Google Maps; . Hoặc khi bạn tìm kiếm điều gì đó trên Google, Google sẽ cung cấp cho bạn các đề xuất theo thời gian thực khi bạn nhập. Với AJAX, các trang web có thể phản ứng nhanh hơn với đầu vào của người dùng và có mức độ tương tác sâu hơn nhiều
Trao đổi dữ liệu
Để trao đổi dữ liệu, một đối tượng XMLHttpRequest phải được tạo. XMLHttpRequest là một API có thể được JavaScript và các ngôn ngữ kịch bản trình duyệt web khác sử dụng để truyền và thao tác dữ liệu XML đến và từ một máy chủ web bằng HTTP, do đó, về cơ bản, đối tượng XMLHttpRequest là trung gian giữa máy khách và máy chủ
Có hai cách để trao đổi dữ liệu với máy chủ. Cách đầu tiên là một yêu cầu GET. Trong yêu cầu GET, dữ liệu được gửi dưới dạng tham số URL. Không nên thực hiện các yêu cầu GET tới máy chủ với lượng dữ liệu lớn [ví dụ: dữ liệu biểu mẫu]. Trong trường hợp này, tốt hơn là sử dụng yêu cầu POST. Trong yêu cầu POST, dữ liệu được gửi đến máy chủ như một phần của nội dung yêu cầu HTTP
Như tôi đã đề cập, AJAX sử dụng truyền dữ liệu không đồng bộ. Điều này có nghĩa là trong khi truyền dữ liệu, người dùng có thể thực hiện các hành động khác và tiếp tục tương tác với trang web
Phản hồi mà trình duyệt nhận được từ máy chủ có thể ở định dạng XML, văn bản thuần túy hoặc JSON. Nếu nhận được phản hồi ở định dạng văn bản thuần túy thì nó có thể được hiển thị ngay lập tức trên trang. Khi nhận được phản hồi XML, máy khách sẽ xử lý XML và chuyển đổi dữ liệu sang HTML. Khi nhận được phản hồi JSON, khách hàng chỉ cần thực thi mã nhận được với hàm eval để có được một đối tượng JavaScript hoàn chỉnh
Tóm lại, cách thức hoạt động của AJAX
- Khi một trang được tải, người dùng có thể gây ra một sự kiện. Bằng cách nhấp vào một nút, ví dụ
- Sau khi nhấp vào nút, một đối tượng XMLHttpRequest được tạo bởi JavaScript
- Đối tượng gửi yêu cầu đến máy chủ
- Máy chủ nhận yêu cầu, xử lý và tạo phản hồi
- Phản hồi được gửi lại cho trình duyệt
- Phản hồi được đọc bởi JavaScript và một phần của trang web được cập nhật tùy thuộc vào phản hồi
Điều đầu tiên trước khi bạn thực hiện giao tiếp AJAX giữa máy khách và máy chủ là khởi tạo một đối tượng XMLHttpRequest
var request = new XMLHttpRequest[];Để tạo một yêu cầu máy chủ, chúng tôi sử dụng các phương thức open[] và send[] của đối tượng mới được tạo
- open[method, url, async] — phương thức chỉ định loại yêu cầu, GET hoặc POST; . Yêu cầu máy chủ phải được gửi không đồng bộ, vì vậy JavaScript có thể thực thi các tập lệnh khác trong khi chờ phản hồi của máy chủ
- send[] / send[body] — gửi yêu cầu HTTP đến máy chủ
Dưới đây là một ví dụ về một yêu cầu GET đơn giản, được sử dụng để truy xuất một số dữ liệu từ máy chủ mà không yêu cầu bất kỳ thay đổi nào. Khi người dùng nhấp vào một nút, nó sẽ kích hoạt chức năng tạoRequest. Yêu cầu được thực hiện và sau đó việc thực thi [onreadystatechange] được chuyển đến alertContents[]. Nếu chúng tôi nhận được trạng thái OK [200], khi chúng tôi thấy một cửa sổ bật lên cảnh báo với nội dung của tệp máy chủ
Hãy chú ý đến onreadystatechange — nó là một trong những thuộc tính quan trọng nhất của đối tượng XMLHttpRequest. Thuộc tính này định nghĩa một hàm sẽ được thực thi khi trạng thái sẵn sàng thay đổi
readyState là một số nguyên chỉ định yêu cầu HTTP. Các giá trị có thể là
0 — UNSENT — một đối tượng XMLHttpRequest đã được tạo, nhưng phương thức open[] chưa được gọi;
1 — ĐÃ MỞ — phương thức open[] được gọi [kết nối máy chủ được thiết lập];
2 — HEADERS_RECEIVED — phương thức send[] đã được gọi [đã nhận được yêu cầu];
3 — Đang TẢI — máy chủ đang xử lý yêu cầu;
4 — DONE — yêu cầu đã được xử lý và phản hồi đã sẵn sàng
Sau khi kiểm tra trạng thái của yêu cầu và mã trạng thái HTTP của phản hồi, bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu nhận được từ máy chủ
Để POST dữ liệu, chúng ta cần thêm tiêu đề HTTP với setRequestHeader[]
- setRequestHeader[header_name, value] — đặt giá trị của tiêu đề yêu cầu;
Bạn phải chỉ định dữ liệu bạn muốn gửi trong phương thức send[body]
Tóm lại, AJAX là một công nghệ cực kỳ hữu ích để tạo các trang web nhanh và động. Ưu điểm chính của việc sử dụng AJAX là nó hợp lý hóa trải nghiệm người dùng. Một trang web được xây dựng tốt sử dụng AJAX hiệu quả sẽ chạy nhanh hơn và cung cấp cho người dùng trải nghiệm tốt hơn. Tôi hy vọng bạn thấy phần giới thiệu về AJAX này hữu ích. Cảm ơn vì đã đọc