Dojo实现Ajax之提交表单与异常处理
现在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> |