Операции AJAX
Операции AJAX
«Операции AJAX» — бесплатный урок jQuery Academy на CoddyKit. Это урок 1 из 1. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения jQuery Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс jQuery Academy содержит 1 уроков всего.
Введение
Здравствуйте!
В этом уроке Вы узнаете, как взаимодействовать с удалённым сервером с помощью методов AJAX библиотеки jQuery.
AJAX (Asynchronous Javascript And XML) — это технология, которая позволяет асинхронно передавать данные с сервера и на сервер без обновления веб-страницы.
Это положительно влияет на удобство работы пользователя, особенно потому, что данные можно передавать без обновления страницы.
Пример AJAX
В частности, самые популярные веб-приложения в мире, такие как Facebook, Gmail и Youtube, часто используют технологию AJAX.
На самом деле, вместо того чтобы считать AJAX новой технологией, можно рассматривать его как метод асинхронной передачи данных между сервером и клиентом с помощью JavaScript.
Итак, рассмотрим пример функции, использующей AJAX.
Например, Вы посмотрели видео на youtube.com и нажали кнопку «Нравится». В этом случае событие нажатия кнопки «Нравится» в фоновом режиме передаётся на серверы youtube до обновления страницы youtube.
Это процесс, который выполняется с помощью AJAX-запроса.
Пример AJAX
Рассмотрим пример AJAX-запросов.
Ниже приведён код GET-запроса, выполненного с помощью AJAX к адресу https://api.coddykit.com/api/coddy-test
Он написан на чистом JavaScript с использованием VanillaJS и имеет довольно непростой синтаксис, как Вы можете заметить.
<div id="result"></div>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4
&& this.status == 200) {
//we are writing the AJAX request response
//to div element that has result id
var result = document.getElementById('result');
result.innerHTML = JSON.stringify(this.responseText);
}
};
xhttp.open("GET", "https://api.coddykit.com/api/coddy-test", true);
xhttp.send();
</script>Предупреждение
Как мы уже говорили, jQuery — это библиотека для изменения DOM, которая также предоставляет методы для упрощения операций AJAX.
Метод AJAX
У нас есть довольно простой способ управления AJAX-запросами с помощью jQuery.
С помощью метода ajax() мы можем легко использовать распространённые в веб-разработке HTTP-методы, такие как get, post или put.
Синтаксис метода Ajax выглядит следующим образом.
$.ajax ({
url: 'remote URL'.
data: 'Data that we will send',
method: 'HTTP Method - Default GET',
success: 'Here, we should define function that work when Ajax get success result',
dataType: 'Interaction data type'
});
Рассмотрим пример
<div id="result"></div>
<script>
$.ajax ({
url: 'https://api.coddykit.com/api/coddy-test',
success: function(data){
$('#result').text(JSON.stringify(data));
}
});
</script>Пример AJAX
GET-запрос AJAX
Теперь улучшим наш пример.
В примере ниже AJAX-запрос отправляется на URL (https://api.coddykit.com/api/coddy-test)
Если HTTP-метод не указан, по умолчанию выполняется GET-запрос.
const https = require('https');
function ajax(url) {
const callbacks = { success: [], fail: [], always: [] };
const req = https.get(url, (res) => {
let data = '';
res.on('data', chunk => data += chunk);
res.on('end', () => {
callbacks.success.forEach(cb => cb(data));
callbacks.always.forEach(cb => cb());
});
});
req.on('error', (err) => {
callbacks.fail.forEach(cb => cb(err));
callbacks.always.forEach(cb => cb());
});
return {
done: function(cb) { callbacks.success.push(cb); return this; },
fail: function(cb) { callbacks.fail.push(cb); return this; },
always: function(cb) { callbacks.always.push(cb); return this; }
};
}
var ajaxReq = ajax("https://api.coddykit.com/api/coddy-test")
.done(function() {
//success callback
/*
If our get request is sent to
the server with success (HTTP 2xx),
this function is called.
*/
})
.fail(function() {
/* This function works
if the AJAX request fails.
*/
})
.always(function() {
/*
This function works in all cases when
the AJAX request is
successful or unsuccessful.
*/
});Метод get
Метод $.get() и GET-запрос
Мы можем использовать метод $.get() , чтобы отправить HTTP get-запрос на наши серверы.
Этот метод предоставляется библиотекой jQuery и позволяет отправлять GET-запрос, записывая более короткий и простой код по сравнению с VanillaJS.
Рассмотрим пример и обратите внимание, насколько короче стал код.
<div id="result"></div>
<script>
$.get("https://api.coddykit.com/api/coddy-test",
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Метод Post
Метод $.post() и Post-запрос
Мы можем использовать метод $.post() для отправки HTTP Post-запроса на наши серверы.
Создадим пример и обратим внимание, насколько короче стал код.
Мы будем часто использовать post-запросы, особенно при отправке веб-форм на сервер.
<div id="result"></div>
<script>
$.post("https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Post Request
{name:'Coddy', age: 3},
function(response) {
$('#result').text(JSON.stringify(response));
})
</script>Метод Put
Put-запрос
Мы можем использовать метод $.put() , чтобы отправить на наши серверы HTTP Put-запрос.
Рассмотрим пример.
<div id="result"></div>
<script>
$.ajax({
method:'PUT',
url:"https://api.coddykit.com/api/coddy-test",
//Please note that we can send data in body while we sending Put Request
data: {name:'Coddy', age: 3},
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Метод Delete
Delete-запрос
Мы можем использовать метод $.delete(), чтобы отправить на наши серверы HTTP Delete-запрос.
Рассмотрим пример
<div id="result"></div>
<script>
$.ajax({
method:'DELETE',
url:"https://api.coddykit.com/api/coddy-test",
success: function(response) {
$('#result').text(JSON.stringify(response));
}})
</script>Ссылка
Примеры и подробную информацию о методах AJAX можно найти по ссылке ниже.
Поздравляем
Поздравляем 🎉
В этом разделе мы изучили AJAX с помощью jQuery
Спасибо, что присоединились к нам на курсе «jQuery для начинающих» 🎉🎉🎉
Теперь вы можете пройти экзамен и получить сертификат за курс «Учебник по jQuery для начинающих» 🚀🚀🚀
Часто задаваемые вопросы
Урок «Операции AJAX» бесплатный?
Да — полный текст урока «Операции AJAX» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс jQuery Academy, подпишись на CoddyKit PRO. Курс jQuery Academy содержит 1 уроков всего.
Чему я научусь в уроке «Операции AJAX»?
Операции AJAX Ты практикуешь jQuery Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать jQuery Academy?
Предыдущий опыт не требуется. jQuery Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 1.
Сколько времени занимает урок «Операции AJAX»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке jQuery Academy?
Да. Каждый урок jQuery Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.