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

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

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

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

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

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

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

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

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

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 201) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
 
var data = { name: 'John Doe', email: 'johndoe@example.com' };
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:

var xhr = new XMLHttpRequest();
xhr.open('PUT', 'https://example.com/api/data/123', true);
xhr.setRequestHeader('Content-Type', 'application/json');
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
 
var data = { name: 'Jane Doe', email: 'janedoe@example.com' };
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 с некоторыми данными и и отправляем их на сервер.

var xhr = new XMLHttpRequest();
xhr.open('DELETE', 'https://example.com/api/data/123', true);
 
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log('Data deleted successfully');
  }
};
 
xhr.send();

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

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

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