DOM - Đối tượng XMLHttpRequest
Đối tượng XMLHttpRequest thiết lập một phương tiện giữa phía máy khách và phía máy chủ của trang web có thể được sử dụng bởi nhiều ngôn ngữ kịch bản như JavaScript, JScript, VBScript và trình duyệt web khác để truyền và thao tác dữ liệu XML.
Với đối tượng XMLHttpRequest, có thể cập nhật một phần của trang web mà không cần tải lại toàn bộ trang, yêu cầu và nhận dữ liệu từ máy chủ sau khi trang đã được tải và gửi dữ liệu đến máy chủ.
Cú pháp
Một đối tượng XMLHttpRequest có thể được cài đặt như sau:
xmlhttp = new XMLHttpRequest();Để xử lý tất cả các trình duyệt, bao gồm IE5 và IE6, hãy kiểm tra xem trình duyệt có hỗ trợ đối tượng XMLHttpRequest như bên dưới hay không:
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}Có thể tham khảo các ví dụ để tải tệp XML bằng đối tượng XMLHttpRequest tại đây
Phương pháp
Bảng sau liệt kê các phương thức của đối tượng XMLHttpRequest:
| Không. | Phương pháp & Mô tả |
|---|---|
| 1 | abort() Chấm dứt yêu cầu hiện tại được thực hiện. |
| 2 | getAllResponseHeaders() Trả về tất cả các tiêu đề phản hồi dưới dạng một chuỗi hoặc null nếu không có phản hồi nào được nhận. |
| 3 | getResponseHeader() Trả về chuỗi chứa văn bản của tiêu đề được chỉ định hoặc null nếu phản hồi chưa được nhận hoặc tiêu đề không tồn tại trong phản hồi. |
| 4 | open(method,url,async,uname,pswd) Nó được sử dụng kết hợp với phương thức Gửi để gửi yêu cầu đến máy chủ. Phương thức mở chỉ định các tham số sau:
|
| 5 | send(string) Nó được sử dụng để gửi yêu cầu làm việc liên hợp với phương thức Open. |
| 6 | setRequestHeader() Header chứa cặp nhãn / giá trị mà yêu cầu được gửi đến. |
Thuộc tính
Bảng sau liệt kê các thuộc tính của đối tượng XMLHttpRequest:
| Không. | Thuộc tính & Mô tả |
|---|---|
| 1 | onreadystatechange Nó là một thuộc tính dựa trên sự kiện được đặt ở mọi thay đổi trạng thái. |
| 2 | readyState Điều này mô tả trạng thái hiện tại của đối tượng XMLHttpRequest. Có năm trạng thái có thể có của thuộc tính readyState -
|
| 3 | responseText Thuộc tính này được sử dụng khi phản hồi từ máy chủ là tệp văn bản. |
| 4 | responseXML Thuộc tính này được sử dụng khi phản hồi từ máy chủ là tệp XML. |
| 5 | status Cung cấp trạng thái của đối tượng yêu cầu Http dưới dạng số. Ví dụ: "404" hoặc "200". |
| 6 | statusText Cung cấp trạng thái của đối tượng yêu cầu Http dưới dạng một chuỗi. Ví dụ: "Không tìm thấy" hoặc "OK". |
Ví dụ
nội dung node.xml như bên dưới:
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>Truy xuất thông tin cụ thể của tệp tài nguyên
Ví dụ sau minh họa cách truy xuất thông tin cụ thể của tệp tài nguyên bằng phương thức getResponseHeader () và thuộc tính readState .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>Chấp hành
Lưu tệp này dưới dạng elementattribute_removeAttributeNS.htm trên đường dẫn máy chủ (tệp này và node_ns.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Chúng ta sẽ nhận được kết quả như hình dưới đây -
Before removing the attributeNS: en
After removing the attributeNS: nullTruy xuất thông tin tiêu đề của tệp tài nguyên
Ví dụ sau minh họa cách truy xuất thông tin tiêu đề của tệp tài nguyên, sử dụng phương pháp getAllResponseHeaders() sử dụng tài sản readyState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>Chấp hành
Lưu tệp này dưới dạng http_allheader.html trên đường dẫn máy chủ (tệp này và node.xml phải nằm trên cùng một đường dẫn trong máy chủ của bạn). Chúng ta sẽ nhận được kết quả như hình bên dưới (phụ thuộc vào trình duyệt) -
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml