AJAX Примитивы

Редакция автор: stain

1. index.php //точка входа
2. app.php //валидация передаваемых данных на сервере
3. scriptform.js //ajax запрос

Точка входа.

index.php




	
	myip


	
Email:

Телефон:

Имя:

Валидация передаваемых данных на сервере.

app.php


Ajax запрос.

scriptform.js

// with out callback
window.onload = function(){
	var inp_email = document.querySelector('input[name=email]');
	var inp_phone = document.querySelector('input[name=phone]');
	var inp_name = document.querySelector('input[name=name]');

	document.querySelector('#send').onclick = function() {
		var params ='email=' + inp_email.value + '&' + 
			'phone=' + inp_phone.value + '&' + 
			'name=' + inp_name.value;
		ajaxPOST('app.php', params); 
	}
}

// обращаемся к странице на сервере проводящей валидацию данных, и передаем параметры
function ajaxPOST(url, params){// 
	var request = new XMLHttpRequest();

	//проверка состояния запроса 0-4 (создан, открыт, отправлен, частичный ответ заголовки, пришел ответ)
	request.onreadystatechange = function(){
		if(request.readyState == 4 && request.status == 200){
			if(request.responseText == '1'){
				document.querySelector('#result').innerHTML = 'Ура-ура! Все хорошо!';//params
				// раз все хорошо прячем форму
				document.querySelector('form').style.display = 'none';
				//если надо отправить на другую страницу //document.location = '';
			}
			else{
				document.querySelector('#result').innerHTML = request.responseText;	
			}
			
		}
	}

	request.open('POST', url);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	request.send(params);
}

Комментариев: 0