AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
Главная » JavaScript » AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
4.6
(105)
AJAX запрос — это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX– это технология JavaScript для обращения к серверу без перезагрузки страницы.
XMLHttpRequest, — экземпляр данного класса включает в себя набор методов для работы в протоколах HTTP и HTTPS. AJAX запрос, — это комплекс выполняемых задач, в режиме «запрос-ответ».Каждый запрос к серверу, включает в себя ->
Указание метода HTTP (GET POST)
Запрашиваемого URL (пути до файла на сервере, который будет обрабатывать наш запрос)
Установка заголовков на пример: «application/x-www-form-url» или «application/x-www-form-urlencoded» или «application/json» или «text-plain»
Данные передаваемые на сервер (тело запроса)
Каждый ответ от сервера включает в себя <-
Код статуса (успешно или нет отработала сторона сервера)
Заголовки HTTP/HTTPS
Данные передаваемые от сервера к клиенту (браузеру)
Элементы кода, которые будут использованы в примерах.
XMLHttpRequest,— это класс, для работы AJAX.request – это переменная или константа в которой будет хранится, — экземпляр класса XMLHttpRequest, объект с набором методов.url – это путь до файла на сервере, который будет обрабатывать наш запрос. В примерах с GET методом, в нем будут передаваться данные со стороны клиента..open()– это метод где мы задаем, первым параметром, — метод передачи данных, а вторым url..setRequestHeader() – это метод для указания передаваемых заголовков, здесь мы можем указать что данные идут в url либо закрытым способом, либо хотим получить данные от сервера в json формате..send() – это последний этап создания http запроса. С помощью него также можно передать тело запроса т.е. данные от браузера к серверу. Можно не чего не передавать или прямо указать null.onreadystatechange – это событие, которое случится, когда нам придет ответ от сервера.readyState – это метод экземпляра, который сообщает статус HTTP-запроса, вот возможные значения, которые он может дать:
Значение
Описание
0
Метод open() не вызван
1
Метод open() вызван
2
Получены заголовки ответа
3
Получено тело ответа
4
Передача ответа выполнена
status или statusText – возвращают статус http заголовков, нам нужен ответ 200. Хотя бывают и 404 или 500..responseText – данные, которые придут от сервера в виде строки..response – данные вернуться в json формате, тут как бы мы преобразуем сразу в объект, и дальше работаем уже как с объектом..text()– используется в запросе fetch, возвращает строку..json() – используется в запросе fetch, возвращает json обращенный в объект.
1. GET AJAX запрос на чистом JavaScript
Делаем запрос на чистом JavaScript, например к файлу ajax_quest.php, который находится на сервере, и будет возвращать то что мы ему передали.
// Данные для передачи на сервер допустим id товаров и его количество let id_product = 321; let qty_product = 2;
// Создаём объект класса XMLHttpRequest const request = new XMLHttpRequest();
/* Составляем строку запроса и кладем данные, строка состоит из: пути до файла обработчика ? имя в GET запросе где будет лежать значение запроса id_product и через & мы передаем количество qty_product. */ const url = "ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product;
/* Здесь мы указываем параметры соединения с сервером, т.е. мы указываем метод соединения GET, а после запятой мы указываем путь к файлу на сервере который будет обрабатывать наш запрос. */ request.open('GET', url);
// Указываем заголовки для сервера, говорим что тип данных, - контент который мы хотим получить должен быть не закодирован. request.setRequestHeader('Content-Type', 'application/x-www-form-url');
// Здесь мы получаем ответ от сервера на запрос, лучше сказать ждем ответ от сервера request.addEventListener("readystatechange", () => {
/* request.readyState - возвращает текущее состояние объекта XHR(XMLHttpRequest) объекта, бывает 4 состояния 4-е состояние запроса - операция полностью завершена, пришел ответ от сервера, вот то что нам нужно request.status это статус ответа, нам нужен код 200 это нормальный ответ сервера, 401 файл не найден, 500 сервер дал ошибку и прочее... */ if (request.readyState === 4 && request.status === 200) {
// выводим в консоль то что ответил сервер console.log( request.responseText ); } });
// Выполняем запрос request.send();
2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
Принцип такой же как и у GET запроса, но не забываем что GET запросом данные отправляются открыто. У POST запроса данные скрыты, и в большинстве своем желательно использовать POST запросы.
let id_product = 321; let qty_product = 2;
// Создаем экземпляр класса XMLHttpRequest const request = new XMLHttpRequest();
// Указываем путь до файла на сервере, который будет обрабатывать наш запрос const url = "ajax_quest.php";
// Так же как и в GET составляем строку с данными, но уже без пути к файлу const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
/* Указываем что соединение у нас будет POST, говорим что путь к файлу в переменной url, и что запрос у нас асинхронный, по умолчанию так и есть не стоит его указывать, еще есть 4-й параметр пароль авторизации, но этот параметр тоже необязателен.*/ request.open("POST", url, true);
//В заголовке говорим что тип передаваемых данных закодирован. request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Вот здесь мы и передаем строку с данными, которую формировали выше. И собственно выполняем запрос. request.send(params);
3. JSON AJAX POST запрос к серверу, на чистом Javascript
Запрос на чистом Javascript. Получаем данные в JSON формате.
// Данные для передачи на сервер например id товаров и его количество let id_product = 321; let qty_product = 2;
// принцип тот же самый что и у обычного POST запроса const request = new XMLHttpRequest(); const url = "ajax_quest.php"; const params = "id_product=" + id_product+ "&qty_product=" + qty_product;
// Здесь нужно указать в каком формате мы будем принимать данные вот и все отличие request.responseType = "json"; request.open("POST", url, true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (request.readyState === 4 && request.status === 200) { let obj = request.response;
console.log(obj); // Здесь мы можем обращаться к свойству объекта и получать его значение console.log(obj.id_product); console.log(obj.qty_product); } });
request.send(params);
4. JQuery GET & POST AJAX запрос к PHP на сервере
Работаем с сервером через фреймворк JQuery.
$(document).ready(function() { let id_product = 321; let qty_product = 2;
$.ajax({
url: "ajax_quest.php", // dataType: "json", // Для использования JSON формата получаемых данных method: "GET", // Что бы воспользоваться POST методом, меняем данную строку на POST data: {"id_product": id_product,"qty_product": qty_product}, success: function(data) {
console.log(data); // Возвращаемые данные выводим в консоль } }); });
5. Fetch GET на чистом Javascript
Fetch обертка над XHR
let id_product = 321; let qty_product = 2;
// Первым аргументом кладем путь, + строку как и в любом другом запросе, ключ=значение&ключ=значение fetch("ajax_quest.php"+ "?" + "id_product=" + id_product + "&qty_product=" + qty_product,
// Второй аргумент это объект с указаниями, методаи заголовка { method: "GET", headers:{"content-type":"application/x-www-form-urlencoded"} })
.then( response => { if (response.status !== 200) {
6. Запрос на чистом Javascript «Vanila» Fetch + POST метод
let id_product = 321; let qty_product = 2; // Вынес что бы облегчить чтение так же можно вынести и headers let data_body = "id_product=" + id_product + "&qty_product="+ qty_product;
/* Первым аргументом кладем путь до файла на сервере, вторым объект где будут свойства method, body здесь у нас данные для передачи на сервер, headers заголовок. */ fetch("ajax_quest.php", { method: "POST", body: data_body, headers:{"content-type": "application/x-www-form-urlencoded"} })
Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.
/*** FETCH + JSON + POST ***/ /*let id_product = 321; let qty_product = 2; let data = { "id_product": id_product, "qty_product": qty_product };
Обычно передаются текстовые данные, но вот вчера на работе попалась задача передать файл AJAX -ом, решил поделиться тем что нашёл. Чуть позднее опишу подробности, или запишу видео. Здесь переписал в ООП https://jsbin.com/cajuyod/edit?html,js,output
let feedback__btn = document.getElementById('write_us') if (feedback__btn) { feedback__btn.addEventListener('click', send_mail) }
let form_write_us = document.querySelectorAll('#form_write_us input') for (let i = 0; i < form_write_us.length; i++) { form_write_us[i].addEventListener('input', valid_form_write_us) }
function valid_form_write_us (e) { let error = [] let inp = document.querySelectorAll('#form_write_us input') for (let i = 0; i < inp.length; i++) {
if (!inp[i].classList.contains('feedback__file') && inp[i].value.trim().length < 1) { error.push(inp[i].previousElementSibling.textContent) } }
function send_mail (e) { e.preventDefault() let name_user = document.getElementById('name').value let company = document.getElementById('company').value let phone = document.getElementById('phone').value let time_call = document.getElementById('time-call').value let email = document.getElementById('email').value let comment = document.getElementById('comment').value
let attachfile = document.getElementById('attachfile').files[0] let data = new FormData() data.append('name_user', name_user) data.append('company', company) data.append('phone', phone) data.append('time_call', time_call) data.append('email', email) data.append('comment', comment) data.append('attachfile', attachfile)
Введение: Откройте для себя мир AJAX, технологии, которая произвела революцию в нашем взаимодействии с веб-приложениями. В этом всеобъемлющем руководстве мы подробно рассмотрим основные концепции AJAX, поймем его важность в современной веб-разработке и изучим различные методы и рекомендации, которые помогут вам освоить и эффективно внедрить AJAX в свои проекты. Приготовьтесь раскрыть весь потенциал асинхронных веб-приложений и создать удобный и понятный интерфейс для вашей аудитории.
Что такое AJAX?
Асинхронный JavaScript и XML (AJAX) — это мощная технология веб-разработки, которая позволяет создавать динамические интерактивные веб-приложения, не требуя от пользователя обновления страницы. Используя мощь JavaScript, AJAX позволяет отправлять и получать данные с сервера в фоновом режиме, обновляя содержимое на странице, не нарушая работу пользователя.
Почему AJAX имеет значение в веб-разработке
AJAX изменил способ создания веб-сайтов, упростив создание быстрых, отзывчивых приложений, которые привлекают пользователей. Некоторые ключевые преимущества AJAX включают в себя:
Улучшенный пользовательский интерфейс
AJAX устраняет необходимость полной перезагрузки страницы, создавая более плавный и удобный просмотр для пользователей.
Более быстрое время загрузки
Обновляя только необходимые части страницы, AJAX уменьшает объем передаваемых данных, что приводит к более быстрому времени загрузки и повышению производительности.
Данные в режиме реального времени
AJAX позволяет обновлять данные в режиме реального времени, позволяя пользователям получать доступ к самой последней информации без ручного обновления страницы.
Расширенная интерактивность
С помощью AJAX вы можете создавать динамические интерактивные функции, которые мгновенно реагируют на вводимые пользователем данные, такие как живые результаты поиска, проверка формы и многое другое.
Для эффективного внедрения AJAX в ваши проекты крайне важно освоить несколько ключевых методов:
XMLHttpRequest: краеугольный камень AJAX, объект XMLHttpRequest позволяет вам делать HTTP-запросы и обрабатывать ответы сервера в JavaScript.
Fetch API: современная альтернатива XMLHttpRequest, Fetch API предоставляет более простой и гибкий способ выполнения запросов AJAX.
JSON: JavaScript Object Notation (JSON) — это упрощенный формат данных, который легко анализировать и генерировать, что делает его идеальным для обмена данными с помощью AJAX.
Обработка ошибок: узнайте, как изящно обрабатывать ошибки, обеспечивая бесперебойную работу пользователей, даже когда сервер сталкивается с проблемами.Рекомендации по внедрению AJAX. Чтобы максимально эффективно использовать AJAX и создавать эффективные, удобные в сопровождении веб-приложения, следуйте приведенным ниже рекомендациям.
Прогрессивное улучшение
Создавайте свои приложения для работы с JavaScript или без него, обеспечивая функциональные возможности для пользователей с отключенным JavaScript.Используйте библиотеки и фреймворки. Используйте популярные библиотеки и фреймворки JavaScript, такие как jQuery и Axios, чтобы упростить внедрение AJAX и повысить производительность.
Оптимизация производительности
Сведите к минимуму количество запросов AJAX и используйте методы кэширования, чтобы снизить нагрузку на сервер и повысить производительность.Обеспечьте безопасность: защитите свои приложения AJAX от распространенных уязвимостей безопасности, таких как подделка межсайтовых запросов (CSRF) и межсайтовый скриптинг (XSS).
Вывод:
AJAX — незаменимый инструмент в современной веб-разработке, позволяющий разработчикам создавать многофункциональные интерактивные веб-приложения, которые радуют пользователей. Освоив методы AJAX и следуя рекомендациям, вы будете хорошо подготовлены для создания высокопроизводительных и привлекательных веб-сайтов, которые будут выделяться на фоне современной конкурентной цифровой среды. Начните свой путь к освоению AJAX и раскройте весь потенциал асинхронных веб-приложений.
Поделиться ссылкой:
Насколько был полезен этот пост?
Кликни что бы проголосовать
Средний рейтинг 4.6 / 5. Всего голосов 105
Пока нет голосов, будьте первым кто оценит этот пост.
Крутейшая статья. Автор большое, спасибо, от души. P.S. Кнопка отправки коммента по верх формы капчи. Поправьте. А то пришлось в код лезть что бы этот коммент отправить.
Здравствуйте! Большое спасибо за хорошие примеры. В одном из примеров я заметил опечатку «1. GET AJAX запрос на чистом JavaScript» request.addEventListener(«readystatechange», () => { { Вторая скобочка открывается.
Автору огромное спасибо, не мог вдуплить момент с [setRequestHeader], смотрел где только можно, , здесь полистал статью и теперь все работает как надо.
Замечательно все объяснил. Спасибо! P.S. Временно можно для элемента убрать width: 100%. Кнопка будет по центру поля «Сайт», того же размера, и капчу уже не будет загораживать.
Кинь код куда нить в песочницу, если еще актуально, то могу попробовать помочь.
Крутейшая статья. Автор большое, спасибо, от души.
P.S. Кнопка отправки коммента по верх формы капчи. Поправьте. А то пришлось в код лезть что бы этот коммент отправить.
Здравствуйте! Большое спасибо за хорошие примеры. В одном из примеров я заметил опечатку «1. GET AJAX запрос на чистом JavaScript»
request.addEventListener(«readystatechange», () => {
{
Вторая скобочка открывается.
Благодарю, поправил.
Автору огромное спасибо, не мог вдуплить момент с [setRequestHeader], смотрел где только можно, , здесь полистал статью и теперь все работает как надо.
Спасибо, всё в одном месте. Вот весь JS разделить так)
Спасибо друг!
Просто и понятно!
Замечательно все объяснил. Спасибо!
P.S. Временно можно для элемента убрать width: 100%.
Кнопка будет по центру поля «Сайт», того же размера, и капчу уже не будет загораживать.
P.P.S Имел ввиду элемент .
Понятно. 🙂 Теги не принимаются. Тогда так: элемент с классом form-submit
Дал бы хоть один полноценный пример. Ни хрена не поймешь, куда это все вставлять…