Đối tượng XMLHttpRequest

Đối tượng XMLHttpRequest cung cấp phương pháp giao tiếp với máy chủ sau khi trang web được tải.

XMLHttpRequest là gì?

Đối tượng XMLHttpRequest làGiấc mơ của nhà phát triểnvì 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 đã được tải
  • Nhận dữ liệu từ máy chủ sau khi trang đã được tải
  • Gửi dữ liệu lên máy chủ trong nền

Tất cả các trình duyệt hiện đại đều hỗ trợ đối tượng XMLHttpRequest.

Mô hình:Giao tiếp XML HTTP với máy chủ khi nhập văn bản.

Tạo đối tượng XMLHttpRequest

Bằng một dòng mã JavaScript đơn giản, chúng ta có thể tạo đối tượng XMLHttpRequest.

Trong tất cả các trình duyệt hiện đại (bao gồm IE 7):

xmlhttp=new XMLHttpRequest()

Trong Internet Explorer 5 và 6:

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

Mô hình

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// mã cho tất cả các trình duyệt mới}
  xmlhttp=new XMLHttpRequest();
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
else if (window.ActiveXObject)
  {// mã cho IE5 và IE6}
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
else
  {
  alert("Your browser does not support XMLHTTP.");
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"}
  if (xmlhttp.status==200)
    {// 200 = OK}
    // ...mã của chúng ta ở đây...
    alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
  else
    {
    alert("Có vấn đề khi lấy dữ liệu XML");
    alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
}

Bằng cách sử dụng thuộc tính response.write để truyền kết quả trở lại client.

Ghi chú：onreadystatechange là một hàm sự kiện. Giá trị của nó (state_Change) là tên của một hàm, khi đối tượng XMLHttpRequest thay đổi trạng thái, sẽ kích hoạt hàm này. Trạng thái từ 0 (chưa khởi tạo) đến 4 (hoàn thành) thay đổi. Chỉ khi trạng thái là 4, chúng ta mới thực hiện mã.

Tại sao sử dụng Async=true ?

Ví dụ của chúng tôi đã sử dụng "true" trong tham số thứ ba của phương pháp open().

Tham số này quy định yêu cầu có được xử lý theo cách đồng bộ hay không.

True có nghĩa là script sẽ tiếp tục thực thi sau phương pháp send(), mà không chờ phản hồi từ máy chủ.

Sự kiện onreadystatechange làm phức tạp hóa mã. Nhưng đây là phương pháp an toàn nhất để ngăn chặn mã dừng lại khi không nhận được phản hồi từ máy chủ.

Bằng cách đặt tham số này thành "false", bạn có thể bỏ qua mã onreadystatechange bổ sung. Nếu việc thực thi mã khác không quan trọng khi yêu cầu thất bại, bạn có thể sử dụng tham số này.

Bằng cách sử dụng thuộc tính response.write để truyền kết quả trở lại client.

Các ví dụ khác

Ch载入 một tệp textfile vào một phần tử div bằng XML HTTP

Thực hiện yêu cầu HEAD bằng XML HTTP

Thực hiện yêu cầu HEAD cụ thể bằng XML HTTP

Danh sách dữ liệu trong tệp XML bằng XML HTTP

XML / ASP

Bạn cũng có thể mở và gửi XML tài liệu lên trang ASP trên máy chủ, phân tích yêu cầu này, sau đó truyền lại kết quả.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  {// mã cho IE7, Firefox, Opera, v.v.
  xmlHttp=new XMLHttpRequest();
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
else if (window.ActiveXObject)
  {// mã cho IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
else
  {
  alert("Your browser does not support XMLHTTP.");
  alert("Trình duyệt của bạn không hỗ trợ XMLHTTP.");
}
</script>
</body>

</html>

Trang ASP, viết bằng VBScript:
<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
   for each x in xmldoc.documentElement.childNodes
if x.NodeName = "to" then name=x.text
next
response.write(name)

%>

Bằng cách sử dụng thuộc tính response.write để truyền kết quả trở lại client.

TIY

Đối tượng XMLHttpRequest có phải là tiêu chuẩn của W3C không?

Không có tiêu chuẩn đề xuất nào của W3C quy định đối tượng XMLHttpRequest.

Tuy nhiên, quy định "Load and Save" của W3C DOM Level 3 chứa một số chức năng tương tự, nhưng chưa có trình duyệt nào thực hiện chúng.

Xem thêm