- 浏览: 447985 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
建悦胡:
好文,必须顶
关于系统中使用多个PropertyPlaceholderConfigurer的配置 -
阿毛色色:
感谢!解决问题
关于系统中使用多个PropertyPlaceholderConfigurer的配置 -
fangwei06056115:
...
Maven中指定得AspectJ依赖无法添加得解决方案 -
abc3720:
Dashboard配置系统 是是商业的吗?如果不是发我看一下吗 ...
图示ExtJS商业智能的仪表盘配置系统 - (Season 1) -
maidou80:
的确有帮助 3Q
Ext表单中的combobox回填显示值问题
感 于Ajax请求的使用为RIA(Rich Internet Applications)的开始,但大多数刚接触富客户端的同学还不是很清楚具体的使用方法,所以根据自己的使用心得写下此篇Blog留作拾遗。
(PS: 看网上大多数的技术Blog都写的毫无生气,只有严谨的态度,所以我一直在努力尝试使用生趣的方式展现技术文章,毕竟希望技术能带给大家快乐,乐知才最重要,生活才最最重要)
大概在2005年末,开始接触Ajax技术,开始于对《Ajax基础教程-Foundations of Ajax》 一书的阅读,其深入浅出的讲述方式、典型的实例和简洁清晰的代码,让这本书很适合刚开始使用Ajax技术的Web开发人员用来基础学习。
此书中的例子是最原始的Ajax使用方式,没有任何的封装及使用JS类库,也因当时的Prototype类库不是很成熟。对于这种未加封装的Ajax使用,自然就会面临Web浏览器类型的判别及数据乱码的问题,所以以这种方式写Ajax请求不免很多的判断条件的繁琐代码,让人看起来以为你是在coding凑数,无良的骗取钱财。以下是这些繁琐代码的示例,有兴趣的同学可以研究一下:
// Origin Ajax program paradigm var xmlHttp; // 判断浏览器,决定使用哪种创建请求的方式 function createXMLHttpRequest(){ if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } } // 回调方法中需判断浏览器的返回状态 function callBack(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var message =xmlHttp.responseText; if(message == 'T'){ alert("Insert successful!"); opener.location.reload(); self.close(); } else if(message == 'F'){ alert("Insert failed!"); } } } } // function sendSaveURL(){ var tableId = $F("tableId"); tableId = trim(tableId); var validateValue = inputValidate( '表名:tableId:text', '机构:bankId:text', '币种:currId:text', '日期:reportDate:date', '申请理由:reason:text' ); if(validateValue){ var queryString = Form.serialize("form1"); // 需使用JS添加时间参数,确保服务器端的请求认定 var url = "saveRedoApply.do?timeStamp=" + new Date().getTime(); createXMLHttpRequest(); // 设置xmlHttp请求的报文头 xmlHttp.open("POST",url,false); xmlHttp.onreadystatechange = callBack; xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); xmlHttp.send(queryString); return xmlHttp.responsText; } }
上面代码中的方法已做了注释,从中可以看出未加任何封装的Ajax请求的繁琐。后来自己封装了以上方法才看起来简洁些。
根据定义,Ajax请求的生命周期为:
-
Created (创建)
-
Initialized (初始化)
-
Request sent (发送请求)
-
Response being received (can occur many times, as packets come in) (接收响应过程)
-
Response received, request complete (已接收响应,请求完成)
这也是开发前必须清楚的事项。
随后Prototype中也提供了比较稳定易用的Ajax封装,这使得使用Ajax请求不必再了解Origin般原汁原味的繁琐处理了。
下面是Prototype的Ajax实例:
new Ajax.Request('/your/url', { onSuccess: function(transport) { // yada yada yada } });
可以看出来封装后的确很易用,概念也明朗了许多。
然后是ExtJS中的Ajax对象提供的请求方法,很类似于Prototype的封装及使用方式。就Get及Post两种方式说明一下
其使用方式,首先来看Get方式:
Ext.Ajax.request({ url: 'dashboardChartFormProvider.do', success: function(response) { // 接收响应文本的示例 var str = response.responseText; // 将响应转换为对象的示例 var obj = response.responseText.evalJSON(); }, failure: Ext.emptyFn, params: { pid: parmId } });
Ext的ajax默认的请求方式为Get,所以也就不用特别声明使用何种请求方式了。url 是请求的链接,success 是请求成功后的回调方法,failure 是失败后的回调方法,params 为请求参数。
在这里特别要说明的是对于success和failure方法的理解,对此有很多小盆友有误解,认为后台成功后设置响应参数success为true自然就调用成功的处理方法,否则则调用十倍的处理方法,但发现不管后台(backend)处理逻辑失败与否最后调用的都是Ajax的success方法,而不解。其实这里的ajax的success方法指的并不是逻辑上的成功或失败,而指的是http通讯的响应状态成功与否,也就是在上面origin那段代码示例中判断的xmlHttp.status == 200的响应状态。这样我们也就明确了回调方法的使用,对于逻辑上的成功失败的判断需要我们自己在success中完成并添加对应的处理方法。
另附xmlHttp.statu状态码,具体如下:
100:Continue 101:Switching Protocols 102:Processing 200:OK 201:Created 202:Accepted 203:Non-Authoriative Information 204:No Content 205:Reset Content 206:Partial Content 207:Multi-Status 300:Multiple Choices 301:Moved Permanently 302:Found 303:See Other 304:Not Modified 305:Use Proxy 306:(Unused) 307:Temporary Redirect 400:Bad Request 401:Unauthorized 402:Payment Granted 403:Forbidden 404:File Not Found 405:Method Not Allowed 406:Not Acceptable 407:Proxy Authentication Required 408:Request Time-out 409:Conflict 410:Gone 411:Length Required 412:Precondition Failed 413:Request Entity Too Large 414:Request-URI Too Large 415:Unsupported Media Type 416:Requested range not satisfiable 417:Expectation Failed 422:Unprocessable Entity 423:Locked 424:Failed Dependency 500:Internal Server Error 501:Not Implemented 502:Bad Gateway 503:Service Unavailable 504:Gateway Timeout 505:HTTP Version Not Supported 507:Insufficient Storage
最后让我们看看Post方式的请求方法,Post可以使用url或form的方式来发送请求。首先是form的方式,示例代码如下:
Ext.Ajax.request({ form: 'formId', method: 'POST', success: function(response, opt) { // TODO: finish this method }, failure: Ext.emptyFn });
<!-- 表单示例 --> <form id='foo' method='post' action='something.do'> <input name='parm1' type="text" /> <input name='parm2' type="text" /> <input name='parm3' type="text" /> </form>
方法很简洁,不过不足之处是需要由你来维护表单中的值,而且html也中的代码也会因为form而增多。而使用url的方式就会利用js的对象技术而使html页更简洁些,示例如下:
Ext.Ajax.request({ url: 'something.do', method: 'POST', params: form, success: function(response) { // TODO: finshed this method here }, failure: Ext.emptyFn });
/** * Object for ajax request defined */ function Object1(){ this.parm1 = ""; this.parm2 = ""; this.parm3 = ""; } ChartForm.prototype.getParm1 = function(){ return this.parm1; } ChartForm.prototype.setParm1 = function(parm1){ this.parm1= parm1; }
其中params中对应填入你的js请求的Object,此种方式优点在于利用JS的面向对象的封装方式来做ajax请求,代码更为简洁,设计思路更为清晰。而这样前台为JS对象,返回后将其映射为java对象的做法让你可以利用OO的思想来开发Web程序,这也是目前JS编程的流行的做法,你可以更多的关注领域模型的设计,对于你来说前后台交互所面对的都是业务对象。
至此,我已简要的向你介绍了Ajax的请求使用历程。通过此篇你可以学习到ajax的原始请求形式,利用类库简化后的请求,及如何使用JS面向对象的方式来与后台交互,还有Ajax的生命周期及状态码的意义。值得注意的是ext对于ajax封装后的success方法的理解,这里的成功指的是http通讯状态的成功而非方法逻辑上的成功与否。
让我们继续关注Ajax能带给我们什么惊喜。
发表评论
-
Ext-3.1.0下组件中按钮居中问题的记要
2010-01-13 16:37 4169好久不写Ext的代码了,今天把ext-2.2替换成ext-3. ... -
图示ExtJS商业智能的仪表盘配置系统 - (Season 1)
2009-08-03 14:23 8951近些天在研究商业智能(BI)的系列产品,如[Analysis] ... -
扩展组件:GroupingView + PropertyGrid = ? (蒙牛版)
2009-06-24 17:39 2924原来: 牛奶 + 豆浆 = 豆奶 ... -
JavaScript反射读取Object属性
2009-06-09 18:12 4597最近需要用到JS的反射机制读取对象属性,类似Java中的自省, ... -
如何模仿iGoogle的界面(How to Mimic the iGoogle Interface)
2009-06-08 11:03 0在此篇文章中我将向你展示怎样创建自定义的窗口界面。完成的产品将 ... -
ExtJS中JSON数据传递乱码的解决
2009-05-20 11:21 4878服务器环境: Jetty 6.1.7 ExtJ ... -
主题:EXT新手建议:建立自己的工具箱(Toolkit)
2009-05-13 13:33 2313我认为学习EXT开发最好的方法是,在真正开发之前,掌握好高 ... -
基于ExtJS-2.2实现的Ajax登录页面
2009-05-12 16:23 11918最近对Acegi的改造比较感兴趣,所以基于Acegi和ExtJ ... -
基于Acegi实现的Ext权限系统 - 登录部分(含效果图)
2009-05-12 16:15 2667明天将会完成此文,Sorry -
Ext已验证Xtype列表
2009-05-06 11:18 1457This is the list of all valid x ... -
改进EXT提供的Portal组件,自定义最小化最大化按钮
2008-11-21 16:07 4538使用EXT来实现项目的UI,项目中的首页需要一个类似Porta ... -
Ext扩展TriggerField实现唯一值校验
2008-11-03 16:33 1806为了验证输入域的值为唯一值,扩展了Ext.form.Tirgg ... -
使用Ext的ajax请求程序范例
2008-10-09 15:58 1521This is the programming paradig ... -
基于Ext同步加载tree的实例
2008-09-26 14:10 4657基于Ext的TreeNode实现的tree有两种方式加载:一种 ... -
基于Ext异步加载tree的实例
2008-09-26 09:51 10160使用JS生成树形结构的菜单是基于J2EE的B/S系统常用的UI ... -
Grid中使用的Combobox
2008-08-28 18:13 4434Ext的Grid中使用combobox做为编辑控件时,遇到在c ... -
Ext表单中的combobox回填显示值问题
2008-08-28 17:36 10579缘由:在基于Ext构建的表单(form)中使用了Combobo ... -
如何将服务器返回的Json值填入到EXT的Form中 (双语版)
2008-08-27 13:49 3466如何将服务器返回的json数据自动回填到我的form里头去?想 ... -
Ext中初始化配置项iconCls的使用方法
2008-08-12 17:42 4127使用过Ext(http://www.extjs ... -
Ext中图标受损或图表显示不完整问题解决
2008-08-07 14:54 2924在Ext引用页面中加入红色部分的空白占位图标即可解决此问题。 ...
相关推荐
在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...
标题"Ext.Ajax.request跨域"指出我们将探讨如何使用ExtJS库中的Ajax模块进行跨域请求。Ext.Ajax.request是ExtJS提供的一种发起Ajax请求的方式,它允许开发者向服务器发送异步HTTP请求。然而,由于浏览器的同源策略...
在处理异步和同步请求时,Ext.Ajax是ExtJS中的一个关键组件。标题提到的"ext-basex.js进行Ext.Ajax.request同步请求 FF无法正常"问题,涉及到浏览器兼容性和异步/同步请求的理解。 `Ext.Ajax.request`是ExtJS中的一...
在EXTJS框架中,`Ext.Ajax.request`是进行异步AJAX通信的核心方法,它提供了与服务器端交互的能力,支持GET、POST等多种HTTP请求方式。这篇文章将深入探讨`Ext.Ajax.request`的使用,以及在实际应用中可能遇到的小...
其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...
我们可以使用`Ext.get`和`Ext.fly`来操作这些元素: ```javascript // 使用Ext.get var el = Ext.get('foo'); el.hide(); // 使用Ext.fly var flyEl = Ext.fly('bar'); flyEl.show(); ``` 在这个例子中,`Ext.get...
ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...
通过结合中文API文档和教程,开发者可以全面掌握Ext.js 3.0的使用,从而构建出高效、用户体验良好的Web应用程序。虽然现在有更新的版本(如Ext JS 7.x),但学习旧版本有助于理解框架的发展历程,同时许多核心概念在...
然而,如果我们需要为整个应用的Ajax请求设置统一的拦截器,可以使用`Ext.Ajax.on`方法来监听`beforerequest`和`requestcomplete`事件: ```javascript Ext.Ajax.on('beforerequest', function(connection, options...
Ext Ajax:如何调用Ext.Ajax.request方法和使用Java Servlet进行处理
在EXTJS这个强大的JavaScript框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们都用于操作DOM元素,但它们之间存在着微妙的差异。了解这些差异对于优化代码性能和理解EXTJS的工作机制至关重要。 首先,`Ext....
(1)Ext.FormPanel f.getForm().submit({ url:”... }, failure:function(c,v,e){} }) (2)Ext.Ajax.request Ext.Ajax.request({ url:”….”, params:{XX:xx….}, success: function (v,c) { var json=Ext.decode(v.r
`Ext.Ajax`提供了丰富的API,可以进行POST、GET、PUT、DELETE等多种HTTP请求,并且支持异步和同步操作。下面将详细介绍`Ext.Ajax`的一些关键方法和使用场景: 1. **发送请求:** `Ext.Ajax.request`是核心方法,...
在使用`Ext.Ajax.request`方法时,设置`async`参数为`false`可以使请求变为同步。例如: ```javascript Ext.Ajax.request({ url: 'your-url', method: 'GET', async: false, // 设置为false表示同步请求 ...
这样做会使得`Ext.data.Store`在向服务器请求数据时自动添加`sort`和`dir`参数,从而让服务器端能够根据这些参数进行排序处理。 ```javascript var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({...
在Ext JS中,我们可以使用`Ext.Ajax`类来发送Ajax请求。这个类提供了异步请求的接口,支持POST、PUT、DELETE等HTTP方法。对于文件上传,我们需要设置`useXhrUpload`为true,并将文件字段添加到FormData对象中。以下...
在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...