AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON

Главная » JavaScript » AJAX запрос примеры, — на чистом Javascript, так же AJAX запрос jquery, Fetch запрос, всё это в разных вариантах, GET POST JSON
4.6
(105)
ajax-zaprosAJAX запрос — это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. AJAX – это технология JavaScript для обращения к серверу без перезагрузки страницы. 

Рассмотрим примеры AJAX запросов:

Содержание статьи :

  1. GET AJAX запрос на чистом JavaScript
  2. POST AJAX запрос на чистом JavaScript к PHP файлу на сервере
  3. JSON AJAX POST запрос к серверу, на чистом Javascript 
  4. JQuery GET & POST AJAX запрос к PHP на сервере
  5. Fetch GET на чистом Javascript
  6. Запрос на чистом Javascript «Vanila» Fetch + POST метод
  7. Fetch GET JSON
  8. Кросдоменный запрос JSONP Fetch + GET метод
 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.addEventListener("readystatechange", () => {

    if(request.readyState === 4 && request.status === 200) {       
		console.log(request.responseText);
    }
});
 
//	Вот здесь мы и передаем строку с данными, которую формировали выше. И собственно выполняем запрос. 
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");
 
request.addEventListener("readystatechange", () => {
 
    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) {
		
        return Promise.reject(); 
  }
    return response.text()
})
.then(i => console.log(i))
.catch(() => console.log('ошибка'));  
 

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"} 
	})
   
.then( (response) => {
        if (response.status !== 200) {           
			return Promise.reject();
        }   
return response.text()
})
.then(i => console.log(i))
.catch(() => console.log('ошибка')); 

        /*** Fetch JSON GET ***/
/*
        let id_product = 321;
        let qty_product = 2;

fetch("ajax_quest.php?id_product=" + id_product + "&qty_product=" + qty_product, {
	headers: {"Content-type": "application/json"}
})
	.then(response => {
	if (response.status !== 200) {
		return Promise.reject();
	}
	return response.json();
})
	.then(i => console.log(i))
	.catch(() => console.log('ошибка'));*/
 

7. Fetch POST + JSON

Данный метод сейчас мало какой браузер поддерживает. Но есть костыли. Этот код работает, попробуйте разобраться что к чему. С удовольствием узнаю как лучше тут поступать.
        /*** FETCH + JSON  + POST ***/
        /*let id_product = 321;
         let qty_product = 2;
         let data = {
         "id_product": id_product,
         "qty_product": qty_product
         };

         data = JSON.stringify(data);

         fetch("ajax_quest.php", {
         method: "POST",
         body: data,
         headers: {"Content-type": "application/json"}
         })
         .then(response => {
         if (response.status !== 200) {
         return Promise.reject();
         }
         return response.json();
         })
         .then(i => console.log(i))
         .catch(() => console.log('ошибка'));*/
        /************************************************************/
        let id_product = 321;
        let qty_product = 2;

        let upload = {
            "id_product": id_product,
            "qty_product": qty_product
        };
        let data = new FormData();
        data.append("json", JSON.stringify(upload));

        fetch("ajax_quest.php",
            {
                method: "POST",
                body: data
            })
            .then(response => {
                if (response.status !== 200) {
                    return Promise.reject();
                }
                return response.json();
            })
            .then(function (data) {
                console.log(JSON.stringify(data))
            })
            .catch(() => console.log('ошибка'));

8. Кросдоменный запрос JSONP Fetch + GET метод в github

Кросдоменный AJAX запрос в репозиторий github. Репозиторий возвращает json объект с именами.
fetch('https://raw.githubusercontent.com/belocer/belocer.github.io/blob/master/js/app.js')
         .then(response => {
         	if (response.status >= 400) {
         	return Promise.reject();
         }
         	return response.json();
         })
         .then(i => console.log(i))
         .catch(() => console.log('ошибка'))
  

9. Передача файла через AJAX на чистом JavaScript

