Отправка данных

Отправка данных.

Пока что мы только принимали информацию с сервера, но ничего не отправляли и даже не использовали никакие другие http-методы, кроме GET. В следующем примере будем работать с методом POST и новым объектом, позволяющим отправлять информацию с использованием элементов виртуальной формы.

Мы не рассказывали о том, как отправлять данные с использованием метода GET, потому что это чрезвычайно просто — нужно всего лишь добавить соответствующие значения в URL-адрес. Вы создаете для переменной url путь вида textfile. txt? val1=1&val2=2, и указанные значения отправляются в запросе. Атрибуты vall и val2 из этого примера будут прочитаны на сервере как переменные GET. Разумеется, текстовый файл не в состоянии обработать эту информацию, поэтому чаще всего на сервере добавляется PHP-файл или серверный сценарий другого типа, который получает и интерпретирует эти значения. Однако с запросами типа POST все не так просто.

Как вы, вероятно, знаете, запрос POST включает в себя всю информацию, отправляемую методом GET, и в дополнение этого тело сообщения. В теле сообщения мы можем отправлять информацию любого типа и любой длины. Очень часто наиболее удобным способом предоставления такой информации оказывается HTML-форма, однако для динамических приложений это не лучший вариант. Для решения этой проблемы рассматриваемый API предоставляет интерфейс FormData. Этот простой интерфейс включает в себя только конструктор и метод для получения и работы с объектами FormData:

- FormData(). Этот конструктор возвращает объект FormData, который затем в методе send() используется для отправки информации;

- append(name, value). Этот метод добавляет данные к объекту FormData. Он принимает в качестве атрибутов пару из ключевого слова и значения. В атрибуте value можно передавать как строку, так и бинарный блок. Возвращаемые данные представляют собой поле формы.

Листинг 13.5. Отправка виртуальной формы

Function initiate(){

Databox=document. getElementById(‘databox’);

Var button=document. getElementById(‘button’); button. addEventListener(‘click’, send, false);

}

Function send(){

Var data=new FormData(); data. append(‘name’,'John’); data. append(‘lastname’,'Doe’);

Var url="process. php";

Var request=new XMLhttpRequest();

Request. addEventListener(‘load’,show, false);

Request. open("POST", url, true);

Request. send(data);

}

Function show(e){

Databox. innerHTML=e. target. responseText;

}

Window. addEventListener(‘load’, initiate, false);

Когда информация отправляется на сервер, это означает, что там она должна быть обработана с получением определенного результата. Обычно этот результат сохраняется на сервере, а нам отправляется некая информация, содержащая ответ на запрос. В коде из листинга 13.5 мы отправляем данные на сервер для обработки файлом process. php, а затем выводим на экран информацию, возвращенную этим сценарием. Для проверки данного примера можно вывести значения, полученные сценарием process. php, при помощи кода из листинга 13.6.

Листинг 13.6. Простой ответ на запрос типа POST (process. php)

<?PHP

Print(‘Ваше имя: ‘.$_POST['name'].’<br>’); print(‘Ваша фамилия: ‘.$_POST['lastname']);

?>

Давайте сначала посмотрим, как информацию готовят к отправке. В функции send() в листинге 13.5 мы обратились к конструктору FormData(), а возвращенный им объект FormData сохранили в переменной data. Затем, используя метод append(), добавили к этому объекту две пары из ключевого слова и значения с именами name и lastname. Эти значения представляют собой поля формы ввода данных.

Инициализация запроса происходит точно так же, как в предыдущих примерах кода, но на этот раз в первом атрибуте метода open() передается тип POST, а не GET, а методу send() передается объект data, а не значение null.

Когда пользователь щелкает на кнопке Выполнить, происходит вызов функции send() и форма, созданная в объекте FormData, отправляется на сервер. Файл process. php получает данные (name и lastname) и возвращает браузеру текст, содержащий эту информацию. Функция show() вызывается после завершения процесса и выводит на экран полученную информацию посредством свойства responseText.

Для тестирования этого примера необходимо загрузить на сервер несколько файлов. Мы будем использовать те же версии HTML-документа и стилей CSS, которые определены в листингах 13.1 и 13.2. Вместо предыдущего примера JavaScript-кода необходимо взять код из листинга 13.5, также потребуется создать новый файл с именем process. php, содержащий код из листинга 13.6. Загрузите все эти файлы на сервер и откройте HTML-документ в своем браузере. После того как вы щелкнете на кнопке Выполнить, увидите на экране текст, возвращенный файлом process. php.

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

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