Dojo实现Ajax之提交表单与异常处理

  • 3月 12, 2010

现在web2.0的基础是Ajax技术，而Ajax技术的核心便是XMLHttpRequest，在这之上有很多框架，比如jQuery、Prototype、Dojo等等。IBM最广泛应用的便是Dojo了，最近也在常识用Dojo开发，下面介绍了一个实际应用的RIA项目，为WPC Team开发RFT Log解析器，UI界面如下图。

下面着重记录下开发中遇到的问题:
1. 打开首页显示“加载中…” 提示的实现。

dojo.addOnLoad(function(){
showBusyIcon();
// 页面加载处理程序
hideBusyIcon();
});
 
function showBusyIcon()
{
document.getElementById('busyIconId').style.top = '200px';
document.getElementById('busyIconId').style.right = document.body.clientWidth / 2+'px';
document.getElementById('busyIconId').style.display = '';
}
 
function hideBusyIcon()
{
if (document.getElementById('busyIconId') != null)
{
document.getElementById('busyIconId').style.display = 'none';
}
}

2. 提交表单
参考官方文档
利用dojo.byId()查找DOM对象，利用connect建立链接事件处理函数。

var b = dojo.byId("submit");
dojo.connect(b, "onclick", showReport);
 
function showReport() {
var myForm = dijit.byId("myFormTwo");
if (!myForm.isValid())
{
alert("Please specify valid values");
return;  // 表单验证步骤
}
var kw = {
form: dojo.byId("myFormTwo"),   //表单id
url: "parseLog.do",    //表单要提交到的URL
handleAs:"json",  //返回值的处理方式
load: function(response){   //HTTP返回200时的处理函数
alert("Response from server" + response);
hideBusyIcon();
},
error: function(data,ioArgs){    //HTTP返回非200时的处理函数
hideBusyIcon();
alert("An error occurred: " + ioArgs.xhr.responseText);
}
timeout: 2000 //超时时间
};
showBusyIcon();
dojo.xhrPost(kw);  //发送Post请求到Servelet
}

Serve端的Servlet处理方法：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
// 处理逻辑
response.setContentType("text/html;charset=utf-8");
response.getWriter().print(result);  //返回浏览器端的结果，result可以是字符串也可以是JSON
} catch (Exception e) {
response.setContentType("text/html;charset=utf-8");
response.sendError(HttpServletResponse.SC_INTERNAL_SERVER_ERROR, e.getMessage());  //这个返回的message可以在浏览器端通过responseText属性获取。
}
}

页面中的Form tag

<div dojoType="dijit.form.Form" id="myFormTwo" jsId="myFormTwo" >
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
<tr>
<td>
</td>
</tr>
</table>
</div>

3. Dojo grid使用
在 Web 应用的开发中，我们都习惯了由视图驱动的 MVC 模式，Dojo 之类 Ajax 工具包的出现却又像是回到了传统的桌面 MVC 模式，起驱动作用的重新变成了模型。 dojo.data 在 Dojo 工具包中起到的作用就相当于桌面 MVC 模式中的模型（Model），各种 Dojo widget 就相当于视图（View）。使用 Dojo widget 只需用某个标签（tag）声明，并在属性中指定提供数据的模型，其他的事情都由框架来完成，一旦与 widget 相关的数据发生了变化，则 widget 相应地会被更新。
使用 dojox.grid.DataGrid 的一般步骤如下：

* 根据数据源的特点，构造 Data Store 对象。
* 构造布局（Layout）对象，用于定义数据在 dojox.grid.DataGrid 中的呈现样式。
* 构造 dojox.grid.DataGrid 对象，并将其关联到 Data Store 对象以获取数据，关联到 Layout 对象以获取数据显示样式。

构造 dojox.data.DataGrid 对象
在BODY中添加如下Div：

<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid" clientSort="true" style="width: 60em; height: 30em;" structure=gridLayout rowSelector="20px">

js构造布局对象：

var gridLayout=[
{
cells:
[
[
{name:' Component Name ',field:"componentName",width:"10em"},
{name:' Total ',field:"total",width:"5em"} ,
{name:' Pass ',field:"pass",width:"5em" },
{name:' Fail ',field:"fail",width:"5em"},
 
]
] ,
noscroll:true
},
{
cells:
[
[
{name:' Failed Cases List ',field:"failedcaseslist",width:"35em"}
]
]
}
];

构造 Data Store 对象
js中构造：
在xhr.post方法中的load函数可以添加如下代码，response为服务器返回的JSON，符合该grid的定义：

var store = new dojo.data.ItemFileReadStore({data: response});
dijit.byId("grid").setStore(store);

Body中构造：

<span dojoType="dojo.data.ItemFileReadStore" jsId="dataStore" url="data.json">
</span>

Leave a Comment.