Làm cách nào để nhận HTML trong AJAX?

AJAX là gì?

AJAX là viết tắt của JavaScript và XML không đồng bộ. Tóm lại, đó là việc sử dụng đối tượng

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

Hai tính năng chính của AJAX cho phép bạn thực hiện những việc sau

• Gửi yêu cầu đến máy chủ mà không cần tải lại trang
• Nhận và làm việc với dữ liệu từ máy chủ

Bước 1 – Cách tạo một yêu cầu HTTP

Để thực hiện một yêu cầu HTTP tới máy chủ bằng JavaScript, bạn cần một phiên bản của một đối tượng có chức năng cần thiết. Đây là nơi mà

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

Sau khi thực hiện yêu cầu, bạn sẽ nhận được phản hồi. Ở giai đoạn này, bạn cần báo cho đối tượng

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Lưu ý rằng không có dấu ngoặc đơn hoặc tham số sau tên hàm, vì bạn đang gán tham chiếu cho hàm chứ không thực sự gọi nó. Ngoài ra, thay vì đặt tên hàm, bạn có thể sử dụng kỹ thuật JavaScript để xác định hàm một cách nhanh chóng (được gọi là "hàm ẩn danh") để xác định các hành động sẽ xử lý phản hồi, như sau

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

Tiếp theo, sau khi khai báo điều gì sẽ xảy ra khi bạn nhận được phản hồi, bạn cần thực sự thực hiện yêu cầu, bằng cách gọi các phương thức

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

• Tham số đầu tiên của lệnh gọi tới

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  6 là phương thức yêu cầu HTTP – GET, POST, HEAD hoặc phương thức khác được máy chủ của bạn hỗ trợ. Giữ phương thức viết hoa tất cả theo tiêu chuẩn HTTP, nếu không một số trình duyệt (như Firefox) có thể không xử lý yêu cầu. Để biết thêm thông tin về các phương thức yêu cầu HTTP có thể có, hãy kiểm tra thông số kỹ thuật
• Tham số thứ hai là URL bạn đang gửi yêu cầu tới. Là một tính năng bảo mật, theo mặc định, bạn không thể gọi URL trên miền của bên thứ ba. Đảm bảo sử dụng tên miền chính xác trên tất cả các trang của bạn, nếu không bạn sẽ gặp lỗi "quyền bị từ chối" khi gọi điện cho

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  6. Một cạm bẫy phổ biến là truy cập trang web của bạn bằng

  httpRequest.open('GET', 'http://www.example.org/some.file', true);
  httpRequest.send();
  

  0, nhưng lại cố gọi các trang bằng

  httpRequest.open('GET', 'http://www.example.org/some.file', true);
  httpRequest.send();
  

  1. Nếu bạn thực sự cần gửi yêu cầu đến một miền khác, hãy xem Kiểm soát truy cập HTTP (CORS)
• Tham số thứ ba tùy chọn đặt xem yêu cầu có không đồng bộ hay không. Nếu

  httpRequest.open('GET', 'http://www.example.org/some.file', true);
  httpRequest.send();
  

  2 (mặc định), việc thực thi JavaScript sẽ tiếp tục và người dùng có thể tương tác với trang trong khi phản hồi của máy chủ vẫn chưa đến. Đây là chữ A đầu tiên trong AJAX

Tham số cho phương thức

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

hoặc các định dạng khác, như

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

Lưu ý rằng nếu bạn muốn

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

Bước 2 – Xử lý phản hồi của máy chủ

Khi gửi yêu cầu, bạn đã cung cấp tên của hàm JavaScript để xử lý phản hồi

const httpRequest = new XMLHttpRequest();

Chức năng này nên làm gì? . Nếu trạng thái có giá trị là

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

const httpRequest = new XMLHttpRequest();

Danh sách đầy đủ các giá trị

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

• 0 (chưa được khởi tạo) hoặc (yêu cầu chưa được khởi tạo)
• 1 (đang tải) hoặc (đã thiết lập kết nối máy chủ)
• 2 (đã tải) hoặc (đã nhận yêu cầu)
• 3 (tương tác) hoặc (xử lý yêu cầu)
• 4 (hoàn thành) hoặc (yêu cầu đã hoàn thành và sẵn sàng phản hồi)

Tiếp theo, hãy kiểm tra mã trạng thái phản hồi HTTP của phản hồi HTTP. Các mã có thể được liệt kê tại W3C. Trong ví dụ sau, chúng tôi phân biệt giữa lệnh gọi AJAX thành công và không thành công bằng cách kiểm tra mã phản hồi

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

