Dojo入门Hello World！

关注

翻译最新推荐文章于 2023-09-25 03:45:00 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

二阶FLL辅助三阶PLL环路的代码解读今天对GNSS接收机里面的载波跟踪环路代码进行了解读以下是个人的一点见解 % 载波环第二步：环路滤波器二阶FLL辅助三阶PLL环路 carrLoopS0 = lastCarrLoopS0 + (phaseErr*tau0PLL + freqErr*tau1FLL) * PDIcarr; carrLoopS1 = lastCarrLoopS1 + (tau1PLL*phaseErr + carrLoopS0 + tau2FLL*freqErr) * PD 阅读详情

本文的目的是为Dojo的入门者提供一个起点。每一个步骤都是为了尽可能多的介绍Dojo，但也不可能非常详尽，描述的太详尽反而会把入门用户搞糊涂了。如果需要了解本文中提到的概念，请查看底部指向其他资源的链接。

入门要求

很明显，第一步是你需要Dojo！你可以从 http://dojotoolkit.org/downloads 下载最新的稳定版本.第二步，你需要一个Web服务器.无论是连网服务器或者是离线服务器，Linux、Windows或者是Mac ... 都没什么要紧的。Dojo JavaScript library 是可以可以直接在浏览器上运行的,但文中有一些 AJAX 案例需要服务器的PHP或者ASP支持.

Dojo 和 Dijit 中的代码,运行在客户端浏览器的部分,是兼容 IE 6 - 7, Firefox 2, 和 Safari的.

Dojo的设置

首先，你需要在Web服务器上新建一个目录. 假设为HelloWorldTutorial. 然后在里面建立一个名称为 dojoroot 的目录. 最后, 使用压缩工具解压缩Dojo压缩包至 /HelloWorldTutorial/dojoroot目录. 完成后，效果如下：

开始了

一旦设置好了以上的目录和文件结构, 我们就要为HTMl文件设置JavaScript标记了.看一下下面的代码:

 <html>
 
 <head>
 
 <title>Dojo: Hello World!
 </title>
 
 <!-- SECTION 1 -->
 
 <style type="text/css">
 
@import "dojoroot/dijit/themes/tundra/tundra.css";
 
@import "dojoroot/dojo/resources/dojo.css"
 
 </style>
 
 <script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true">
 </script>
 
 </head>
 
 <body class="tundra">
 
 </body>
 
 </html>

正如上面看到的，这个页面只是一个标准的HTML页面框架，它包含了3个部分:

两个CSS文件. 标记为 Tundra 的是案例中要用到的Dijit主题风格. 当然也可以选择其他的主题.
在Head部分中的script 元素标签. 这个script 元素标签复杂加载Dojo的核心库，它为我们后面用到的Dojo函数提供接口支持.
最后,把 tundra CSS 样式添加到 body 标签.

创建一个按钮

好了,我们开始这一激动人心的部分!在这个例子中，我们将会建立一个"Hello World!"的按钮部件.对这个例子，鼠标移出、鼠标经过、鼠标按下(mouseOut, mouseOver, and mouseDown) 这3种可视状态可以在一定程度上提升用户体验。

第一个步骤是告知Dojo加载适合的模组.在网页头部，在片段1下添加一个片段2，代码如下:

 <!-- SECTION 2 -->
 
 <script type="text/javascript">
 
// Load Dojo's code relating to the Button widget
 
dojo.require("dijit.form.Button");
 
 </script>

dojo.require 这一行代码通知 Dojo 加载 Button（按钮）部件. 如果你省略的这一行,在Dojo 加载的时候，Button（按钮）中添加的代码将会失效, 返回的结果是一个普通的HTML 按钮，而不是我们期待的.

添加以上一段代码后，在body片段中加入下列HTML代码:

 <button dojoType="dijit.form.Button" id="helloButton">Hello World!
 </button>

这一行HTML代码中最重要的属性是通知Dojo ，按钮的dojoType属性是什么. dojoType 属性负责通知Dojo：在页面加载的时候怎样处理这个元素.在这个例子，我们使用了button这个HTMl元素，当然用 input 也是可以的 - 无论 dojoType 属性有多长，Dojo都是可以运行的.但是使用 input 是不值得的, 我们还必须通过额外增加标题属性，来设定button中要显示的文本.

设置部件（Widget）的事件

按钮已经做好了，但是当点击按钮的时候它会做什么呢？我们可以为button（按钮）设定一个点击事件（ event handler）, 但是这里有一种更高效的方法 - Dojo 事件系统!

最容易的方式是通过script标记为button附加一个事件.但这并不是随意的 script 标签 ... 它必须包含一个值为 dojo/method 的type属性, 例如:

 <button dojoType="dijit.form.Button" id="helloButton">
 
Hello World!
 
 <script type="dojo/method" event="onClick">
 
