Что такое AJAX?

Что такое AJAX

AJAX (Asynchronous JavaScript and XML) - это техника, которая позволяет веб-приложениям отправлять запросы на сервер и получать данные БЕЗ перезагрузки страницы. Это революционизировало пользовательский опыт в веб.

История AJAX

Термин "AJAX" был придуман в 2005 году, но техника использовалась раньше. Первым известным примером был Outlook Web Access (OWA) от Microsoft, который использовал XMLHttpRequest для асинхронной загрузки писем.

До AJAX веб выглядел так:

1. Пользователь кликает кнопку
2. Браузер отправляет POST запрос
3. Сервер обрабатывает и возвращает новую HTML страницу
4. Браузер перезагружает страницу

С AJAX:

1. Пользователь кликает кнопку
2. JavaScript отправляет запрос в фоне
3. Сервер возвращает JSON
4. JavaScript обновляет только нужную часть страницы

Как это работает

В старые времена (до Fetch API) использовали XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/users');
xhr.onload = function() {
  if (xhr.status === 200) {
    const users = JSON.parse(xhr.responseText);
    console.log(users);
  }
};
xhr.onerror = function() {
  console.error('Error loading data');
};
xhr.send();

Сегодня Fetch API намного удобнее:

fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Или с async/await (еще удобнее):

async function loadUsers() {
  try {
    const response = await fetch('/api/users');
    const users = await response.json();
    console.log(users);
  } catch (error) {
    console.error('Error:', error);
  }
}

Примеры использования AJAX в реальных приложениях

Поиск в реальном времени:

const [query, setQuery] = useState('');
const [results, setResults] = useState([]);

const handleSearch = async (searchTerm: string) => {
  setQuery(searchTerm);
  if (searchTerm.length < 2) return;
  
  try {
    const response = await fetch(`/api/search?q=${searchTerm}`);
    const data = await response.json();
    setResults(data);
  } catch (error) {
    console.error('Search failed:', error);
  }
};

Загрузка данных при скролле:

const [posts, setPosts] = useState([]);
const [page, setPage] = useState(1);
const [loading, setLoading] = useState(false);

const loadMorePosts = async () => {
  setLoading(true);
  try {
    const response = await fetch(`/api/posts?page=${page}`);
    const newPosts = await response.json();
    setPosts([...posts, ...newPosts]);
    setPage(page + 1);
  } finally {
    setLoading(false);
  }
};

Важные концепции

Асинхронность - AJAX запросы не блокируют UI. Пока данные загружаются, пользователь может взаимодействовать со страницей.

Content-Type и JSON - хотя AJAX расшифровывается как XML, сегодня используют JSON вместо XML.

CORS - браузер защищает пользователей от запросов на другие домены. Сервер должен вернуть правильные CORS headers.

Обработка ошибок - AJAX запросы могут не только вернуть ошибку от сервера (500), но и упасть из-за сетевых проблем.

Современный подход

Сегодня вместо чистого AJAX используют библиотеки:

Axios - удобная библиотека для HTTP запросов:

import axios from 'axios';

const users = await axios.get('/api/users');
console.log(users.data);

React Query - управление состоянием серверных данных:

const { data, isLoading } = useQuery({
  queryKey: ['users'],
  queryFn: () => fetch('/api/users').then(r => r.json())
});

Заключение

AJAX - это фундаментальная техника веб-разработки, которая позволяет обновлять страницу без перезагрузки и делает приложения быстрее и отзывчивее.