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:

  • method - chỉ định loại yêu cầu tức là Nhận hoặc Đăng.

  • url - đó là vị trí của tệp.

  • async- chỉ ra cách yêu cầu nên được xử lý. Nó là giá trị boolean. Ở đâu,

    • 'true' có nghĩa là yêu cầu được xử lý không đồng bộ mà không cần đợi phản hồi Http.

    • 'false' có nghĩa là yêu cầu được xử lý đồng bộ sau khi nhận được phản hồi Http.

  • uname - là tên người dùng.

  • pswd - là mật khẩu.

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 -

  • readyState = 0 - có nghĩa là yêu cầu vẫn chưa được khởi tạo.

  • readyState = 1 - yêu cầu được đặt ra.

  • readyState = 2 - yêu cầu được gửi đi.

  • readyState = 3 - yêu cầu đang được xử lý.

  • readyState = 4 - yêu cầu được hoàn thành.

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: null

Truy 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