alert('You pressed the button');
 
 </script>
 
 </button>

真的很简单，是吧？把script放置在标签的内部，从感官上也好看得多.同时还可以在script中充分利用第2层DOM的事件. 这意味着你可以监测到 SHIFT 和 CTRL 键, 获取各种各样的事件属性,从而使HTML目录结构的事件处理上升到一个更高的境界. 如果你曾经使用过第二层事件,你会知道IE和 Firefox 中有不同的使用语法.在 Dojo中, 同样的函数可以运行在任何一个支持的浏览器上.真是十分强大!

从服务器读取数据

点击按钮弹出警告窗口不错的方法,但如果我们想从服务器上获取数据呢? 又一次,Dojo用一个简单的方法拯救了这个任务 - dojo.xhrGet. 顺便提及一下,这个部分的代码可以在附件中下载（文件HelloWorld-Section5.html 和 response.txt ）。

开始，我们需要一个回调函数（ callback function ）来处理服务器返回的数据.在头部（head标签）添加以下代码:

 <script>
 
function helloCallback(data,ioArgs) {
 
alert(data);
 
}
 
function helloError(data, ioArgs) {
 
alert('Error when retrieving data from the server!');
 
}
 
 </script>

函数中的两个参数(data, and ioArgs) 是非常重要的 - 一个都不能少! 第一个参数 (data) 包含了服务器返回的数据, 第二个参数包含了绑定的 Dojo I/O 对象. 我们现在主要看第一个参数.

第二步：将鼠标的点击连接到发起服务器请求. 要完成这一步, 修改以下代码:

 <script type="dojo/method" event="onClick">
 
alert('You pressed the button');
 
 </script>

修改后，代码如下:

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

以上的代码主要是告诉Dojo去访问URl定义的网址路径，以及使用handler中定义的函数处理服务器返回的数据。

最后，我们在HelloWorld.html 所在的文件夹下新建一个文件 response.txt. 在这个文件中，写上 'Welcome to the Dojo Hello World Tutorial'.

现在，点击按钮，JavaScript alert窗口中显示的应该是 response.txt 文件中的文字.Dojo-很简单吧!

下面，我们尝试让这个服务器请求做一些更有意义的事.

用GET发送数据到服务器

从服务器获取静态的数据是不错的功能，但在真正的应用中并不是那么广泛. 所以，除了简单的从服务器获取数据，我们还可以给服务器发送数据. 在这个部分, 我们使用的是GET方法，下一部分使用的是POST方法.作为简单的参考,这部分的代码可以在附件中下载，文件名为 HelloWorld-Section6.html .服务端文件名是" HelloWorldResponseGET". 扩展名分别如下 ASP ('.asp'), PHP ('.php'), ColdFusion ('.cfm'), 或者是 Java ('.jsp').

首先, 在文件 HelloWorld.html 中 (例如：body),需要增加另外一个元素 - 一个 input 元素. 所以,把以下的代码:

 <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>
 
Please enter your name: 
 <input type="text" id="name">

在继续进行之前 - 需要强调一下：dojo.xhrGET函数中的url属性指向的文件格式必须是你服务器支持的格式.

ASP 服务器： 'HelloWorldResponseGET.asp' ，
PHP 服务器： 'HelloWorldResponseGET.php' ，
ColdFusion 服务器： 'HelloWorldResponseGET.cfm' ，
Java 服务器 (JSP) ： 'HelloWorldResponseGET.jsp' ,
Perl 服务器： 'HelloWorldResponseGET.pl' .
这些文件的代码在下面的部分中会提供，在附件中中也可以下载.

在上面的代码中,你会注意到dojo.xhrGet中引入了一个新的属性. 这个属性 - 内容 - 允许程序员以参数的形式发送任意的数据到服务器. 在这个例子中,我们使用的是GET方法, 服务器脚本通过参数'name'来获取传过来的值. 需要提一下，如果如果这个参数是另外一个名字（例如： 'myName'), 我们还需要把代码改成 (把':'左面的 'name' 改成 'myName' ):

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

因为我们之前没用过,还需要提一下 dojo.byId('name').value. 非常简单, 这个调用是标准的 document.getElementById(..) 函数.

最后,如果你在文本框中输入你的名字，并点击 'Hello World' 按钮, 提示框会显示 'Hello , welcome to the world of Dojo!' ，还有你输入的名字.

这是服务器的代码. 有一些是可以在下面下载.

使用 PHP 服务器

 <?php
 

 /*
* HelloWorldResponseGET.php
* --------
*
* Print the name that is passed in the
* 'name' $_GET parameter in a sentence
*/
 

 header
 (
 'Content-type: text/plain'
 );
 

 print 
 "Hello {$_GET['name']}, welcome to the world of Dojo!/n";
 

 ?>

