Rate this post

Ajax (Asynchronous JavaScript and XML) là một kỹ thuật cho phép truy xuất dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang web. Nó sử dụng JavaScript để gửi và nhận dữ liệu từ máy chủ, và sử dụng XML hoặc các định dạng dữ liệu khác như JSON để lưu trữ dữ liệu. Ajax cho phép các trang web hoạt động như một ứng dụng động, với các tùy chọn như tải dữ liệu mới hoặc thay đổi nội dung trang web mà không cần tải lại toàn bộ trang. Điều này giúp tăng tốc độ và trải nghiệm người dùng trên các trang web.

Xem thêm AngularJS AJAX

Tóm tắt nội dung

Tại sao nên sử dụng ajax

Có nhiều lý do tại sao nên sử dụng Ajax trong các ứng dụng web:

Tăng tốc độ: Với Ajax, các trang web có thể tải dữ liệu mới hoặc thay đổi nội dung trang web mà không cần tải lại toàn bộ trang. Điều này giúp tăng tốc độ và trải nghiệm người dùng.
Tương tác người dùng: Với Ajax, các trang web có thể cập nhật nội dung trang web mà không cần tải lại toàn bộ trang. Điều này cho phép người dùng tương tác với trang web mà không cần chờ đợi cho trang web tải lại.
Tiết kiệm băng thông: Với Ajax, chỉ cần tải lại dữ liệu cần thiết thay vì toàn bộ trang web, giúp tiết kiệm băng thông và giảm thời gian tải trang.
Dễ dàng mở rộng: Với Ajax, các trang web có thể dễ dàng mở rộng với các tính năng mới mà không cần thay đổi cấu trúc cả trang.
Có thể sử dụng trên nhiều thiết bị: Ajax có thể được sử dụng trên nhiều thiết bị và trình duyệt khác nhau, giúp tăng tính tương thích của ứng dụng web.

Xem thêm Kiểm thử lỗ hổng bảo mật AJAX Security

Cách cài đặt Ajax

Để sử dụng Ajax trong trang web của mình, bạn cần thực hiện các bước sau:

Nhúng thư viện jQuery vào trang web của bạn (nếu chưa có).

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Tạo một file script để xử lý Ajax request và đưa dữ liệu trả về vào trang web của bạn.

Ví dụ:

<script>
  $(document).ready(function(){
    $("button").click(function(){
      $.ajax({url: "demo_test.txt", success: function(result){
        $("#div1").html(result);
      }});
    });
  });
</script>

Trong đoạn mã trên, chúng ta đang tạo một request Ajax bằng cách sử dụng phương thức $.ajax(). Đối số url xác định URL của tài nguyên mà chúng ta muốn tải lên. Đối số success xác định một hàm được thực thi khi request được gửi đi và trả về kết quả thành công. Trong ví dụ này, kết quả trả về là nội dung của tệp demo_test.txt, và chúng ta đang đặt nội dung đó vào một thẻ div có ID là div1.

Thêm HTML code để gọi đến Ajax request.

Ví dụ:

<button>Load Content</button>
<div id="div1"></div>

Trong ví dụ này, chúng ta đã tạo một nút “Load Content” để bắt đầu request Ajax, và một thẻ div có ID là div1 để đưa kết quả trả về vào đó.

Sau khi thực hiện các bước trên, bạn sẽ có thể sử dụng Ajax trong trang web của mình để tải dữ liệu mà không cần phải tải lại trang.

Xem thêm Laravel Vue JS Axios Post Request

Cách sử dụng ajax trong javascript

Để sử dụng Ajax trong JavaScript, ta cần sử dụng XMLHttpRequest (hoặc các thư viện ajax tương tự như jQuery, Axios, …). Các bước thông thường để sử dụng ajax là:

Tạo một đối tượng XMLHttpRequest: var xhr = new XMLHttpRequest();
Mở một kết nối đến máy chủ: xhr.open(‘GET’, ‘url’, true);
Đăng ký sự kiện cho việc trả về dữ liệu từ máy chủ: xhr.onreadystatechange = function(){…}
Gửi yêu cầu đến máy chủ: xhr.send();
Xử lý dữ liệu trả về từ máy chủ trong sự kiện onreadystatechange.

Ví dụ:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.send();

Các thư viện ajax như jQuery hoặc Axios cung cấp các API đơn giản hơn để sử dụng ajax.

Ví dụ:

$.ajax({
  method: "GET",
  url: "some.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    alert( "Data Saved: " + msg );
  });

Bạn có thể sử dụng ajax để gửi và nhận dữ liệu từ máy chủ mà không cần load lại trang web, giúp tăng tốc độ và trải nghiệm người dùng.

sử dụng ajax trong Axios

Axios là một thư viện JavaScript dùng để gửi các yêu cầu HTTP (GET, POST, PUT, DELETE, …) và nhận dữ liệu từ máy chủ. Axios hỗ trợ gửi các yêu cầu dạng AJAX.

Để sử dụng AJAX với Axios, bạn cần cài đặt thư viện Axios bằng npm hoặc yarn:

npm install axios

hoặc

yarn add axios

Sau khi cài đặt xong, bạn có thể sử dụng Axios trong ứng dụng của bạn bằng cách import nó:

import axios from 'axios';

Ví dụ sử dụng Axios để gửi yêu cầu GET:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

Ví dụ sử dụng Axios để gửi yêu cầu POST:

axios.post('https://jsonplaceholder.typicode.com/todos', {
    title: 'Learn Axios',
    completed: false
  })
  .then(response =&gt; {
    console.log(response.data);
  })
  .catch(error =&gt; {
    console.log(error);
  });

Các tùy chọn và tham số khác có thể tùy chỉnh trong axios.get hoặc axios.post để thực hiện những chức năng khác nhau.

Xem thêm Giao thức Mạng trong TCP/IP

sử dụng ajax trong Fetch API

Sử dụng Fetch API để gửi yêu cầu AJAX trong JavaScript cũng rất đơn giản. Bạn có thể sử dụng hàm fetch() để gửi yêu cầu và nhận được kết quả trả về. Ví dụ:

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

Trong ví dụ trên, chúng ta gửi yêu cầu tới địa chỉ https://example.com/data.json và trả về kết quả dưới dạng JSON. Kết quả được in ra trên console. Nếu có lỗi xảy ra, nó sẽ được in ra trên console.

Fetch API cung cấp rất nhiều tùy chọn khác nhau cho phép bạn cấu hình yêu cầu và xử lý kết quả trả về, bạn có thể tìm hiểu chi tiết trên internet hoặc các tài liệu liên quan

Kết luận về Ajax

Ajax là một công nghệ đóng vai trò quan trọng trong lĩnh vực phát triển web, cho phép trang web thực hiện các tác vụ phức tạp mà không cần phải tải lại trang. Nhờ vậy, các ứng dụng web có thể cung cấp trải nghiệm người dùng mượt mà hơn, tăng độ tương tác và tiết kiệm thời gian. Bên cạnh đó, Ajax cũng giúp tối ưu hóa tốc độ tải trang và giảm tải cho server. Với sự phát triển của công nghệ, Ajax cũng ngày càng được tích hợp trong các framework và thư viện phát triển web hiện đại, đem lại lợi ích và tiện ích cho những người phát triển web.

Xem thêm HTTP là gì?

JavaScript

Ajax là gì ?

Tại sao nên sử dụng ajax

Cách cài đặt Ajax

Cách sử dụng ajax trong javascript

Kết luận về Ajax

Trả lời Hủy