AJAX - Công nghệ Động Định Hướng và XML

AJAX (Asynchronous JavaScript and XML) là một công nghệ được sử dụng để tạo ra các trang web động, cho phép trao đổi dữ liệu với máy chủ một cách đồng bộ mà không cần tải lại toàn bộ trang web. Điều này mang lại cho người dùng trải nghiệm mượt mà hơn, tương tự như ứng dụng máy tính桌面.

Giới thiệu về AJAX

AJAX không phải là một ngôn ngữ lập trình mới mà là một cách kết hợp các tiêu chuẩn hiện có để tạo ra các trang web động. Nó cho phép trình duyệt gửi yêu cầu và nhận phản hồi từ máy chủ một cách đồng bộ, mà không cần phải tải lại toàn bộ trang web. Điều này giúp cải thiện hiệu suất và trải nghiệm người dùng.

Chức năng của AJAX

AJAX có nhiều chức năng quan trọng như:

Thực hiện AJAX

Để thực hiện AJAX, bạn cần sử dụng đối tượng XMLHttpRequest. Dưới đây là các bước cơ bản để thực hiện AJAX:

1. Chuẩn bị địa chỉ dữ liệu: Ví dụ: https://yapi.pro/mock/380899/usergetid
2. Tạo đối tượng XMLHttpRequest: var xhr = new XMLHttpRequest();
3. Gửi yêu cầu đến máy chủ: xhr.open('GET', 'https://yapi.pro/mock/380899/usergetid');
4. Thiết lập xử lý phản hồi: xhr.onreadystatechange = function() { ... }
5. Gửi yêu cầu: xhr.send();

Điều khiển phản hồi

Để xử lý phản hồi từ máy chủ, bạn có thể sử dụng phương thức onreadystatechange của đối tượng XMLHttpRequest. Dưới đây là một ví dụ:

function getdata() {  // 1. Tạo đối tượng XMLHttpRequest  var xhr = new XMLHttpRequest();  // 2. Gửi yêu cầu đến máy chủ\n  xhr.open('GET', 'https://yapi.pro/mock/380899/usergetid');  // 3. Thiết lập xử lý phản hồi  xhr.onreadystatechange = function() {    if (xhr.readyState == XMLHttpRequest.DONE) {      if (xhr.status == 200) {        // Xử lý phản hồi        var data = JSON.parse(xhr.responseText);        document.getElementById('div1').innerHTML = data.name;      }    }  };  // 4. Gửi yêu cầu  xhr.send();}

jQuery và AJAX

jQuery cung cấp các phương thức để dễ dàng thực hiện AJAX. Một trong những phương thức phổ biến nhất là $.ajax:

$.ajax({  url: 'https://yapi.pro/mock/380899/usergetid',  type: 'GET',  success: function(data) {    document.getElementById('div1').innerHTML = data.name;  }});

AJAX và Vue.js

Vue.js cũng hỗ trợ AJAX thông qua các phương thức như axios hoặc fetch:

axios.get('https://yapi.pro/mock/380899/usergetid')  .then(function(response) {    document.getElementById('div1').innerHTML = response.data.name;  })  .catch(function(error) {    console.log(error);  });

Giới hạn của AJAX

AJAX có một số giới hạn như: