AJAX

Скачать AJAX функцию

Описание функции ajax(url, func, arg, par)

Функция ajax() отправляет запрос на указанный адрес и определяет обработчик полученных данных.

ПараметрТип данныхЗначение по умолчаниюОписание
urlстрокаundefinedАдрес отправки запроса
funcстрокаundefinedНазвание функции куда будет передан объект содержащий полученные данные.
Если функция не указана, ответ сервера будет показан стандартной функцией alert()
argданные любого типаundefinedДополнительный аргумент передаваемый в функцию обработки полученных данных.
Если необходимо передать несколько переменных, их можно объединить и передать в виде объекта
parстрока или FormDataundefinedДанные в формате строки должны быть представлены в следующем виде: "var1=100&var2=150".
Если этот параметр указан, данные будут передаваться POST методом. В остальных случаях будет использован GET метод

Скачать AJAX функцию

Пример 1. Простой пример получения данных через AJAX методом GET

Пример использования: Получить результат (3+5)

<script type="text/javascript" src="ajax.js"></script>
<a href="" onClick="return ajax('?aj=1&v1=3&v2=5')">Получить результат (3+5)</a>

Пример 2. Простой пример получения данных через AJAX методом POST

Пример использования: Получить результат (8+6) через POST запрос

<script type="text/javascript" src="ajax.js"></script>
<a href="" onClick="return ajax('?aj=1', '', '', 'v1=8&v2=6')">Получить результат (8+6) через POST запрос</a>

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

Пример использования:

+ = Отправить


HTML

<script type="text/javascript" src="ajax.js"></script>
<p>
	<input type="text" value="3" size="5" id="v1">
	+ <input type="text" value="4" size="5" id="v2">
	= <input type="text" value="" size="6" id="datsum" readonly>
	<a href="" onClick="return myClick()" class="btn big">Отправить</a>
</p>
<p>
	<label for="sndpost">
		<input type="checkbox" id="sndpost"> Отправить POST запрос
	</label>
</p>

CSS

p input {
	transition: all 1.5s ease;
	padding: 10px;
	font-size: 20px;
	border-radius: 5px;
	text-align: right;
}

PHP

if( !empty($_GET['aj']) ) {
	if( isset($_GET['v1']) )
		echo ( (int)$_GET['v1'] + (int)$_GET['v2'] );
	else
		echo ( (int)$_POST['v1'] + (int)$_POST['v2'] );
	exit;
}

JavaScript

Используются функции для данной конкретной задачи

var wait=0; // Защищаем сервер от случайных повторных запросов

// Функция для сбора и отправки данных
function myClick() {
	var url = "",
	v1 = document.getElementById('v1'),
	v2 = document.getElementById('v2'),
	post;
	
	if(wait!=0) return false;
	wait = 1;
	v1.readOnly = v2.readOnly = true;
	
	v1.value = parseInt(v1.value);
	v2.value = parseInt(v2.value);
	if(isNaN(v1.value)) v1.value = 0;
	if(isNaN(v2.value)) v2.value = 0;
	post = 'v1=' + v1.value + '&v2=' + v2.value;
	
	document.getElementById('datsum').value = "~";
	document.getElementById('datsum').style.background = "purple";
	
	if(!document.getElementById('sndpost').checked) {
		url = "&" + post;
		post = "";
	}
	
	setTimeout( // Делаем задержку одну секунду (для данного примера)
		function() {
			ajax(
				"?aj=1"+url, // Послать запрос на этот адрес
				"myFunc", // Передать ответ в функцию с таким именем
				"", // Дополнительные данные отсутствуют
				post // Здесь данные для POST запроса
			);
		}
	, 1000);
	
	return false;
}

// Функция для обработки полученных данных и отображения результата
function myFunc(req) {
	var vs = document.getElementById("datsum");
	wait = 0;
	v1.readOnly = v2.readOnly = false;
	vs.style.background = "";
	if(req.status!=200) {
		vs.value = "ajax error: ("+req.status+") "+req.statusText;
		return;
	}
	vs.value = req.responseText;
}

Смотрите также: Простая AJAX функция.