Обычно передаются текстовые данные, но вот вчера на работе попалась задача передать файл AJAX -ом, решил поделиться тем что нашёл. Чуть позднее опишу подробности, или запишу видео. Здесь переписал в ООП https://jsbin.com/cajuyod/edit?html,js,output
<form method="post" enctype="multipart/form-data" action="#" class="feedback__form" id="form_write_us">

	<label class="feedback__label" for="name"><span class="feedback__label-span">Ваше имя</span>
		<input class="feedback__input" type="text" name="name" id="name"></label>

	<label class="feedback__label"><span class="feedback__label-span">Организация</span>
		<input class="feedback__input" type="text" name="company" id="company"></label>

	<label class="feedback__label"><span class="feedback__label-span">Телефон</span>
		<input class="feedback__input" type="tel" name="phone" id="phone"></label>

	<label class="feedback__label" for="time-call"><span class="feedback__label-span">Удобное время для звонка (Мск)</span>
		<input class="feedback__input" type="text" name="time-call" id="time-call"></label>

	<label class="feedback__label" for="email"><span class="feedback__label-span">Ваш e-mail</span>
		<input class="feedback__input" type="email" name="email" id="email"></label>

	<label class="feedback__label"><span class="feedback__label-span">Ваше сообщение</span>
		<input class="feedback__input" type="text" name="comment" id="comment"></label>

	<div class="feedback__send">
		<input name="attachfile" type="file" accept="image/*" class="feedback__file" id="attachfile">
		<button class="feedback__btn" type="submit" id="write_us" disabled="disabled">Отправить</button>
	</div>

</form>

<script>
window.addEventListener('load', () => {
	
  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)
      }
    }

    if (error.length == 0) {
      feedback__btn.removeAttribute('disabled')
      feedback__btn.style.opacity = '1'
    } else if (error.length > 0) {
      feedback__btn.setAttribute('disabled', 'disabled')
      feedback__btn.style.opacity = ''
    }
  }

  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)

    fetch('testmail.php',
      {
        method: "POST",
        body: data
      })
      .then(response => {
        if (response.status !== 200) {
          return Promise.reject();
        }
        return response.json();
      })
      .then(function (data) {
        console.log(JSON.stringify(data))
        console.log(data)
      })
      .catch(() => console.log('ошибка'));
  }
})
</script>
Здесь можно скачать весь код из данного видео … 
Код PHP который на сервере. 
<?php 
/*echo "<pre>";
echo $_GET;
echo $_POST;
print_r($_GET);
print_r($_POST);*/

/*$data_json = json_encode($_GET, JSON_UNESCAPED_UNICODE);
echo $data_json;*/


$data_json = json_encode($_POST, JSON_UNESCAPED_UNICODE);
echo $data_json;


/*$data_json = json_encode($_GET, JSON_UNESCAPED_UNICODE);
echo $data_json;
*/
// echo "</pre>";
?>

Раскройте потенциал асинхронных веб-приложений

Введение: Откройте для себя мир AJAX, технологии, которая произвела революцию в нашем взаимодействии с веб-приложениями. В этом всеобъемлющем руководстве мы подробно рассмотрим основные концепции AJAX, поймем его важность в современной веб-разработке и изучим различные методы и рекомендации, которые помогут вам освоить и эффективно внедрить AJAX в свои проекты. Приготовьтесь раскрыть весь потенциал асинхронных веб-приложений и создать удобный и понятный интерфейс для вашей аудитории.

Что такое AJAX?

Асинхронный JavaScript и XML (AJAX) — это мощная технология веб-разработки, которая позволяет создавать динамические интерактивные веб-приложения, не требуя от пользователя обновления страницы. Используя мощь JavaScript, AJAX позволяет отправлять и получать данные с сервера в фоновом режиме, обновляя содержимое на странице, не нарушая работу пользователя.

Почему AJAX имеет значение в веб-разработке

AJAX изменил способ создания веб-сайтов, упростив создание быстрых, отзывчивых приложений, которые привлекают пользователей. Некоторые ключевые преимущества AJAX включают в себя:

Улучшенный пользовательский интерфейс

AJAX устраняет необходимость полной перезагрузки страницы, создавая более плавный и удобный просмотр для пользователей.

Более быстрое время загрузки

Обновляя только необходимые части страницы, AJAX уменьшает объем передаваемых данных, что приводит к более быстрому времени загрузки и повышению производительности.

Данные в режиме реального времени

AJAX позволяет обновлять данные в режиме реального времени, позволяя пользователям получать доступ к самой последней информации без ручного обновления страницы.

