初识 Dojo

fastwind

浏览: 323848 次
性别:
来自: 天津

最近访客更多访客>>

winwa

筱筱梦

a379019643

lutabo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

新鲜技术介绍

Dojo CSS JavaScript Ajax ASP.net

过去项目中使用过prototype、mootools、还有微软的ASP.Net Ajax，早在dojo0.3版本时就注意到它的存在，当时认为ajax的框架使用哪个都一样，prototype1.4版本时代码非常精简好用，写ajax异步刷新代码、web页面操作、浏览器的兼容都不错，现在发现dojo太强大了，几乎包含了prototype/mootools/ext核心功能，core/dijit/dojox三剑客至少从表面上看，可以解决大部分项目中对客户端体验要求和实际需求。但Google搜索了一番，发现对dojo评价褒贬不一，比如zerozone翻译的《Ext vs. Dojo》，并且对dojo widgets也存在一些争议，不过是2007年初的事情了，不知道最新的1.1版本表现如何，不管这些了，因为工作技术的要求，看着IBM、SUN、BEA（现在已经被Oracle收购）等重量级产商的支持，准备义无反顾上Dojo！

学习嘛，还是从最基础开始，玩一个基本ajax，参照《The Book of Dojo》。

用VS2005新建一个ASP.Net项目（JSP/PHP/Ruby均可，不影响测试Dojo），看到下面这段代码，相信不用多说什么了

Html代码

<html>
<head>
<title>Dojo: Hello World!</title>
<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>
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dijit.form.Button");
</script>
<script>
function helloCallback(data, ioArgs) {
alert(data);
}
function helloError(data, ioArgs) {
alert('Error when retrieving data from the server!');
}
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="helloButton">Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'response.txt',
load: helloCallback,
error: helloError
});
</script>
</button>
</body>
</head>

<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>
		<!--section 2-->
		<script type="text/javascript">
			// Load Dojo's code relating to the Button widget
			dojo.require("dijit.form.Button");
		</script>
		<script>
		function helloCallback(data, ioArgs) {
			alert(data);
		}
		function helloError(data, ioArgs) {
			alert('Error when retrieving data from the server!');
		}		
		</script>
	</head>

	<body class="tundra">
		<button dojoType="dijit.form.Button" id="helloButton">Hello World!
		<script type="dojo/method" event="onClick">
			dojo.xhrGet({
				url: 'response.txt',
				load: helloCallback,
				error: helloError
					});
		</script>
		</button>
	</body>
</head>

helloCallback作为回调函数，异步请求的发送通过dojo.xhrGet完成，helloError处理异常，值得注意的是"dojo.require ("dijit.form.Button");"，引入了dojo的button widget，并且可直接用于html ui构建中，有点类似于服务器端代码顶端的引用，符合OO程序员的习惯，运行页面，直接点击button就可以看到效果。

上面例子显示的结果是response.txt中的文本，如果需要增加服务器端的处理，可以将url改成"HelloWorldResponseGet.aspx"，通过GET方式传输。

C#代码

Response.ContentType = "text/plain";
Response.Write("Hello " + Request.QueryString["myname"] + ", welcome to the world of Dojo!\n");
Response.End();

Response.ContentType = "text/plain";
Response.Write("Hello " + Request.QueryString["myname"] + ", welcome to the world of Dojo!\n");
Response.End();

ASP.Net一定要加上"Response.End();"，否则返回的结果会包含html段。原来的页面更改为：

Html代码

<html>
<head>
<title>Dojo: Hello World!</title>
<style type"text/css">
@import "dojoroot/dijit/themes/tundra/tundra.css";
@import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<script type="text/javascript">
// Load Dojo's code relating to the Button widget
dojo.require("dijit.form.Button");
</script>
<script>
function helloCallback(data, ioArgs) {
alert(data);
}
function helloError(data, ioArgs) {
alert('Error when retrieving data from the server!');
}
</script>
</head>
<body class="tundra">
<button dojoType="dijit.form.Button" id="helloButton">Hello World!
<script type="dojo/method" event="onClick">
dojo.xhrGet({
url: 'HelloWorldResponseGet.aspx',
load: helloCallback,
error: helloError,
content: {myname: dojo.byId('name').value }
});
</script>
</button>
Please enter your name: <input type="text" id="name">
</body>
</head>

<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="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
		<!--section 2-->
		<script type="text/javascript">
			// Load Dojo's code relating to the Button widget
			dojo.require("dijit.form.Button");
		</script>
		<script>
		function helloCallback(data, ioArgs) {
			alert(data);
		}
		function helloError(data, ioArgs) {
			alert('Error when retrieving data from the server!');
		}		
		</script>
	</head>

	<body class="tundra">
		<button dojoType="dijit.form.Button" id="helloButton">Hello World!
		<script type="dojo/method" event="onClick">
			dojo.xhrGet({
				url: 'HelloWorldResponseGet.aspx',
				load: helloCallback,
				error: helloError,
				content: {myname: dojo.byId('name').value }
					});
		</script>
		</button>
		Please enter your name: <input type="text" id="name">
	</body>
</head>

dojo.xhrGet的参数content用来描述传输的参数，页面增加了一个input元素，dojo.byId？即使没有接触过dojo，估计也能猜到是getElementById()。看运行效果：

输入名字，点击"Hello World!"。

总体上感觉有点像微软，把所有工作都做好了，你只需要怎么去用它的组件和库，一个hello world说明不了问题，以后再逐步深入。

分享到：

JSON简介 | 用 javascript 处理 JSON

2008-04-13 22:47
浏览 1880
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初识 Dojo

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

初识 Dojo

评论

发表评论

相关推荐

GWT 入门介绍（续）

GWT 入门介绍

初探JAXER

JSON-RPC的简介

JSON简介

用 javascript 处理 JSON

DOM和SAX概念的总结

什么是SOA？

从追MM谈Java的23种设计模式

SSO介绍

最近访客更多访客>>