AJAX và JavaScript

AJAX (Asynchronous JavaScript and XML) là một kỹ thuật lập trình web cho phép gửi và nhận dữ liệu từ máy chủ mà không cần tải lại trang web hoàn toàn. AJAX thường được sử dụng để cập nhật dữ liệu trên trang web mà không làm gián đoạn trải nghiệm của người dùng.

JavaScript là một trong những công nghệ được sử dụng để triển khai AJAX. Khi sử dụng JavaScript, chúng ta có thể tạo một đối tượng XMLHttpRequest để gửi yêu cầu đến máy chủ và xử lý phản hồi của máy chủ. Sau khi nhận được phản hồi từ máy chủ, chúng ta có thể sử dụng JavaScript để cập nhật dữ liệu trên trang web mà không cần tải lại toàn bộ trang.

Dưới đây là một ví dụ đơn giản về cách sử dụng AJAX để gửi yêu cầu đến máy chủ và xử lý phản hồi bằng JavaScript:

<!DOCTYPE html>
<html>
  <head>
    <title>Example of using AJAX with JavaScript</title>
  </head>
  <body>
    <h1 id="myHeading">Click the button to load data from server:</h1>
    <button id="myButton">Load Data</button>
    <div id="myData"></div>
    
    <script>
      const button = document.getElementById("myButton");
      const dataDiv = document.getElementById("myData");
      
      button.addEventListener("click", function() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");
        xhr.onload = function() {
          if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            dataDiv.innerHTML = "Title: " + data.title + "<br>" + "Body: " + data.body;
          } else {
            dataDiv.innerHTML = "Error: " + xhr.status;
          }
        };
        xhr.send();
      });
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta sử dụng JavaScript để thêm một sự kiện click cho nút “Load Data”. Khi người dùng nhấn vào nút, chúng ta tạo một đối tượng XMLHttpRequest và sử dụng phương thức open để gửi yêu cầu đến máy chủ. Sau đó, chúng ta xử lý phản hồi từ máy chủ bằng cách sử dụng phương thức onload. Nếu phản hồi thành công, chúng ta sử dụng JSON.parse để chuyển đổi dữ liệu phản hồi sang đối tượng JavaScript và cập nhật nội dung của div có id là “myData”. Nếu xảy ra lỗi, chúng ta cũng cập nhật nội dung của div để hiển thị thông báo lỗi.

Dưới đây là một ví dụ khác về cách sử dụng AJAX và JavaScript để tải dữ liệu từ API và hiển thị kết quả trên trang web.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of using AJAX with JavaScript</title>
  </head>
  <body>
    <h1>Search for photos:</h1>
    <form>
      <input type="text" id="query" placeholder="Enter search terms...">
      <button type="submit">Search</button>
    </form>
    <div id="results"></div>
    
    <script>
      const form = document.querySelector("form");
      const input = document.getElementById("query");
      const resultsDiv = document.getElementById("results");
      
      form.addEventListener("submit", function(event) {
        event.preventDefault();
        const query = input.value;
        const xhr = new XMLHttpRequest();
        xhr.open("GET", `https://api.unsplash.com/search/photos?page=1&query=${query}&client_id=YOUR_ACCESS_KEY`);
        xhr.onload = function() {
          if (xhr.status === 200) {
            const data = JSON.parse(xhr.responseText);
            displayResults(data.results);
          } else {
            resultsDiv.innerHTML = "Error: " + xhr.status;
          }
        };
        xhr.send();
      });
      
      function displayResults(results) {
        resultsDiv.innerHTML = "";
        results.forEach(function(result) {
          const img = document.createElement("img");
          img.src = result.urls.small;
          resultsDiv.appendChild(img);
        });
      }
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta tạo một form để người dùng có thể nhập vào các thuật ngữ tìm kiếm. Khi người dùng nhấn nút “Search” hoặc enter, chúng ta sử dụng JavaScript để gửi yêu cầu AJAX đến API của Unsplash để tìm kiếm các hình ảnh liên quan đến các thuật ngữ đó. Sau khi nhận được phản hồi, chúng ta sử dụng phương thức displayResults để cập nhật nội dung của div có id là “results” và hiển thị các hình ảnh liên quan đến các thuật ngữ tìm kiếm.

JavaScript, jQuery

AJAX và JavaScript

Trả lời Hủy