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

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

ajax-zapros

AJAX запрос - это обращение с клиентской стороны т.е. от браузера к серверу, не перезагружая страницы. 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 обращенный в объект.


ajax-post

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();

ajax примеры

 

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('ошибка'))

 

fetch

 

Здесь можно скачать весь код из данного видео ...

 

Код 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>";
?>

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

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

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

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

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

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