Dojo: отправка данных

В этот раз разберемся с отправкой данных на сервер при помощи Dojo. Конечно, достаточно легко получать с сервера статические данные, но в реальной жизни это вряд ли пригодится, так что теперь мы будем не просто запрашивать данные, но и отправлять кое-какую информацию на сервер для обработки. Теперь нам понадобится работающий сервер с PHP, ASP, ColdFusion или Java.

Отправка данных на сервер через Get-запрос

Во-первых, добавим в наш HTML-код поле ввода — тоже, разумеется виджет. Сначала у нас был вот такой код:

<button dojoType=”Button” widgetId=”helloButton”>

<script type=”dojo/method” event=”onClick”>
dojo.xhrGet({
url: ‘response.txt’,
load: helloCallback,
error: helloError
});
</script>
</button>

Мы заменим его вот таким:

<button dojoType=”dijit.form.Button” id=”helloButton”>
Hello World!
<script type=”dojo/method” event=”onClick”>
dojo.xhrGet({
url: ‘HelloWorldResponseGET.php’,
load: helloCallback,
error: helloError,
content: {name: dojo.byId(’name’).value }
});
</script>
</button>
Введите ваше имя: <input type=”text” id=”name”>

Перед тем, как продолжим, надо отметить, что свойство url в функции dojo.xhrGet вам надо будет заменить соответственно тому серверному языку, который вы будете применять. Если будете использовать ASP, то надо будет заменить HelloWorldResponseGET.php на HelloWorldResponseGET.asp, и так далее, соответственно.
Также обратите внимание, что функции передается новое свойство — content. Оно позволяет нам посылать на сервер некоторые значения в качестве параметров. В нашем случае, раз мы используем стандартный метод dojo.io.bind — GET, то значение текстового поля будет доступно серверному скрипту через значение name в GET-запросе. Еще, если скрипт ожидал бы от нас параметра myName, а не name, мы бы просто изменили свойство в параметре content с name на myName:

content: {myName: dojo.byId(’name’).value }

Чтобы найти объект, мы обращаемся к нему через функцию dojo.byId с параметром имени нашего объекта (то же самое, что и document.getElementById()). Теперь, если вы подготовите серверный скрипт, введете свое имя в поле ввода и нажмете кнопку, вылезет окно с текстом “Привет, Вася!”.
Кстати, о серверных скриптах. Вот и они:

Для PHP-сервера:

<?php
/*
* HelloWorldResponseGET.php
*/
header(’Content-type: text/plain’);
print “Привет, {$_GET['name']}!\n”;
?>

Для ASP-сервера:

<%
‘
‘ HelloWorldResponseGET.asp
‘
response.ContentType=”text/plain”
response.write(”Привет, ” & request.querystring(”name”) & “!\n”)
%>

Для Perl:

#!/usr/bin/perl
#
# ‘ HelloWorldResponseGET.pl
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => “text/html; charset=utf-8?);
print “Привет, ”. $cgi->param(’name’). “!\n”;

Отправка данных на сервер через Post-запрос

Использовать GET, конечно, хорошо, но иногда требуется передавать данные из обычных HTML-форм. В Dojo есть средства для упрощения этой задачи.

В первую очередь, изменим наш HTML-код следующим образом. Было:

<br>
Please enter your name: <input type=«text» id=«name»>

Стало:

<br>
<form id=«myForm» method=«POST»>
Please enter your name: <input type=«text» name=«name»>
</form>

Теперь изменим dojo/method. Было:

<script type=«dojo/method» event=«onClick»>
dojo.xhrGet({
url: 'HelloWorldResponseGET.php',
load: helloCallback,
error: helloError,
content: {name: dojo.byId('name').value }
});
</script>

Стало:

<script type=«dojo/method» event=«onClick»>
// Не забудьте изменить URL!
dojo.xhrPost({
url: 'HelloWorldResponsePOST.php',
load: helloCallback,
error: helloError,
form: 'myForm'
});
</script>

Мы заменили dojo.xhrGet на dojo.xhrPost и убрали свойство content, заменив его на form. Этим мы сообщаем Dojo, что данные для отправки следует брать из формы, id которой myForm.
Результат работы примера такой же, как и в предыдущем примере. Теперь серверный код:

Для PHP:

<?php
/*
* HelloWorldResponsePOST.php
*/
header('Content-type: text/plain');
print «Привет, {$_POST['name']}!\n»;
?>

Для ASP:

<%
'
' HelloWorldResponsePOST.asp
'
response.ContentType=«text/plain»
response.write(«Привет, » & request.form(«name») & "!\n")
%>

Для ColdFusion:

Hello, #form.name#, welcome to the world of Dojo!

Для JSP:

<%
/*
' HelloWorldResponsePOST.jsp
*/
response.setContentType(«text/plain»);
%>
Привет, <%= request.getParameter(«name») %>!

Для Perl:

#!/usr/bin/perl
#
# ' HelloWorldResponsePOST.pl
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => «text/html; charset=utf-8»);
print «Привет, ». $cgi->param('name'). "!\n";

Предыдущие части:

Часть I
(кросспост с моего блога kixlive.cn)