使用ASP 服务器

 <%
 
 '
 
 ' HelloWorldResponseGET.asp
 
 ' --------
 
 '
 
 ' Print the name that is passed in the
 
 ' 'name' GET parameter in a sentence
 
 '
 
 response.
 ContentType=
 "text/plain"
 
 response.
 write
 (
 "Hello " & 
 request.
 querystring
 (
 "name"
 ) & 
 ", welcome to the world of Dojo!/n"
 )
 
 %>

使用 ColdFusion 服务器

 <!---
 

 /*
* HelloWorldResponseGET.cfm
* --------
*
* Print the name that is passed in the
* 'name' GET parameter in a sentence
*/
 
--->
 
<cfsetting showDebugOutput=
 "No">
 
Hello, #url.
 name#, welcome to the world of Dojo!
 
</cfsetting>

使用 Java 服务器 (JSP)

 <%
 

 /*
' HelloWorldResponseGET.jsp
' --------
'
' Print the name that is passed in the
' 'name' GET parameter in a sentence
*/
 
response.
 setContentType
 (
 "text/plain"
 );
 
%>
 
Hello <%= request.
 getParameter
 (
 "name"
 ) %> , welcome to the world of Dojo!

使用 Perl 服务器

 #!
 /usr/bin/perl
 
#
 
# 
 ' HelloWorldResponseGET.pl
# ' --------
 
# 
 '
# ' 
 Print the 
 name that 
 is passed 
 in the
 
# 
 ' '
 name
 ' GET parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('
 name
 ') . ", welcome to the world of Dojo!/n";

通过POST发送数据到服务器

使用 GET发送数据不错，但是有些时候，你需要使用Dojo来提升用户使用传统表单的用户体验。通常,Dojo有一种更好的处理方式. 再次, 这些文件的代码在下面的片段中, 在附件中也可以下载. 另外,跟上面一样，你同样要把 'url' 属性指向你服务器支持的文件格式.

首先, 我们还要把 HelloWorld.html 文件中body中的部分:

 <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">
 
// Don't forget to replace the value for 'url' with
 
// the value of appropriate file for your server
 
// (i.e. 'HelloWorldResponsePOST.asp') for an ASP server
 
dojo.xhrPost({
 
url: 'HelloWorldResponsePOST.php',
 
load: helloCallback,
 
error: helloError,
 
form: 'myForm'
 
});
 
 </script>

就像我们前面代码显示的那样, 我们把 dojo.xhrGet 修改为 dojo.xhrPost. 我们删除了 'content' 属性，取而代之的是增加了一个新的属性 'form'. 它告知 dojo.xhrPost 函数要使用表单 'myForm' 作为数据的来源l.

最后，当你输入你的名字，点击 'Hello World!' 按钮的时候，提示信息会是 'Hello , welcome to the world of Dojo!' 和你的名字.

使用 PHP 服务器

 <?php
 

 /*
* HelloWorldResponsePOST.php
* --------
*
* Print the name that is passed in the
* 'name' $_POST parameter in a sentence
*/
 

 header
 (
 'Content-type: text/plain'
 );
 

 print 
 "Hello {$_POST['name']}, welcome to the world of Dojo!/n";
 

 ?>

使用ASP 服务器

 <%
 
 '
 
 ' HelloWorldResponsePOST.asp
 
 ' --------
 
 '
 
 ' Print the name that is passed in the
 
 ' 'name' $_POST parameter in a sentence
 
 '
 
 response.
 ContentType=
 "text/plain"
 
 response.
 write
 (
 "Hello " & 
 request.
 form
 (
 "name"
 ) & 
 ", welcome to the world of Dojo!/n"
 )
 
 %>

使用 ColdFusion 服务器

 <!---
 

 /*
* HelloWorldResponsePOST.cfm
* --------
*
* Print the name that is passed in the
* 'name' POST parameter in a sentence
*/
 
--->
 
<cfsetting showDebugOutput=
 "No">
 
Hello, #form.
 name#, welcome to the world of Dojo!
 
</cfsetting>

使用 Java 服务器 (JSP)

 <%
 

 /*
' HelloWorldResponsePOST.jsp
' --------
'
' Print the name that is passed in the
' 'name' POST parameter in a sentence
*/
 
response.
 setContentType
 (
 "text/plain"
 );
 
%>
 
Hello <%= request.
 getParameter
 (
 "name"
 ) %> , welcome to the world of Dojo!

使用 Perl 服务器

 #!
 /usr/bin/perl
 
#
 
# 
 ' HelloWorldResponsePOST.pl
# ' --------
 
# 
 '
# ' 
 Print the 
 name that 
 is passed 
 in the
 
# 
 ' '
 name
 ' POST parameter in a sentence
#
use strict;
use CGI;
my $cgi = CGI::new();
print $cgi->header(-type => "text/html; charset=utf-8");
print "Hello " . $cgi->param('
 name
 ') . ", welcome to the world of Dojo!/n";