Расширенная интерактивность

С помощью AJAX вы можете создавать динамические интерактивные функции, которые мгновенно реагируют на вводимые пользователем данные, такие как живые результаты поиска, проверка формы и многое другое.

Для эффективного внедрения AJAX в ваши проекты крайне важно освоить несколько ключевых методов:

  1. XMLHttpRequest: краеугольный камень AJAX, объект XMLHttpRequest позволяет вам делать HTTP-запросы и обрабатывать ответы сервера в JavaScript.
  2. Fetch API: современная альтернатива XMLHttpRequest, Fetch API предоставляет более простой и гибкий способ выполнения запросов AJAX.
  3. JSON: JavaScript Object Notation (JSON) — это упрощенный формат данных, который легко анализировать и генерировать, что делает его идеальным для обмена данными с помощью AJAX.
  4. Обработка ошибок: узнайте, как изящно обрабатывать ошибки, обеспечивая бесперебойную работу пользователей, даже когда сервер сталкивается с проблемами.Рекомендации по внедрению AJAX. Чтобы максимально эффективно использовать AJAX и создавать эффективные, удобные в сопровождении веб-приложения, следуйте приведенным ниже рекомендациям.

Прогрессивное улучшение

Создавайте свои приложения для работы с JavaScript или без него, обеспечивая функциональные возможности для пользователей с отключенным JavaScript.Используйте библиотеки и фреймворки. Используйте популярные библиотеки и фреймворки JavaScript, такие как jQuery и Axios, чтобы упростить внедрение AJAX и повысить производительность.

Оптимизация производительности

Сведите к минимуму количество запросов AJAX и используйте методы кэширования, чтобы снизить нагрузку на сервер и повысить производительность.Обеспечьте безопасность: защитите свои приложения AJAX от распространенных уязвимостей безопасности, таких как подделка межсайтовых запросов (CSRF) и межсайтовый скриптинг (XSS).

Вывод:

AJAX — незаменимый инструмент в современной веб-разработке, позволяющий разработчикам создавать многофункциональные интерактивные веб-приложения, которые радуют пользователей. Освоив методы AJAX и следуя рекомендациям, вы будете хорошо подготовлены для создания высокопроизводительных и привлекательных веб-сайтов, которые будут выделяться на фоне современной конкурентной цифровой среды. Начните свой путь к освоению AJAX и раскройте весь потенциал асинхронных веб-приложений.

Поделиться ссылкой:

Насколько был полезен этот пост?

Кликни что бы проголосовать

Средний рейтинг 4.6 / 5. Всего голосов 105

Пока нет голосов, будьте первым кто оценит этот пост.

Читайте также

Веб-разработка 2023 году
JavaScript – простое начало в 2023 году
Валидация форм HTML Javascript

Комментарии 11

  • Кинь код куда нить в песочницу, если еще актуально, то могу попробовать помочь.

    Ответить

  • Крутейшая статья. Автор большое, спасибо, от души.
    P.S. Кнопка отправки коммента по верх формы капчи. Поправьте. А то пришлось в код лезть что бы этот коммент отправить.

    Ответить

  • Здравствуйте! Большое спасибо за хорошие примеры. В одном из примеров я заметил опечатку «1. GET AJAX запрос на чистом JavaScript»
    request.addEventListener(«readystatechange», () => {
    {
    Вторая скобочка открывается.

    Ответить

  • Автору огромное спасибо, не мог вдуплить момент с [setRequestHeader], смотрел где только можно, , здесь полистал статью и теперь все работает как надо.

    Ответить

  • Спасибо, всё в одном месте. Вот весь JS разделить так)

    Ответить

  • Спасибо друг!
    Просто и понятно!

    Ответить

  • Замечательно все объяснил. Спасибо!
    P.S. Временно можно для элемента убрать width: 100%.
    Кнопка будет по центру поля «Сайт», того же размера, и капчу уже не будет загораживать.

    Ответить

  • P.P.S Имел ввиду элемент .

    Ответить

  • Понятно. 🙂 Теги не принимаются. Тогда так: элемент с классом form-submit

    Ответить

  • Дал бы хоть один полноценный пример. Ни хрена не поймешь, куда это все вставлять…

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Good-code © 2023
 

Политика конфиденциальности

➤