Giới thiệu AJAX
AJAX là giấc mơ của một nhà phát triển, bởi vì bạn có thể:
- Cập nhật trang web mà không cần tải lại trang
- Yêu cầu dữ liệu từ máy chủ - sau khi trang tải xong
- Nhận dữ liệu từ máy chủ - sau khi trang tải xong
- Gửi dữ liệu đến máy chủ - trong nền
Hãy tự mình thử các ví dụ trong mỗi chương
Trong mỗi chương, bạn có thể chỉnh sửa các ví dụ trực tuyến và nhấp vào nút để xem kết quả.
Ví dụ AJAX
Let AJAX change this text
Giải thích ví dụ về AJAX
Trang HTML
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Trang HTML chứa một phần <div> và một <button>.
Phần <div> được sử dụng để hiển thị thông tin từ máy chủ.
<button> gọi một hàm (nếu nó được nhấp vào).
Hàm yêu cầu dữ liệu từ máy chủ web và hiển thị nó:
Tải hàmDoc ()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Tệp "ajax_info.txt" được sử dụng trong ví dụ trên, là một tệp văn bản đơn giản và trông giống như sau:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
AJAX là gì?
AJAX = A J avaScript A nd X ML đồng bộ .
AJAX không phải là một ngôn ngữ lập trình.
AJAX chỉ sử dụng kết hợp:
- Đối tượng XMLHttpRequest của trình duyệt được tích hợp sẵn (để yêu cầu dữ liệu từ máy chủ web)
- JavaScript và HTML DOM (để hiển thị hoặc sử dụng dữ liệu)
AJAX là một cái tên gây hiểu lầm. Các ứng dụng AJAX có thể sử dụng XML để vận chuyển dữ liệu, nhưng việc vận chuyển dữ liệu dưới dạng văn bản thuần túy hoặc văn bản JSON cũng phổ biến như nhau.
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 phía 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ách hoạt động của AJAX
- 1. Một sự kiện xảy ra trong một trang web (trang được tải, một nút được nhấp)
- 2. Đối tượng XMLHttpRequest được tạo bởi JavaScript
- 3. Đối tượng XMLHttpRequest gửi yêu cầu đến máy chủ web
- 4. Máy chủ xử lý yêu cầu
- 5. Máy chủ gửi phản hồi trở lại trang web
- 6. Phản hồi được đọc bằng JavaScript
- 7. Hành động thích hợp (như cập nhật trang) được thực hiện bởi JavaScript