Виды ajax запросов в javascript

Опубликовано 2023.02.03

В JavaScript есть 4 основных типа AJAX запросов:

  • GET: используется для получения данных из сервера.
  • POST: используется для отправки данных на сервер.
  • PUT: используется для обновления данных на сервере.
  • DELETE: используется для удаления данных с сервера.

Вот пример AJAX GET запроса на JavaScript с использованием XMLHttpRequest:

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('GET', 'https://example.com/data.json', true);
  3.  
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  6. var response = JSON.parse(xhr.responseText);
  7. console.log(response);
  8. }
  9. };
  10.  
  11. xhr.send();

В этом примере, сначала создается объект XMLHttpRequest, затем вызывается метод open с параметрами: 'GET', 'https://example.com/data.json' и true (открыть запрос асинхронно).

Далее, устанавливается функция onreadystatechange, которая вызывается при каждом изменении состояния запроса. Если состояние запроса равно DONE и статус ответа равен 200 (успешный ответ), то мы парсим ответ с сервера как JSON и выводим его в консоль.

Наконец, вызывается метод send для отправки запроса.

Пример AJAX POST запроса на JavaScript с использованием XMLHttpRequest:

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('POST', 'https://example.com/api/data', true);
  3. xhr.setRequestHeader('Content-Type', 'application/json');
  4.  
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {
  7. var response = JSON.parse(xhr.responseText);
  8. console.log(response);
  9. }
  10. };
  11.  
  12. var data = { name: 'John Doe', email: 'johndoe@example.com' };
  13. xhr.send(JSON.stringify(data));

В этом примере, сначала создается объект XMLHttpRequest, затем вызывается метод open с параметрами: 'POST', 'https://example.com/api/data' и true (открыть запрос асинхронно).

Затем, мы устанавливаем заголовок Content-Type в 'application/json', чтобы указать серверу, что мы отправляем JSON данные.

Далее, устанавливается функция onreadystatechange, которая вызывается при каждом изменении состояния запроса. Если состояние запроса равно DONE и статус ответа равен 201 (успешно создан), то мы парсим ответ с сервера как JSON и выводим его в консоль.

Наконец, мы создаем объект data с некоторыми данными и отправляем их на сервер.

Пример AJAX PUT запроса на JavaScript с использованием XMLHttpRequest:

  1. var xhr = new XMLHttpRequest();
  2. xhr.open('PUT', 'https://example.com/api/data/123', true);
  3. xhr.setRequestHeader('Content-Type', 'application/json');
  4.  
  5. xhr.onreadystatechange = function() {
  6. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  7. var response = JSON.parse(xhr.responseText);
  8. console.log(response);
  9. }
  10. };
  11.  
  12. var data = { name: 'Jane Doe', email: 'janedoe@example.com' };
  13. xhr.send(JSON.stringify(data));

В этом примере, сначала создается объект XMLHttpRequest, затем вызывается метод open с параметрами: 'PUT', 'https://example.com/api/data/123' и true (открыть запрос асинхронно).

Затем, мы устанавливаем заголовок Content-Type в 'application/json', чтобы указать серверу, что мы отправляем JSON данные.

Далее, устанавливается функция onreadystatechange, которая вызывается при каждом изменении состояния запроса. Если состояние запроса равно DONE и статус ответа равен 200 (успешно обновлен), то мы парсим ответ с сервера как JSON и выводим его в консоль.

Наконец, мы создаем объект data с некоторыми данными и и отправляем их на сервер.

И заключительный пример AJAX DELETE запроса на JavaScript с использованием XMLHttpRequest:
  1. var xhr = new XMLHttpRequest();
  2. xhr.open('DELETE', 'https://example.com/api/data/123', true);
  3.  
  4. xhr.onreadystatechange = function() {
  5. if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
  6. console.log('Data deleted successfully');
  7. }
  8. };
  9.  
  10. xhr.send();

В этом примере, сначала создается объект XMLHttpRequest, затем вызывается метод open с параметрами: 'DELETE', 'https://example.com/api/data/123' и true (открыть запрос асинхронно).

Затем, устанавливается функция onreadystatechange, которая вызывается при каждом изменении состояния запроса. Если состояние запроса равно DONE и статус ответа равен 200 (успешно удален), то мы выводим сообщение в консоль.

Наконец, вызывается метод send без параметров, так как нет данных, которые нужно отправить вместе с запросом.