Chúng tôi có thể sử dụng AJAX mà không cần JavaScript không?

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ủ

Để 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, bởi 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
• 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ẽ nhận được lỗi "quyền bị từ chối" khi gọi tới số

  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ố của phương thức

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

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

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

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.
};

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

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

httpRequest.onreadystatechange = nameOfTheFunction;

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();

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

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

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

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 đó

• "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

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

• "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

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

  "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

  3 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ỉ có hiệu lực 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();

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,

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

<button id="ajaxButton" type="button">Make a requestbutton>

<script>
  (() => {
    let httpRequest;
    document
      .getElementById("ajaxButton")
      .addEventListener("click", makeRequest);

    function makeRequest() {
      httpRequest = new XMLHttpRequest();

      if (!httpRequest) {
        alert("Giving up :( Cannot create an XMLHTTP instance");
        return false;
      }
      httpRequest.onreadystatechange = alertContents;
      httpRequest.open("GET", "test.html");
      httpRequest.send();
    }

    function alertContents() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          alert(httpRequest.responseText);
        } else {
          alert("There was a problem with the request.");
        }
      }
    }
  })();
script>

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

  "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

  8;
• 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

  httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  

  0;

• httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  

  0 kiểm tra xem đã nhận được phản hồi và OK chưa, sau đó

  "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

  7 nội dung của tệp

  "name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
  

  6

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 đề

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

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

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Ghi chú. Nếu biến

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

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.
};

httpRequest.onreadystatechange = nameOfTheFunction;

httpRequest.onreadystatechange = nameOfTheFunction;

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

httpRequest.onreadystatechange = handler;

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

httpRequest.onreadystatechange = nameOfTheFunction;

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

httpRequest.onreadystatechange = nameOfTheFunction;

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 (

httpRequest.onreadystatechange = nameOfTheFunction;

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

httpRequest.onreadystatechange = handler;

Tiếp theo, trong

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

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

httpRequest.onreadystatechange = handler;

Sau đó, trong

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.onreadystatechange = nameOfTheFunction;

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

httpRequest.onreadystatechange = handler;

Đoạn mã này lấy đối tượng

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

httpRequest.onreadystatechange = nameOfTheFunction;

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,

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

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ó đến hàm

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

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

httpRequest.onreadystatechange = handler;

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

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

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

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

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

httpRequest.onreadystatechange = handler;

Hàm

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

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

httpRequest.onreadystatechange = handler;

Để sử dụng dữ liệu này trong phạm vi

httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

httpRequest.onreadystatechange = nameOfTheFunction;

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

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

httpRequest.onreadystatechange = handler;

Tệp

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

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)

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

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

Điều này được lặp lại sau mỗi 5 giây, sử dụng lệnh gọi

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

AJAX có yêu cầu JavaScript không?

AJAX có hoạt động nếu JavaScript bị tắt không?

Có thể sử dụng AJAX mà không cần jQuery không?

AJAX có thể hoạt động độc lập không?