AJAX — мечта разработчика, потому что вы можете:
- Обновите веб-страницу без перезагрузки страницы
- Запросить данные с сервера — после загрузки страницы
- Получить данные с сервера — после загрузки страницы
- Отправка данных на сервер — в фоновом режиме
Теперь разберитесь с теорией на примере, если все еще есть сомнения
// Create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();
// Configure the request by specifying the HTTP method (GET, POST, etc.) and the URL endpoint
xhr.open('GET', 'https://api.example.com/data', true);
// Define a callback function to handle the response
xhr.onload = function() {
// Check if the request was successful (status code 200 indicates success)
if (xhr.status === 200) {
// Process the response data
var responseData = xhr.responseText;
console.log(responseData);
} else {
console.error('Request failed with status:', xhr.status);
}
};
// Define a callback function to handle any error that occurs during the request
xhr.onerror = function() {
console.error('Request failed.');
};
// Send the request to the server
xhr.send();
Пояснение:
Создайте новый объект XMLHttpRequest. Объект XMLHttpRequest — это ключевой компонент AJAX, который позволяет нам выполнять HTTP-запросы из браузера.
Настройте запрос: используйте открытый метод, чтобы указать метод HTTP (GET, POST и т. д.) и конечную точку URL. Третий параметр, установленный в значение true, указывает, что запрос должен быть асинхронным.
Определите функцию обратного вызова для события onload: эта функция будет вызываться при получении ответа. Он проверяет, был ли запрос успешным (код состояния 200), и соответствующим образом обрабатывает данные ответа.
Определите функцию обратного вызова для события onerror: эта функция будет вызываться, если во время запроса произойдет ошибка, например сбой сети.
Отправить запрос: используйте метод send для отправки запроса на сервер.
Пример из реальной жизни: допустим, у вас есть веб-страница, на которой отображаются обновления погоды в режиме реального времени. Вы можете использовать AJAX для получения данных о погоде с удаленного сервера без перезагрузки всей страницы. Запрос AJAX будет отправлен на конечную точку API сервера, которая предоставляет информацию о погоде. После получения ответа страница может динамически обновляться, чтобы отображать последние погодные условия.
Примечание. AJAX не ограничивается данными XML. Несмотря на название, его можно использовать для отправки и получения данных в различных форматах, таких как JSON, обычный текст или HTML.
СКОПИРУЙТЕ ЭТОТ ПРИМЕР И ПРОВЕРЬТЕ В РЕАКТОРЕ
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
<script>
function getData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.publicapis.org/entries', true);
xhr.onload = function() {
if (xhr.status === 200) {
var responseData = xhr.responseText;
document.getElementById('result').textContent = responseData;
} else {
console.error('Request failed with status:', xhr.status);
}
};
xhr.onerror = function() {
console.error('Request failed.');
};
xhr.send();
}
</script>
</head>
<body>
<button onclick="getData()">Get Data</button>
<div id="result"></div>
</body>
</html>
- - - - - - - - - - - - - -Конец - - - - - - - - - - - -
Если вам понравилось читать этот блог, поделитесь им с друзьями и не забудьте подписаться на наш канал YouTube, чтобы получать больше интересного контента. Помогите нам рассказать о нашем опыте в разработке стека MERN, облачных вычислениях, React Native и Next.js, и следите за новостями, чтобы не пропустить новые информативные статьи. Вместе мы можем покорить мир технологий!
В разделе Проекты Mern Stack вы можете найти учебные пособия, советы, шпаргалки и другие проекты. Наши доклады также касаются фреймворков React, таких как NextJs и AWS Cloud. Присоединяйтесь к нам сегодня, чтобы быть в курсе новейших технологий🩷
📠 🏅:- Проекты Mern Stack
🎦 🥇:- Дневник Джары — YouTube 🚦
🎦 🥈 :- Эррормания — YouTube 🚦
На GITHUB:- raj-28 (Raj) (github.com)
💌 Подпишитесь на нашу рассылку, чтобы быть в курсе всех новых блогов 👍
…………🚦…🛣… ……………🚧🛑………………..▶……………….️
Используйте смайлики отсюда, если вам нужны….🚦🛣️🥇🥈🥉🏅🎖️🎦👍
