Изменяется ли адресная строка в зависимости от типа запроса

Изменение адресной строки в зависимости от типа запроса

Адресная строка (URL) в браузере изменяется в зависимости от типа запроса. Это один из ключевых моментов в веб-разработке, который влияет на SEO, навигацию и поведение браузера.

Типы запросов и изменение URL

1. GET и POST запросы (обычные навигационные запросы)

Когда ты отправляешь GET или POST форму через обычную навигацию (кликаешь на ссылку или отправляешь форму), браузер создаёт новый HTTP запрос и ИЗМЕНЯЕТ адресную строку:

<!-- Обычная ссылка (GET запрос) -->
<a href="/users/123">Профиль пользователя</a>

<!-- Форма (GET или POST) -->
<form action="/search" method="GET">
  <input type="text" name="q" />
  <button>Поиск</button>
</form>

В обоих случаях браузер:

• Отправляет запрос на сервер
• Перезагружает страницу
• ИЗМЕНЯЕТ URL в адресной строке
• Создаёт запись в истории браузера

2. AJAX/Fetch запросы (асинхронные запросы)

Когда используется AJAX или Fetch API для отправки данных, браузер НЕ перезагружает страницу и НЕ ИЗМЕНЯЕТ адресную строку:

// AJAX запрос (jQuery) — URL НЕ меняется
$.ajax({
  url: '/api/users/123',
  method: 'POST',
  data: { name: 'Иван' },
  success: function(response) {
    console.log('Данные отправлены');
    // URL остаётся неизменным
  }
});

// Fetch запрос — URL НЕ меняется
fetch('/api/users/123', {
  method: 'POST',
  body: JSON.stringify({ name: 'Иван' }),
  headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => console.log(data));

Данные отправляются без перезагрузки страницы, URL остаётся прежним.

3. SPA (Single Page Application) и History API

В современных SPA приложениях (React, Vue, Angular) можно менять URL ВРУЧНУЮ, используя History API, БЕЗ перезагрузки страницы:

// Изменить URL (добавить запись в историю)
window.history.pushState({ id: 123 }, 'User Profile', '/users/123');

// Изменить URL (заменить текущую запись в истории)
window.history.replaceState({ id: 123 }, 'User Profile', '/users/123');

// Вернуться на предыдущую страницу
window.history.back();

Как это работает в React (React Router)

import { useNavigate } from 'react-router-dom';

function UserProfile() {
  const navigate = useNavigate();

  const handleUpdateUser = async () => {
    // AJAX запрос — URL НЕ меняется
    const response = await fetch('/api/users/123', {
      method: 'POST',
      body: JSON.stringify({ name: 'Иван' })
    });

    // Вручную менять URL
    navigate('/users/456'); // URL ИЗМЕНИТСЯ
  };

  return <button onClick={handleUpdateUser}>Обновить профиль</button>;
}

Сравнение типов запросов

Практический пример: форма с AJAX

function SearchForm() {
  const [results, setResults] = React.useState([]);

  const handleSearch = async (e) => {
    e.preventDefault(); // Отменить перезагрузку формой
    const query = e.target.search.value;

    // AJAX запрос — URL НЕ изменяется
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    setResults(data);

    // Опционально: обновить URL вручную (для сохранения состояния)
    window.history.pushState({}, '', `/search?q=${query}`);
  };

  return (
    <form onSubmit={handleSearch}>
      <input name="search" type="text" />
      <button>Поиск</button>
      {/* Результаты рендерятся без перезагрузки */}
      {results.map(result => <div key={result.id}>{result.title}</div>)}
    </form>
  );
}

Изменение URL при GET запросах (Query параметры)

Если отправляешь GET запрос как обычную навигацию, URL ИЗМЕНЯЕТСЯ с параметрами:

// Ссылка с параметрами
<a href="/search?q=javascript&sort=date">Поиск</a>

// Форма с методом GET
<form action="/search" method="GET">
  <input name="q" value="javascript" />
  <input name="sort" value="date" />
  <button>Поиск</button>
</form>

// Результат: URL = /search?q=javascript&sort=date

POST запросы и URL

При POST запросе через обычную форму браузер тоже перезагружает страницу, но URL может НЕ содержать параметры (данные в теле запроса):

<form action="/api/login" method="POST">
  <input name="username" />
  <input name="password" type="password" />
  <button>Вход</button>
</form>

<!-- После отправки:
     - Отправляется POST запрос
     - URL может измениться (зависит от сервера)
     - Параметры НЕ видны в URL
-->

Важный момент: SPA и SEO

В SPA приложениях важно обновлять URL, даже при AJAX запросах, чтобы:

• Пользователь мог делиться ссылками
• История браузера работала (back/forward)
• SEO был лучше

// В React Router
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" element={<UserProfile />} />
        <Route path="/search" element={<SearchResults />} />
      </Routes>
    </BrowserRouter>
  );
}

// React Router автоматически обновляет URL
// при навигации через <Link> или navigate()

Резюме

URL изменяется при:

• Клике на обычную ссылку (<a href="...">)
• Отправке обычной формы (не AJAX)
• Вызове history.pushState()
• Навигации через React Router, Vue Router и т.д.

URL НЕ изменяется при:

• AJAX/Fetch запросах (но можно изменить вручную)
• Обновлении данных без навигации
• Изменении состояния компонента (state)

В современных SPA разработка обычно использует History API для синхронизации URL с состоянием приложения, что позволяет сохранять историю браузера и делиться ссылками.