📄 hello world - dojo for the attention-impaired the dojo toolkit.mht
字号:
response.txt in=20
the attachments section.</P>
<P>To get started, we first need a callback function to handle the data =
to be=20
returned from the server. Insert the following code into the header:=20
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script></SPAN></A></SPAN><BR> =20
function helloCallback(data,ioArgs) {<BR> =
=20
alert(data);<BR> } =20
<BR> function helloError(data, ioArgs)=20
{<BR> alert('Error when retrieving =
data from=20
the server!');<BR> }<BR><SPAN =
class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN></DIV><BR>
<P>The two arguments to the functions (data, and ioArgs) are important - =
don't=20
leave any of them out! The first argument (data) contains the data sent =
back=20
from the server, whilst the second argument contains a Dojo I/O Bind =
object.=20
Only the first concerns us right now.</P>
<P>The next step is to link the click of the button to the server =
request. To do=20
this, modify the following code:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onclick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> alert('You pressed the=20
button');<BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN></DIV><BR>
<P>To this:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> dojo.xhrGet({<BR> =
=20
url: 'response.txt',<BR> load:=20
helloCallback,<BR> error: =
helloError<BR> =20
});<BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN></DIV><BR>
<P>The above code basically tells Dojo to query the URL specified by url =
and to=20
use the function specified by handler to process the response from the=20
server.</P>
<P>Finally, we need to create another file in the same directory as=20
HelloWorld.html called response.txt. In this file, place the text =
'Welcome to=20
the Dojo Hello World Tutorial'.</P>
<P>Now, when the button is clicked, a JavaScript alert should display =
the text=20
from the response.txt file. Dojo-Easy!</P>
<P>Next, we'll look at doing something meaningful with that server =
request.</P>
<H2>Sending Data to the Server Using GET</H2>
<P>It's all well and good retrieving static data from the server, but it =
is=20
hardly a widely used situation in real life. So, instead of simply =
requesting=20
data from the server we also will send it some information for it to =
process. In=20
this section, we'll use the GET method whilst in the next section we'll =
use the=20
POST method. For easy reference, the code for this section is available =
as=20
HelloWorld-Section6.html in the attachments section. Server side code is =
also=20
available as HelloWorldResponseGET.<TYPE> where type is ASP ('.asp'), =
PHP=20
('.php'), ColdFusion ('.cfm'), or Java ('.jsp').</P>
<P>Firstly, in the markup section of the HelloWorld.html file (i.e. the =
body=20
section), we need to add another element - an input element. So, change =
the code=20
in this section from:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2><button</SPAN></A> dojoType=3D<SPAN =
class=3Dst0>"Button"</SPAN>=20
widgetId=3D<SPAN class=3Dst0>"helloButton"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> <SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> dojo.xhrGet({<BR> =
=20
url: 'response.txt',<BR> load:=20
helloCallback,<BR> error: =
helloError<BR> =20
});<BR> <SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR><SPAN class=3Dsc2><SPAN=20
class=3Dkw2></button></SPAN></SPAN></DIV><BR>
<P>to:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/button.html"><SPAN=20
class=3Dkw2><button</SPAN></A> dojoType=3D<SPAN=20
class=3Dst0>"dijit.form.Button"</SPAN> <SPAN =
class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"helloButton"</SPAN><SPAN =
class=3Dkw2>></SPAN></SPAN><BR> =20
Hello World!<BR> <SPAN=20
class=3Dsc2><A =
href=3D"http://december.com/html/4/element/script.html"><SPAN=20
class=3Dkw2><script</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"dojo/method"</SPAN> event=3D<SPAN =
class=3Dst0>"onClick"</SPAN><SPAN=20
class=3Dkw2>></SPAN></SPAN><BR> =20
dojo.xhrGet({<BR> url:=20
'HelloWorldResponseGET.php',<BR> =
load:=20
helloCallback,<BR> error:=20
helloError,<BR> content: {name:=20
dojo.byId('name').value }<BR> });<BR> =
=20
<SPAN class=3Dsc2><SPAN=20
class=3Dkw2></script></SPAN></SPAN><BR> <SPAN=20
class=3Dsc2><SPAN class=3Dkw2></button></SPAN></SPAN><BR> =
=20
Please enter your name: <SPAN class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text"</SPAN> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"name"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN></DIV><BR>
<P>Before we go any further - it is important to mention that the url =
property=20
in the dojo.xhrGet function call must be set to the file that is =
appropriate to=20
your environment. If you are using an ASP server then the value must =
read=20
'HelloWorldResponseGET.asp' instead of 'HelloWorldResponseGET.php' =
Likewise, if=20
you are using a ColdFusion server then the value must read=20
'HelloWorldResponseGET.cfm' instead of 'HelloWorldResponseGET.php'. =
Finally, if=20
you are using a Java server (JSP) then the value must read=20
'HelloWorldResponseGET.jsp' instead of 'HelloWorldResponseGET.php', or =
if you=20
are using a Perl server then the value must read =
'HelloWorldResponseGET.pl'=20
instead of 'HelloWorldResponseGET.pl'. The code for these files is in =
the=20
sections below, and is also available as attachments to this =
tutorial.</P>
<P>In the code above, you will notice that there is a new property that =
has been=20
passed to the dojo.xhrGet function. This property - content - allows the =
programmer to send arbitary values to the server as parameters. In this =
case,=20
since we are using the default method of dojo.io.bind which is GET, the =
server=20
side script will have the value of the textbox available to it as a the =
GET=20
parameter 'name'. It is worth mentioning that if the script expected the =
parameter under a different name (such as 'myName'), we would simply =
change the=20
content property to be (note the change of 'name' to 'myName' on the =
left of the=20
assignment operator ':'):</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">content: <SPAN =
class=3Dbr0>{</SPAN>myName: dojo.<SPAN class=3Dme1>byId</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>'name'</SPAN><SPAN =
class=3Dbr0>)</SPAN>.<SPAN=20
class=3Dme1>value</SPAN> <SPAN class=3Dbr0>}</SPAN></DIV><BR>
<P>Since we've not used it before, it is also worth noting the call=20
dojo.byId('name').value. Quite simply, this call is a shortcut for the =
standard=20
document.getElementById(..) function.</P>
<P>Finally, if you enter your name into the text box and you click the =
'Hello=20
World' button, an alert box should appear with the message 'Hello =
<NAME>,=20
welcome to the world of Dojo!' where <NAME>is the name you entered into =
the text=20
box.</P>
<P>Here are the server side scripts. A few of them are downloadable at =
the=20
bottom of this page (the website content management system doesn't allow =
.jsp or=20
.cfm files).</P>
<H3>Using a PHP Server</H3>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN=20
class=3Dkw2><?php</SPAN><BR> <SPAN class=3DcoMULTI>/*<BR> =
*=20
HelloWorldResponseGET.php<BR> * --------<BR> *<BR> * =
Print the=20
name that is passed in the<BR> * 'name' $_GET parameter in a=20
sentence<BR> */</SPAN><BR class=3Dgeshibr> <A=20
href=3D"http://www.php.net/header"><SPAN =
class=3Dkw3>header</SPAN></A><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>'Content-type: =
text/plain'</SPAN><SPAN=20
class=3Dbr0>)</SPAN>;<BR> <A =
href=3D"http://www.php.net/print"><SPAN=20
class=3Dkw3>print</SPAN></A> <SPAN class=3Dst0>"Hello {$_GET['name']}, =
welcome to=20
the world of Dojo!<SPAN class=3Des0>\n</SPAN>"</SPAN>;<BR><SPAN=20
class=3Dkw2>?></SPAN></DIV>
<H3>Using an ASP Server</H3>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN=20
class=3Dkw2><%</SPAN><BR> <SPAN class=3Dco1>'</SPAN><BR> =
<SPAN=20
class=3Dco1>' HelloWorldResponseGET.asp</SPAN><BR> <SPAN =
class=3Dco1>'=20
--------</SPAN><BR> <SPAN class=3Dco1>'</SPAN><BR> <SPAN =
class=3Dco1>'=20
Print the name that is passed in the</SPAN><BR> <SPAN =
class=3Dco1>' 'name'=20
GET parameter in a sentence</SPAN><BR> <SPAN =
class=3Dco1>'</SPAN><BR=20
class=3Dgeshibr> <SPAN class=3Dkw1>response</SPAN>.<SPAN=20
class=3Dkw3>ContentType</SPAN>=3D<SPAN =
class=3Dst0>"text/plain"</SPAN><BR> <SPAN=20
class=3Dkw1>response</SPAN>.<SPAN class=3Dkw3>write</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"Hello "</SPAN> & <SPAN=20
class=3Dkw1>request</SPAN>.<SPAN class=3Dkw3>querystring</SPAN><SPAN=20
class=3Dbr0>(</SPAN><SPAN class=3Dst0>"name"</SPAN><SPAN =
class=3Dbr0>)</SPAN> &=20
<SPAN class=3Dst0>", welcome to the world of Dojo!<SPAN=20
class=3Des0>\n</SPAN>"</SPAN><SPAN class=3Dbr0>)</SPAN><BR><SPAN=20
class=3Dkw2>%></SPAN></DIV>
<H3>Using a ColdFusion Server</H3>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: =
monospace"><!---<BR> <SPAN=20
class=3DcoMULTI>/*<BR> * HelloWorldResponseGET.cfm<BR> *=20
--------<BR> *<BR> * Print the name that is passed in =
the<BR> =20
* 'name' GET parameter in a sentence<BR> =20
*/</SPAN><BR>---><BR><cfsetting showDebugOutput=3D<SPAN=20
class=3Dst0>"No"</SPAN>><BR>Hello, #url.<SPAN =
class=3Dkw3>name</SPAN>#, welcome=20
to the world of Dojo!<BR></cfsetting></DIV>
<H3>Using a Java Server (JSP)</H3>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: =
monospace"><%<BR> <SPAN=20
class=3DcoMULTI>/*<BR> ' HelloWorldResponseGET.jsp<BR> '=20
--------<BR> '<BR> ' Print the name that is passed in =
the<BR> =20
' 'name' GET parameter in a sentence<BR> */</SPAN><BR =
class=3Dgeshibr> =20
response.<SPAN class=3Dme1>setContentType</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"text/plain"</SPAN><SPAN =
class=3Dbr0>)</SPAN>;<BR>%><BR>Hello <%=3D=20
request.<SPAN class=3Dme1>getParameter</SPAN><SPAN =
class=3Dbr0>(</SPAN><SPAN=20
class=3Dst0>"name"</SPAN><SPAN class=3Dbr0>)</SPAN> %> , welcome to =
the world of=20
Dojo!</DIV>
<H3>Using a Perl Server</H3>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace">#!<SPAN=20
class=3Dre0>/usr/bin/</SPAN>perl<BR>#<BR># <SPAN class=3Dst0>'=20
HelloWorldResponseGET.pl<BR># '</SPAN> --------<BR># <SPAN=20
class=3Dst0>'<BR># '</SPAN> <SPAN class=3Dkw3>Print</SPAN> the =
<SPAN=20
class=3Dkw3>name</SPAN> that <SPAN class=3Dkw1>is</SPAN> passed <SPAN=20
class=3Dkw1>in</SPAN> the<BR># <SPAN class=3Dst0>' '</SPAN><SPAN=20
class=3Dkw3>name</SPAN><SPAN class=3Dst0>' GET parameter in a =
sentence<BR>#<BR>use=20
strict;<BR>use CGI;<BR>my $cgi =3D CGI::new();<BR>print =
$cgi->header(-type=20
=3D> "text/html; charset=3Dutf-8");<BR>print "Hello " .=20
$cgi->param('</SPAN><SPAN class=3Dkw3>name</SPAN><SPAN class=3Dst0>') =
. ",=20
welcome to the world of Dojo!<SPAN class=3Des0>\n</SPAN>";</SPAN></DIV>
<H2>Sending Data to the Server Using POST</H2>
<P>Using GET data is all well and good, but sometimes you want to use =
Dojo to=20
improve the user's experience when using a traditional HTML form. As =
usual, Dojo=20
has a very nice way of making this easier. Again, the code for these =
files is in=20
the sections below, and are also available as attachments to this =
tutorial.=20
Additionally, as with the last section, you will need to change the =
'url'=20
property to point to the file that is appropriate to your =
environment.</P>
<P>First, we need to change the markup in the body of HelloWorld.html =
from:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/br.html"><SPAN=20
class=3Dkw2><br></SPAN></A></SPAN><BR> Please enter =
your name:=20
<SPAN class=3Dsc2><A =
href=3D"http://december.com/html/4/element/input.html"><SPAN=20
class=3Dkw2><input</SPAN></A> <SPAN class=3Dkw3>type</SPAN>=3D<SPAN=20
class=3Dst0>"text"</SPAN> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"name"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN></DIV><BR>
<P>to:</P>
<DIV class=3Dgeshifilter style=3D"FONT-FAMILY: monospace"><SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/br.html"><SPAN=20
class=3Dkw2><br></SPAN></A></SPAN><BR> <SPAN =
class=3Dsc2><A=20
href=3D"http://december.com/html/4/element/form.html"><SPAN=20
class=3Dkw2><form</SPAN></A> <SPAN class=3Dkw3>id</SPAN>=3D<SPAN=20
class=3Dst0>"myForm"</SPAN> <SPAN class=3Dkw3>method</SPAN>=3D<SPAN=20
class=3Dst0>"POST"</SPAN><SPAN class=3Dkw2>></SPAN></SPAN><BR> =
=20
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -