Đối tượng XMLHttpRequest
Tất cả các trình duyệt hiện đại đều có đối tượng XMLHttpRequest được tích hợp sẵn để yêu cầu dữ liệu từ máy chủ.
Tất cả các trình duyệt chính đều có trình phân tích cú pháp XML tích hợp sẵn để truy cập và thao tác với XML.
Đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest có thể được sử dụng để yêu cầu dữ liệu từ máy chủ web.
Đối tượng XMLHttpRequest là ướ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
Ví dụ về XMLHttpRequest
Khi bạn nhập một ký tự vào trường nhập bên dưới, một XMLHttpRequest được gửi đến máy chủ và một số gợi ý tên được trả về (từ máy chủ):
Thí dụ
Start typing a name in the input field below:
Suggestions:
Gửi một XMLHttpRequest
Tất cả các trình duyệt hiện đại đều có đối tượng XMLHttpRequest được tích hợp sẵn.
Cú pháp JavaScript phổ biến để sử dụng nó trông giống như sau:
Thí dụ
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Tạo một đối tượng XMLHttpRequest
Dòng đầu tiên trong ví dụ trên tạo một đối tượng XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Sự kiện onreadystatechange
Thuộc tính readyState giữ trạng thái của XMLHttpRequest.
Sự kiện onreadystatechange được kích hoạt mỗi khi readyState thay đổi.
Trong một yêu cầu của máy chủ, readyState thay đổi từ 0 thành 4:
0: yêu cầu chưa được khởi tạo
1: kết nối máy chủ được thiết lập
2: yêu cầu đã nhận
3: yêu cầu xử lý
4: yêu cầu hoàn tất và phản hồi đã sẵn sàng
Trong thuộc tính onreadystatechange, chỉ định một hàm sẽ được thực thi khi readyState thay đổi:
xhttp.onreadystatechange = function()
Khi trạng thái sẵn sàng là 4 và trạng thái là 200, phản hồi đã sẵn sàng:
if (this.readyState == 4 && this.status == 200)
Thuộc tính và phương thức XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | The status of the XMLHttpRequest 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: OK 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
Truy cập trên các miền
Vì lý do bảo mật, các trình duyệt hiện đại không cho phép truy cập trên các miền.
Điều này có nghĩa là cả trang web và tệp XML mà nó cố gắng tải, phải được đặt trên cùng một máy chủ.
Các ví dụ trên W3Schools tất cả các tệp XML mở nằm trên miền W3Schools.
Nếu bạn muốn sử dụng ví dụ trên trên một trong các trang web của riêng mình, các tệp XML bạn tải phải được đặt trên máy chủ của riêng bạn.
Thuộc tính responseText
Thuộc tính responseText trả về phản hồi dưới dạng một chuỗi.
Nếu bạn muốn sử dụng phản hồi dưới dạng chuỗi văn bản, hãy sử dụng thuộc tính responseText:
Thí dụ
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Thuộc tính responseXML
Thuộc tính responseXML trả về phản hồi dưới dạng đối tượng DOM XML.
Nếu bạn muốn sử dụng phản hồi như một đối tượng DOM XML, hãy sử dụng thuộc tính responseXML:
Thí dụ
Yêu cầu tệp cd_catalog.xml và sử dụng phản hồi làm đối tượng DOM XML:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
NHẬN hay ĐĂNG?
GET đơn giản hơn và nhanh hơn POST và có thể được sử dụng trong hầu hết các trường hợp.
Tuy nhiên, luôn sử dụng yêu cầu ĐĂNG khi:
- Tệp được lưu trong bộ nhớ cache không phải là một tùy chọn (cập nhật tệp hoặc cơ sở dữ liệu trên máy chủ)
- Gửi một lượng lớn dữ liệu đến máy chủ (POST không có giới hạn về kích thước)
- Gửi thông tin đầu vào của người dùng (có thể chứa các ký tự không xác định), POST mạnh mẽ và an toàn hơn GET
Url - Tệp trên máy chủ
Tham số url của phương thức open (), là địa chỉ của tệp trên máy chủ:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Tệp có thể là bất kỳ loại tệp nào, như .txt và .xml hoặc tệp kịch bản máy chủ như .asp và .php (có thể thực hiện các hành động trên máy chủ trước khi gửi phản hồi trở lại).
Không đồng bộ - Đúng hay Sai?
Để gửi yêu cầu không đồng bộ, tham số không đồng bộ của phương thức open () phải được đặt thành true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Gửi yêu cầu không đồng bộ là một cải tiến lớn đối với các nhà phát triển web. Nhiều tác vụ được thực hiện trên máy chủ rất tốn thời gian.
Bằng cách gửi không đồng bộ, JavaScript không phải đợi phản hồi của máy chủ mà thay vào đó 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ủ
- đối phó với phản hồi khi phản hồi đã sẵn sàng
Async = true
Khi sử dụng async = true, hãy chỉ định một hàm để thực thi khi phản hồi sẵn sàng trong sự kiện onreadystatechange:
Thí dụ
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = false
Để sử dụng async = false, hãy thay đổi tham số thứ ba trong phương thức open () thành false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Sử dụng async = false không được khuyến khích, nhưng đối với một số yêu cầu nhỏ, điều này có thể được.
Hãy nhớ rằng JavaScript sẽ KHÔNG tiếp tục thực thi, cho đến khi phản hồi của máy chủ sẵn sàng. Nếu máy chủ bận hoặc chậm, ứng dụng sẽ bị treo hoặc dừng.
Lưu ý: Khi bạn sử dụng async = false, KHÔNG viết hàm onreadystatechange - chỉ cần đặt mã sau câu lệnh send ():
Thí dụ
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Trình phân tích cú pháp XML
Tất cả các trình duyệt hiện đại đều có trình phân tích cú pháp XML tích hợp sẵn.
Mô hình đối tượng tài liệu XML (XML DOM) chứa rất nhiều phương pháp để truy cập và chỉnh sửa XML.
Tuy nhiên, trước khi một tài liệu XML có thể được truy cập, nó phải được tải vào một đối tượng XML DOM.
Một trình phân tích cú pháp XML có thể đọc văn bản thuần túy và chuyển đổi nó thành một đối tượng DOM XML.
Phân tích cú pháp một chuỗi văn bản
Ví dụ này phân tích cú pháp một chuỗi văn bản thành một đối tượng DOM XML và trích xuất thông tin từ nó bằng JavaScript:
Thí dụ
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Các trình duyệt cũ (IE5 và IE6)
Phiên bản cũ của Internet Explorer (IE5 và IE6) không hỗ trợ đối tượng XMLHttpRequest.
Để xử lý IE5 và IE6, hãy kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest hay không, nếu không hãy tạo một ActiveXObject:
Thí dụ
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Phiên bản cũ của Internet Explorer (IE5 và IE6) không hỗ trợ đối tượng DOMParser.
Để xử lý IE5 và IE6, hãy kiểm tra xem trình duyệt có hỗ trợ đối tượng DOMParser hay không, nếu không hãy tạo một ActiveXObject:
Thí dụ
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Các ví dụ khác
Truy xuất thông tin tiêu đề của một tài nguyên (tệp).
Truy xuất thông tin tiêu đề cụ thể của một tài nguyên (tệp).
Cách một trang web có thể giao tiếp với máy chủ web trong khi người dùng nhập ký tự vào trường nhập.
Cách một trang web có thể tìm nạp thông tin từ cơ sở dữ liệu với đối tượng XMLHttpRequest.
Tạo một XMLHttpRequest để truy xuất dữ liệu từ tệp XML và hiển thị dữ liệu trong bảng HTML.