DOJO入门(1)-Hello,World!

最新推荐文章于 2020-03-19 10:50:05 发布

mint

最新推荐文章于 2020-03-19 10:50:05 发布

阅读量3.8k

点赞数

文章标签： dojo button function html stylesheet server

本文链接：https://blog.csdn.net/mint/article/details/1445290

版权

参考原文地址：

http://dojo.jot.com/WikiHome/HelloWorld

一、建立一个DOJO的环境

然后建立以下的目录树，将dojo的内容全部复制到其中，就象这样:

OK，接下来，新建一个HTML页：

<html>

  <head>

<title>Dojo: Hello World!</title>

</head>

<body>

</body>

</html>

二、添加一个装饰按钮

(1)在头部再添加一个新的JS section:

// 装入widget相关代码

dojo.require("dojo.widget.*");

// 装入Button相关代码

dojo.require("dojo.widget.Button");

</script>

嗯，感觉有点象namespace

(2)在body中加入以下代码：

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

结果如下：

三、引发一个事件

将前面的代码：

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.Button");

</script>

改为：

dojo.require("dojo.event.*");

dojo.require("dojo.widget.*");

dojo.require("dojo.widget.Button");

</script>

将最终变成：

<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Dojo: Hello World!</title>

dojo.require("dojo.event.*");

// Load Dojo's code relating to widget managing functions

dojo.require("dojo.widget.*");

// Load Dojo's code relating to the Button widget

dojo.require("dojo.widget.Button");

function helloPressed()

{

alert('You pressed the button');

}

function init()

{

var helloButton = dojo.widget.byId('helloButton');

dojo.event.connect(helloButton, 'onClick', 'helloPressed')

}

dojo.addOnLoad(init);

</script>

</head>

<body>

This is my HTML page.

<br>

Hello World!

</button>

</body>

</html>

最后的效果：

四、从服务器端读数据

(1)先写一个回调函数：

function helloCallback(type, data, evt)

{//三个参数：类型、数据、事件

if (type == 'error')

alert('从服务器端读数据错!');

else

alert(data);

}

(2) 将：

function helloPressed()

{

alert('You pressed the button');

}

改为：

function helloPressed()

{

dojo.io.bind({

url: 'response.txt',

handler: helloCallback

});//接收response.txt的数据,并回调helloCallback函数

}

直接运行的话：

嗯，它需要一个服务器端文件：

在同一目录下建一个response.txt文件，内容如下：

Welcome to dojo!form server!

结果：

五、支持交互:使用GET方法将数据发到服务器端，然后再在客户端显示

示例4只支持静态数据，缺少太多的东西，这个示例将它做得更复杂些!

(1)建立一个服务器端程序

建一个jsp页面: GetDataToClient.jsp，关键代码如下：

<body>

This is my JSP page.

<br>

Hello

<%=request.getParameter("MyName")%>

, welcome to the world of Dojo!

</body>

(2)客户端的修改—HTML代码：

将:

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

改为：

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

<br>

Please enter your name: <input type="text" id="name">

(3)客户端的修改-js代码

将:

function helloPressed()

{

dojo.io.bind({

url: 'response.txt',

handler: helloCallback

});

}

改为：

function helloPressed()

{

// Don't forget to replace the value for 'url' with

// the value of appropriate file for your server

// (i.e. ' GetDataToClient.jsp ') for an Tomcat server

dojo.io.bind({

url: ' GetDataToClient.jsp ',

handler: helloCallback,

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

});

}

这比上次多了一个参数:content:{

结果如下：

在此示例中，我们使用Dojo的io.bind将本地数据发送到了服务器端，然后再将服务器端处理后的数据发回了本地!

完整代码如下：

Code 1:

<%@ page language="java" pageEncoding="GBK"%>

<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Dojo: Hello World!</title>

dojo.require("dojo.event.*");

// Load Dojo's code relating to widget managing functions

dojo.require("dojo.widget.*");

// Load Dojo's code relating to the Button widget

dojo.require("dojo.widget.Button");

function helloCallback(type, data, evt)

{

if (type == 'error')

alert('error read from server!');

else

alert(data);

}

function helloPressed()

{

// Don't forget to replace the value for 'url' with

// the value of appropriate file for your server

// (i.e. ' GetDataToClient.jsp ') for an Tomcat server

dojo.io.bind({

url: 'GetDataToClient.jsp',

handler: helloCallback,

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

});

}

function init()

{var helloButton = dojo.widget.byId('helloButton');

dojo.event.connect(helloButton, 'onClick', 'helloPressed')

}

dojo.addOnLoad(init);

</script>

</head>

<body>

This is my HTML page.

<br>

Hello World!

</button>

<br>

Please enter your name:

</body>

</html>

Code 2:

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" + request.getServerPort()

+ path + "/";

<!DOCTYPE HTML PUBLIC "-//W 3C //DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>My JSP 'GetDataToClient.jsp' starting page</title>

<!--

-->

</head>

<body>

This is my JSP page.

<br>

Hello

<%=request.getParameter("MyName")%>

, welcome to the world of Dojo!

</body>

</html>

六、使用post完成同样的功能 :

Get方法问题比较多，一般我们都使用POST来完成任务。

(1) HTML代码更改：

将:

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

<br>

Please enter your name: <input type="text" id="name">

为:

<button dojoType="Button" widgetId="helloButton">Hello World!</button>

<br>

Please enter your name: <input type="text" name="name">

</form>

(2) JS代码更改：

function helloPressed()

{

// Don't forget to replace the value for 'url' with

// the value of appropriate file for your server

// (i.e. ' GetDataToClient.jsp ') for an JSP server

dojo.io.bind({

url: 'GetDataToClient.jsp ',

handler: helloCallback,

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

});

}

改为：

function helloPressed()

{

// Don't forget to replace the value for 'url' with

// the value of appropriate file for your server

dojo.io.bind({

url: ‘GetDataToClient.jsp ',

handler: helloCallback,

formNode: dojo.byId('myForm')

});

}

注意：这次是提交的POST形式的form!

(3) 服务器端的修改:

删除所有的GetDataToClient.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!

这是最后的结果：

mint

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOJO入门(1)-Hello,World!

参考原文地址：http://dojo.jot.com/WikiHome/HelloWorld一、建立一个DOJO的环境然后建立以下的目录树，将dojo的内容全部复制到其中，就象这样: OK，接下来，新建一个HTML页： Dojo: Hello World! 二、添加
复制链接

扫一扫