Главная | Контакты | Настройки

СМЕНИТЬ ПАЛИТРУ:

Отправка форм без перезагрузки страницы

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

<input type="text" id="input_1" /> 
<input type="text" id="input_2" /> 

С этим все понятно и никаких сложностей не представляет. Кстати обратите внимание! Никакой формы тега

нет и не будет. С кнопкой все чуть более сложно:

<input type="button" class="button" value=" Отправить форму  " onclick="process();" /> 

Как Вы видите из кода, кнопка просто вызывает JavaScript функцию. Давайте посмотрим функцию process() более подробно. Я не буду останавливаться на том, откуда взялся экземпляр объекта XMLHttpRequest(), это тема для отдельной большой статьи. Сегодня мы рассматриваем немного другое. Итак, функция process().

function process(){

Перед тем, как продолжать работу, мы должны проверить существует ли экземпляр объекта XMLHttpRequest(). И продолжать работу, только в том случае, если экземпляр объекта создан.

if (xmlHttp){     

try{ 

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

var data1 = document.getElementById("input_1").value;       

var data2 = document.getElementById("input_2").value;

Получив данные нам необходимо создать строку запроса, которая будет отправляться серверу

var send_post="data1=" + data1 + "&data2=" + data2; 

И вот теперь настало время заняться отправкой запроса. В экземпляр объекта XMLHttpRequest() мы задаем метод передачи данных, скрипт, который будет обрабатывать данные на сервере и указываем, что данный запрос выполняется асинхронно.

xmlHttp.open("POST", "/ajax.php", true); 

xmlHttp.setRequestHeader("Content-Type",  "application/x-www-form-urlencoded");

Указываем функцию обработчика пришедших данных. Даже если не предполагается, что сервер будет что то возвращать в браузер, имеет смысл создать пустую функцию и указать в качестве обработчика ее.

      xmlHttp.onreadystatechange = data_obr; 

И наконец, отправка сформированного нами запроса из формы.

xmlHttp.send(send_post); 
}catch (e){ 

Если по каким то причинам экземпляр объекта XMLHttpRequest() не был создан, то выводим сообщение об ошибке пользователю в браузер.

alert("Не удалось соединиться с сервером:\n" + e.toString());     

}
} 
} 

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