Введение
В JavaScript существует множество способов вызова Ajax, которые могут значительно улучшить пользовательский опыт, например, отправка данных на сервер, проверка имен пользователей, создание форм с автозаполнением, голосование и оценка, создание чатов и так далее.
В этой статье представлена информация о последних вариантах выполнения AJAX-запросов. Для простоты давайте сосредоточимся на том, что это за варианты, у каждого из них есть свои преимущества и недостатки.
1. XHR
XMLHttpRequest — это объект (встроенный компонент в большинстве других браузеров, объект ActiveX в Microsoft Internet Explorer), который позволяет веб-странице отправлять запрос на сервер и получать ответ без перезагрузки всей страницы. Пользователь продолжает просмотр страницы, как если бы она не была перезагружена, и, что более важно, не видит и не замечает обработки — то есть, по крайней мере по умолчанию, не видит загрузки новой страницы.
Использование объекта XMLHttpRequest позволяет разработчику изменять уже загруженную в браузере страницу, используя данные с сервера, без необходимости повторного запроса всей страницы с сервера.
Выполнение GET-запроса с использованием XHR
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}Отправка запроса с использованием XHR
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. API получения данных
API Fetch — это новая альтернатива XMLHttpRequest для получения ресурсов с сервера. В отличие от XMLHttpRequest, он обладает более мощным набором функций и более осмысленными именами. Fetch также гибок и прост в использовании благодаря своему синтаксису и структуре. Однако то, что отличает его от других библиотек AJAX HTTP, — это поддержка всеми современными веб-браузерами. Fetch использует подход «запрос-ответ», где Fetch отправляет запрос и возвращает промис, который разрешается в объект Response.
Преимущества использования Fetch API
- Он гибкий и простой в использовании.
- Промисы позволяют избежать «ада обратных вызовов»
- Поддерживается всеми современными браузерами.
- Используется подход "запрос-ответ".
Недостатки использования Fetch API
- По умолчанию не отправляет файлы cookie.
- CORS отключен по умолчанию.
Выполнение GET-запроса в Fetch API
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}Выполнение POST-запроса в Fetch API
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQuery — это клиентский язык программирования, который можно использовать для создания крутых и потрясающих веб-приложений. Он бесплатный, но мощный, относительно прост в настройке и изучении, и имеет множество плагинов и расширений для выполнения практически всего, что вы можете себе представить. Вы можете быстро начать работу, и вам не удастся перерасти его возможности позже, когда вы действительно освоите его.
Преимущества использования jQuery
- Главное преимущество jQuery — его простота.
- Кроме того, он невероятно гибок, поскольку jQuery позволяет пользователям добавлять плагины.
- Это также очень быстрое решение ваших проблем. Хотя могут существовать «лучшие» решения, jQuery и его разработчики работают в команде, чтобы обеспечить быстрое и эффективное внедрение jQuery, что позволяет вам сэкономить деньги.
- Программное обеспечение с открытым исходным кодом означает быстрый рост и свободу для разработчиков, позволяющую предоставлять наилучший сервис без бюрократических проволочек.
Недостатки использования jQuery
- Кроме того, частые обновления означают, что участники сообщества вряд ли предложат свои решения.
- Сейчас существует множество различных версий jQuery, и некоторые из них менее совместимы, чем другие.
- Иногда jQuery работает медленнее по сравнению с CSS. В таких случаях его простота становится недостатком, поскольку он не предназначен для взаимодействия на стороне клиента.
Выполнение GET-запроса в jQuery
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});Выполнение POST-запроса с помощью jQuery
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Аксиос
Axios — один из многих HTTP-клиентов, работающих на основе промисов, как в браузере, так и в среде Node.js. По сути, он предоставляет единый API для работы с XMLHttpRequest и HTTP-интерфейсом Node.js. Кроме того, он соединяет запросы, используя полифил для нового синтаксиса ES6.
Преимущества использования Axios
- Гарантия поддержки «из коробки»
- Поддержка защиты от XSRF на стороне клиента
- Может записывать запросы или ответы до их выполнения.
- Автоматическое преобразование данных в формат JSON
- Поддерживает API промисов
- Можно изменить или отменить запрос.
- Можно отрегулировать время отклика
- Работает как в Nodejs, так и в браузере.
Выполнение GET-запроса в Axios
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});Выполнение POST-запроса в Axios
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. Запрос
Библиотека Request — один из самых простых способов выполнения HTTP-запросов. Её структура и синтаксис очень похожи на обработку запросов в Node.js. В настоящее время проект имеет 18 тысяч звёзд на GitHub и заслуживает упоминания, поскольку является одной из самых популярных HTTP-библиотек.
Синтаксис
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. Суперагент
SuperAgent — это легковесная и продвинутая AJAX-библиотека, ориентированная на читаемость и гибкость. В отличие от других доступных библиотек, SuperAgent имеет простую кривую обучения. SuperAgent имеет объект запроса, который принимает такие методы, как GET, POST, PUT, DELETE и HEAD.
Преимущества суперагента
- Она имеет среду и экосистему, основанные на плагинах, где можно создавать и разрабатывать расширения для добавления или расширения функциональности.
- Легко регулируемый
- Удобный интерфейс для HTTP-запросов.
- Несколько функций для последовательной отправки запросов.
- Он должен поддерживать отслеживание процесса загрузки и скачивания.
- Он поддерживает фрагментированное шифрование при передаче данных.
- Поддерживаются вызовы старого типа.
- Для реализации многих распространенных функций доступно множество плагинов.
Отправить GET-запрос
request
.get('/user')
.query({ id: 1 })
.then(res => {
});Отправить запрос на публикацию
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)Результат
Выбор будет зависеть от вашего проекта, его масштаба, целевой аудитории и возможностей внедрения. Правильного или неправильного выбора нет. Если вы выберете не ту библиотеку для неподходящих задач, на этот вопрос, возможно, уже дан ответ. Выбирайте правильный инструмент для решения конкретной задачи.
