Разбираем простую AJAX функцию

Фотография к материалу: Разбираем простую AJAX функцию
27
декабрь
2017

Давайте разберем простейшую функцию, которая работает просто вот так: ajax("?param=123");

Итак, первый и единственный обязательный параметр нашей AJAX функции "url" – адрес страницы, куда будет отправлен запрос.

Пожалуй, еще добавим в нашу функцию второй необязательный параметр "func". Он будет содержать название функции, которая будет обрабатывать результат.

function ajax(url, func) {
	var req = new XMLHttpRequest(); // Создаем объект
	
	req.open("GET", url, true); // Открываем
	
	req.onreadystatechange = function() { // Назначаем функцию для обработки ответа
		
		if(req.readyState!=4) return; // Далее только если операция завершена
		
		if(req.status!=200) { // Если статус не OK
			
			alert("ajax error: "+req.statusText); // Сообщаем об ошибке
			
			return; // И выходим
			
		}
		
		if(typeof window[func]==="function") // Если функция существует
			
			eval(func+"(req.responseText);"); // То выполняем ее передав в нее результат
		
		else alert(req.responseText); // Иначе выводим ответ
		
	}
	
	req.send(""); // Выполняем запрос
}

Пример

Нажмите: Получить результат (5+6)

<a href="" onClick="return ajax('/ajax/?aj=1&v1=5&v2=6')">Получить результат (5+6)</a>

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

Комментарии отключены
Календарь для сайта с возможностью выбора даты
17
ноябрь
2017

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


Подробнее
Простые всплывающие по нажатию подсказки на JavaScript
6
октябрь
2017

Рассмотрим подробно как сделать простые всплывающие подсказки или окна на JavaScript, которые открываются и закрываются по клику по ним или рядом с ними. При этом может быть открыта только одна из них. Будем использовать JavaScript и CSS без jQuery. Кому нет нужды разбираться, можно взять готовый код.


Подробнее
Понимание flex или просто о непривычном
21
сентябрь
2017

FlexBox, или просто flex, это новый способ верстки страницы или ее части. Его использование сильно отличается от привычных методов. Однако его можно достаточно просто объяснить разделив набор параметров или свойств на две части: родительские и дочерние.


Подробнее
Все статьи