`
fastwind
  • 浏览: 324414 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

初识 Dojo

DojoCSSJavaScriptAjaxASP.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代码 复制代码
  1. <html>  
  2.     <head>  
  3.         <title>Dojo: Hello World!</title>  
  4.         <!--section 1-->  
  5.         <style type"text/css">  
  6.             @import "dojoroot/dijit/themes/tundra/tundra.css";   
  7.             @import "dojoroot/dojo/resources/dojo.css";   
  8.         </style>  
  9.         <script type="text/javascript" src="dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true"></script>  
  10.         <!--section 2-->  
  11.         <script type="text/javascript">  
  12.             // Load Dojo's code relating to the Button widget   
  13.             dojo.require("dijit.form.Button");   
  14.         </script>  
  15.         <script>  
  16.         function helloCallback(data, ioArgs) {   
  17.             alert(data);   
  18.         }   
  19.         function helloError(data, ioArgs) {   
  20.             alert('Error when retrieving data from the server!');   
  21.         }          
  22.         </script>  
  23.     </head>  
  24.   
  25.     <body class="tundra">  
  26.         <button dojoType="dijit.form.Button" id="helloButton">Hello World!   
  27.         <script type="dojo/method" event="onClick">  
  28.             dojo.xhrGet({   
  29.                 url: 'response.txt',   
  30.                 load: helloCallback,   
  31.                 error: helloError   
  32.                     });   
  33.         </script>  
  34.         </button>  
  35.     </body>  
  36. </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#代码 复制代码
  1. Response.ContentType = "text/plain";   
  2. Response.Write("Hello " + Request.QueryString["myname"] + ", welcome to the world of Dojo!\n");   
  3. 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代码 复制代码
  1. <html>  
  2.     <head>  
  3.         <title>Dojo: Hello World!</title>  
  4.         <!--section 1-->  
  5.         <style type"text/css">  
  6.             @import "dojoroot/dijit/themes/tundra/tundra.css";   
  7.             @import "dojoroot/dojo/resources/dojo.css";   
  8.         </style>  
  9.         <script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true"></script>  
  10.         <!--section 2-->  
  11.         <script type="text/javascript">  
  12.             // Load Dojo's code relating to the Button widget   
  13.             dojo.require("dijit.form.Button");   
  14.         </script>  
  15.         <script>  
  16.         function helloCallback(data, ioArgs) {   
  17.             alert(data);   
  18.         }   
  19.         function helloError(data, ioArgs) {   
  20.             alert('Error when retrieving data from the server!');   
  21.         }          
  22.         </script>  
  23.     </head>  
  24.   
  25.     <body class="tundra">  
  26.         <button dojoType="dijit.form.Button" id="helloButton">Hello World!   
  27.         <script type="dojo/method" event="onClick">  
  28.             dojo.xhrGet({   
  29.                 url: 'HelloWorldResponseGet.aspx',   
  30.                 load: helloCallback,   
  31.                 error: helloError,   
  32.                 content: {myname: dojo.byId('name').value }   
  33.                     });   
  34.         </script>  
  35.         </button>  
  36.         Please enter your name: <input type="text" id="name">  
  37.     </body>  
  38. </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说明不了问题，以后再逐步深入。
分享到：
| 用 javascript 处理 JSON
评论
发表评论

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

相关推荐

    基于J2EE的Ajax宝典.docx

    在**第一部分 初识Ajax**中，作者首先引入了Web应用的发展背景，阐述了传统Web应用的优点和缺点。传统Web应用依赖于HTTP的请求-响应模型，导致用户必须等待整个页面刷新，降低了用户体验。为了解决这个问题，Ajax...

    深入浅出Struts2(附源码)

    第2章初识Struts 14 2.1 Struts的优点 14 2.2 Struts的动作处理流程 15 2.3 拦截器 17 2.4 Struts配置文件 18 2.4.1 struts.xml文件 19 2.4.2 struts.properties文件 26 2.5 Struts应用程序示例 26 2.5.1 ...

    深入浅出Struts 2 .pdf(原书扫描版) part 1

    第2章 初识Struts 14 2.1 Struts的优点 14 2.2 Struts的动作处理流程 15 2.3 拦截器 17 2.4 Struts配置文件 18 2.4.1 struts.xml文件 19 2.4.2 struts.properties文件 26 2.5 Struts应用程序示例 26 2.5.1 部署描述...

Magicbox
Global site tag (gtag.js) - Google Analytics