Sau khi kiểm tra trạng thái của yêu cầu và mã trạng thái HTTP của phản hồi, bạn có thể làm bất cứ điều gì bạn muốn với dữ liệu mà máy chủ đã gửi. Bạn có hai tùy chọn để truy cập dữ liệu đó

• httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  71 – trả về phản hồi của máy chủ dưới dạng một chuỗi văn bản

• httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  72 – trả về phản hồi dưới dạng đối tượng

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  73 mà bạn có thể duyệt bằng các hàm JavaScript DOM

Lưu ý rằng các bước trên chỉ hợp lệ nếu bạn đã sử dụng yêu cầu không đồng bộ (tham số thứ ba của

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

Bước 3 – Một ví dụ đơn giản

Hãy kết hợp tất cả lại với một yêu cầu HTTP đơn giản. JavaScript của chúng tôi sẽ yêu cầu một tài liệu HTML,

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

trong ví dụ này

• Người dùng nhấp vào nút "Đặt yêu cầu";
• Trình xử lý sự kiện gọi hàm

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  78;
• Yêu cầu được đưa ra và sau đó (

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  5) việc thực hiện được chuyển cho

  const httpRequest = new XMLHttpRequest();
  

  10;

• const httpRequest = new XMLHttpRequest();
  

  10 kiểm tra nếu nhận được phản hồi và OK, sau đó

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  77 nội dung của tệp

  httpRequest.onreadystatechange = () => {
      // Process the server response here.
  };
  

  76

Ghi chú. Nếu bạn đang gửi yêu cầu tới một đoạn mã sẽ trả về XML, thay vì tệp HTML tĩnh, bạn phải đặt tiêu đề phản hồi để hoạt động trong Internet Explorer. Nếu bạn không đặt tiêu đề

const httpRequest = new XMLHttpRequest();

Ghi chú. Nếu bạn không đặt tiêu đề

const httpRequest = new XMLHttpRequest();

Ghi chú. Nếu biến

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

Trong trường hợp xảy ra lỗi giao tiếp (chẳng hạn như máy chủ gặp sự cố), một ngoại lệ sẽ được đưa ra trong phương thức

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Bước 4 – Làm việc với phản hồi XML

Trong ví dụ trước, sau khi nhận được phản hồi cho yêu cầu HTTP, chúng tôi đã sử dụng thuộc tính

const httpRequest = new XMLHttpRequest();

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

Trước hết, hãy tạo một tài liệu XML hợp lệ mà chúng ta sẽ yêu cầu sau này. Tài liệu (

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Tiếp theo, trong

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Sau đó, trong

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Mã này lấy đối tượng

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

Bước 5 – Làm việc với dữ liệu

Cuối cùng, hãy gửi một số dữ liệu đến máy chủ và nhận phản hồi. Lần này, JavaScript của chúng tôi sẽ yêu cầu một trang động,

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

Trước tiên, chúng tôi sẽ thêm một hộp văn bản vào HTML của mình để người dùng có thể nhập tên của họ

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Chúng tôi cũng sẽ thêm một dòng vào trình xử lý sự kiện của mình để lấy dữ liệu của người dùng từ hộp văn bản và gửi nó tới hàm

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Chúng tôi cần sửa đổi

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

const httpRequest = new XMLHttpRequest();

httpRequest.open('GET', 'http://www.example.org/some.file', true);
httpRequest.send();

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Hàm

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Để sử dụng dữ liệu này trong

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Tệp

const httpRequest = new XMLHttpRequest();

function handler() {
  // Process the server response here.
}

httpRequest.onreadystatechange = handler;

Để biết thêm về các phương thức DOM, hãy nhớ xem Mô hình đối tượng tài liệu (DOM)

Ví dụ XHR hẹn giờ đơn giản

Một ví dụ đơn giản khác sau đây - ở đây chúng tôi đang tải một tệp văn bản qua XHR, cấu trúc của nó được giả định là như thế này

httpRequest.onreadystatechange = () => {
    // Process the server response here.
};

Sau khi tệp văn bản được tải, chúng tôi đưa 274 mục vào một mảng ở mỗi ký tự xuống dòng (

const httpRequest = new XMLHttpRequest();

Điều này được lặp lại cứ sau 5 giây, sử dụng cuộc gọi

const httpRequest = new XMLHttpRequest();

Làm cách nào để lấy nội dung HTML trong AJAX?

Làm cách nào để gọi HTML trong AJAX?

AJAX có hoạt động với HTML không?

Làm thế nào để viết mã HTML trong AJAX thành công?