泰山磨剑
十年磨一剑
十年磨一剑
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>> Ext服务器交互技术详解(一)
Ext服务器交互技术详解(一)
    作者: 来源: 发表时间:2008-04-01

 
 

  Ext是一个非常好的Ajax框架,其华丽的外观表现确实令我们折服,然而一个应用始终离开不服务器端,因此在实现开发中我们需要对Ext与服务器端的交互技术有较为详细的了解,在开发中才能游刃有余地应用。本文对Ext应用中与服务器交互的常用方法作具体的介绍,本文的内容大部份来源于《ExtJS实用开发指南》
  总体来说,Ext与服务器端的交互应用可以归结为三种类型,包含表单FormPanel的处理(提交、加载)、控件交互及用户发起的Ajax请求等三种。
一、表单提交(submit)及加载(load)
  这里说的表单是指用Ext的FormPanel建立的表单,看下面的例子:

Ext.onReady(function(){
  
var f=new Ext.form.FormPanel({
  renderTo:
"hello",
  title:
"用户信息录入框",
  height:
200,
  width:
300,
  labelWidth:
60,
  labelAlign:
"right",
  frame:
true,
  defaults:
{xtype:"textfield",width:180},
  items:[
  
{name:"username",fieldLabel:"姓名"},
  
{name:"password",fieldLabel:"密码",inputType:"password"},
  
{name:"email",fieldLabel:"电子邮件"},
  
{xtype:"textarea",name:"intro",fieldLabel:"简介"}
  ],
  buttons:[
{text:"提交"},{text:"取消"}]  
 }
)
 }
);

 

要提交该表单,则可以直接调用FormPanel下面form对象的submit方法即可,代码如下:

f.form.submit({
     url:
"server.js",
waitTitle:
"请稍候",
     waitMsg:
"正在提交表单数据,请稍候。。。。。。"
     }
);


  调用submit方法后,默认情况下服务器端应用程序需要返回一个JSON数据对象,该对象包含两个属性,success的值是布尔值true或false,如果success的值为true,则表示服务器端处理成功,否则表示失败;而errors的值是一个对象,对象中的每一个属性表示错误的字段名称,而属性值为错误描述。
  比如,如果我们有服务器端验证,下面的返回结果表示当表单提交处理出错时给客户端返回的数据。
server.js文件中的内容如下:

{
    success: 
false,
    errors: 
{
        username: 
"姓名不能为空",
        times: 
"迟到次数必须为数字!"
    }

}


结果如图所示:


 
  当然,如果success属性值改为true,则表示服务器端的处理成功,此时可以在success定义的回调函数中作相应的处理,比如下面的代码表示在表单处理成功后,弹出提示信息,代码如下:

f.form.submit({
     waitTitle:
"请稍候",
     waitMsg:
"正在提交表单数据,请稍候。。。。。。",
     url:
" server.js",
     method:
"POST",
     success:
function(action,form)
     
{
      alert(
"提交成功!");
     }
)

 
  另外一种表单动作是表单中数据的加载。要给表单中的字段设置值,可以通过调用字段的setValue方法,也可以直接在初始化字段的时候在配置参数中设置value属性值,另外还有一种方法是通过Ajax的方式从服务器端加载表单中各个字段的值。这种方式也就是我们这里要介绍的表单数据加载。
  ExtJS的表单数据加载通过BasicForm的load方法来进行,表单数据加载动作由类Ext.form.Action.Load定义,执行数据加载动作会到服务器端加载数据,默认情况下服务器端需要返回一个包含success属性及data属性的JSON对象,内容大致如下:

 

{
    success: 
true,
    data: 
{
        username: 
"冷雨",
        times: 
1
    }

}


下面我们看一个使用到表单数据加载的简单示例代码:

Ext.QuickTips.init();
Ext.onReady(
function()
 
var f=new Ext.form.FormPanel({
  renderTo:
"hello",
  title:
"用户信息录入框",
  height:
130,
  width:
320,
  labelWidth:
60,
  labelAlign:
"right",
  frame:
true,
  defaults:
{width:180,xtype:"textfield"},
  items:[
{
   xtype:
"textfield",
   name:
"username",
   fieldLabel:
"姓名"
   }
,
   
{
   xtype:
"textfield",
   name:
"times",
   fieldLabel:
"登录次数"
   }

  ],
  buttons:[
{text:"加载表单数据",
    handler:s}
]   
 }
); 
 
function s()
 
{
 f.form.load(
{
     waitTitle:
"请稍候",
     waitMsg:
"正在加载表单数据,请稍候。。。。。。",
     url:
"data.js",
     success:
function(action,form)
     
{
      alert(
"加载成功!");
     }
,
     failure:
function(action,form)
     
{
      alert(
"数据加载失败!");
     }

     }
); 
 }

 
 }
);

 

服务器data.js中的内容为:

{
    success: 
true,
    data: 
{
        username: 
"冷雨",
        times: 
100
    }

}


当点击“加载表单数据”按钮的时候,会执行f这个函数,f函数中直接调用f.form.load({})来加载表单中的数据,load方法中的参数与submit方法类似。执行上面的代码,在从服务器端成功加载数据后,会自动把加载的数据设置到表单对应的各个字段中,然后还会执行success指定的回调函数,如图9-23所示。
 


图 9-23 表单数据加载示例

二、控件的交互
  一些需要从服务器加载数据的控件会自动与服务器交互,比如TreePanel下面的TreeLoader、GridPanel里面用到的Store等。这些控件其实都可以加载各种类型的数据,也就是理论上服务器可以返回任意数据给Ext客户端,然后由Ext客户端转化成这些控件可以识别的数据。这些控件都提供了默认的数据解析器,能解析固定格式的数据供这些控件使用,在使用这些控件的时候,我们需要仔细看这些控件的API,看他们具体能处理什么样格式的数据,这样就可以在服务器端返回其默认的数据格式即可。
  下面,我们来看TreePanel,这是Ext中用来显示树结构的控件,该控件可以通过一个url来加载树的节点信息,并支持异步树节点加载方式。看下面使用TreePanel的代码:

var root=new Ext.tree.AsyncTreeNode({
  id:
"root",
  text:
"树的根"}
);
 
var tree=new Ext.tree.TreePanel({
  renderTo:
"hello",
  root:root,
  loader: 
new Ext.tree.TreeLoader({url:"treedata.js"}),
  width:
100
 }
);


  在代码中,treedate.js表示服务器的程序,Ext在渲染这棵树,需要加载树节点的时候会向服务器发起一个请求,通过这个请求的返回结果来加载树的节点信息。默认情况下Ext要求服务器端返回的是一个包含树节点信息的JSON数组,格式如下:
  [{节点对象1},{节点对象2}]
  比如treedata.js中可以包含下面的数据:

[{
        id: 
1,
        text: 
'子节点1',
        leaf: 
true
    }
,{
        id: 
2,
        text: 
'儿子节点2',
        children: [
{
            id: 
3,
            text: 
'孙子节点',
            leaf: 
true
        }
]
   }
]


下面是树的显示结果:
 

  再比如GridPanel,用于显示表格数据,GridPanel控件使用Store来存放表格中的数据,而Ext中的Store通过DataReader来解析数据,不同的DataReader可以解析不同的数据,因此在使用表格的时候,根据客户端使用的DataReader不同,服务器端需要返回相应格式的数据。假如我们使用XmlReader,Store的定义如下:
 

var store=new  Ext.data.Store({
  url:
"hello.xml",  
  reader:
new Ext.data.XmlReader({
   record:
"row"}
,
   [
"id","name","organization","homepage"])
  }
); 

使用该store的表格代码如下:

Ext.onReady(function()
 
var store=new  Ext.data.Store({
  url:
"hello.xml",  
  reader:
new Ext.data.XmlReader({
   record:
"row"}
,
   [
"id","name","organization","homepage"])
  }
); 
 
var colM=new Ext.grid.ColumnModel([{header:"项目名称",dataIndex:"name",sortable:true},
     
{header:"开发团队",dataIndex:"organization",sortable:true},
     
{header:"网址",dataIndex:"homepage" }]);
 
var grid = new Ext.grid.GridPanel({
  renderTo:
"hello",
  title:
"中国Java开源产品及团队",
  height:
200,
  width:
600
  cm:colM,
  store:store,
  autoExpandColumn:
2
 }
); 
 store.load(); 
 }
);

 

这里要求服务器端返回类似下面的xml数据:

<?xml version="1.0" encoding="UTF-8"?>
<dataset>
 
<row>
  
<id>1</id>
  
<name>EasyJWeb</name>
  
<organization>EasyJF</organization>
  
<homepage>www.easyjf.com</homepage>
 
</row>
 
<row>
  
<id>2</id>
  
<name>jfox</name>
  
<organization>huihoo</organization>
  
<homepage>www.huihoo.org</homepage>
 
</row>
 
<row>
  
<id>3</id>
  
<name>jdon</name>
  
<organization>jdon</organization>
  
<homepage>www.jdon.com</homepage>
 
</row>
 
<row>
  
<id>4</id>
  
<name>springside</name>
  
<organization>springside</organization>
  
<homepage>www.springside.org.cn</homepage>
 
</row>
</dataset>


三、 Ext.Ajax.request方法
  其实,不管是FormPanel的处理,还是控件的交互,他们在访问服务器端的时候,90%都是通过使用Ext.Ajax.request方法来进行的,该方法可以用来向服务器端发送一个http请求,并可以在回调函数中处理返回的结果。往远程服务器发送一个HTTP请求,发送Ajax调用的时候该方法的签名如下:
Ext.Ajax.rquest( [Object options] ) : Number

  服务器的响应是异步的,因此需要在回调函数中处理服务器端返回的数据。回调函数可以定义在request方法调用的参数options中。另外,在request方法中可以定义Ajax请求的一些其它属性。参数options是一个对象,该对象包含了Ajax请求所需的各种参数及回调处理参数等。options中可以包含的各个属性及含义如下所示:
  url String 指定要请求的服务器端url,默认值为Ajax对象中配置的URL参数值。
  params Object/String/Function 指定要传递的参数,可以是一个包含参数名称及值的对象,也可以是name=xx&birthday=1978-1-1类似的url编码字符串,或者是一个能返回上述两种内容的函数。
  method String 指定发送Ajax请求使用的method,可以是GET或POST方式。默认情况下,如果请求中没有传递任何参数则使用GET,否则使用POST。
  callback Function 指定Ajax请求的回调函数,该函数不管是调用成功或失败,都会执行。传递给回调函数的参数有三个,第一个options表示执行request方法时的参数,第二个success表示请求是否成功,第三个参数response表示用来执行Ajax请求的XMLHttpRequest 对象。关于XMLHttpRequest可以通过http://www.w3.org/TR/XMLHttpRequest/查询详细的信息。
  success Function 指定当Ajax请求执行成功后执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
  failure Function 指定当请求出现错误时执行的回调函数,传递给回调函数两个参数,第一个参数response表示执行Ajax请求的XMLHttpRequet对象,第二个参数表示执行request方法时的options对象。
  scope Object 指定回调函数的作用域,默认为浏览器window。
  form Object/String 指定要提交的表单id或表单数据对象。
  isUpload Boolean 指定要提交的表单是否是文件上传表单,默认情况下会自动检查。
  headers Object 指定请求的Header信息。
  xmlData Object 指定用于发送给服务器的xml文档,如果指定了该属性则其它地方设置的参数将无效。
  jsonData Object/String 指定需要发送给服务器端的JSON数据。如果指定了该属性则其它的地方设置的要发送的参数值将无效。
  disableCaching Boolean 是否禁止cache。

  比如,下面是一个向服务器foo.ejf这个应用程序发起一个Ajax请求的应用示例程序:

function successFn(response,options){
alert(
'请求成功了');
}

function failureFn(response,options){
alert(
'请求失败了');
}


Ext.Ajax.request(
{
   url: 
'foo.ejf',
   success: successFn,
   failure: failureFn,  
   params: 
{ foo: 'bar' }
}
);

  这里的回调函数返回中返回的参数是一个XHR(即XmlHttpRequest)对象,我们可以通过该对象的responseText或responseXML等属性来得到从服务器端返回的数据信息。在Ajax应用中,我们经常会让服务器端返回JSON数据,由于JSON数据是字符串,因此在程序中需要先把他解析成javascript对象才可以使用,把JSON数据解析成javascript对象可以直接使用Ext.decode方法。
  假如服务器返回的是下面的JSON数据对象:
  {
         username: "冷雨",
         times: 1
  }
 则回调函数中应用这样来使用该对象:

function successFn(response,options){
var obj= Ext.decode(response.responseText) ;
alert(obj.username);
}

    Ext.Ajax.request是Ext与服务器端交互的核心,因此需要在应用中灵活使用。在下一篇文章中,我会对Ext应用中的服务器程序作介绍。本文的文字、代码及图片等均来源于《ExtJS实用开发指南》,版权归原作者所有,该指南当前在北京、深圳、成都、重庆、沈阳、杭州、上海等城市均已经可以直接到服务点购买,具体联系方式:http://www.vifir.com/stations.html。)。

 
 

(阅读 )   评论数(:19)
评论】 【收藏】
评论:共19条
小菜好文。
评论人: swan     评论时间: 2008-04-06 23:25:56
小菜好文
评论人: swan     评论时间: 2008-04-06 23:26:23
请问``为什么书上的ComboBox使用这个做联想下拉框而且带分页的例子不好使啊?如果从文件里读数据,然后这个下拉框就无法联想了~!

还有``如果是从文件里读数据是需要自己来控制每一次在页面里读多少条数据吗?因为用书上的例子来做不管把pageSize设成几``都是显示数据文件中的全部数据
评论人: 关于ComboBox的问题     评论时间: 2008-04-07 19:58:34
请问``为什么书上的ComboBox使用这个做联想下拉框而且带分页的例子不好使啊?如果从文件里读数据,然后这个下拉框就无法联想了~!

还有``如果是从文件里读数据是需要自己来控制每一次在页面里读多少条数据吗?因为用书上的例子来做不管把pageSize设成几``都是显示数据文件中的全部数据
评论人: ComboBox问题     评论时间: 2008-04-07 19:59:09
WAERW
评论人: ADW     评论时间: 2008-04-12 11:16:46
楼上的..
     当然需要自己控制数据的条数...
评论人: fdsa     评论时间: 2008-04-22 22:05:10
You've hit the ball out the park! Increidlbe!
评论人: JNxMmwuiNUQ     评论时间: 2012-01-04 00:45:33
rkJ4yC  <a href="http://engtyxdibdul.com/">engtyxdibdul</a>
评论人: vkSQBgLi     评论时间: 2012-01-04 16:34:55
rkJ4yC  <a href="http://engtyxdibdul.com/">engtyxdibdul</a>
评论人: vkSQBgLi     评论时间: 2012-01-04 16:35:02
HsdVNn , [url=http://fjixkppwyxda.com/]fjixkppwyxda[/url], [link=http://kwutixfodipw.com/]kwutixfodipw[/link], http://oswtmhvpwvbk.com/
评论人: huTZGwBLLxMEICxZges     评论时间: 2012-01-04 21:27:29
GuBFpe  <a href="http://yxpendyecqdk.com/">yxpendyecqdk</a>
评论人: iGGYduXTow     评论时间: 2012-01-06 20:18:16
KAu2LR , [url=http://hfxxckkcuqbo.com/]hfxxckkcuqbo[/url], [link=http://iejvyyzxyfiy.com/]iejvyyzxyfiy[/link], http://nimopiwzowfw.com/
评论人: gsaWGKafdseNnkE     评论时间: 2012-01-07 01:14:59
Your psoting is absolutely on the point!
评论人: oIrPFHrJ     评论时间: 2012-08-09 15:44:01
x1Y599  <a href="http://vsiamyljmtjc.com/">vsiamyljmtjc</a>
评论人: fjnkONPq     评论时间: 2012-08-10 13:12:54
kz3wg3 , [url=http://kmkcstwdxhyt.com/]kmkcstwdxhyt[/url], [link=http://lcjblddgijkj.com/]lcjblddgijkj[/link], http://zfepexvchpaf.com/
评论人: RLcWsRgPvtgdseSyEc     评论时间: 2012-08-10 17:40:05
El3Ceo  <a href="http://dgqmqzebplsz.com/">dgqmqzebplsz</a>
评论人: iehbyOnPONmIYsi     评论时间: 2012-08-11 00:57:56
NaUpfH , [url=http://flieurujqsmk.com/]flieurujqsmk[/url], [link=http://ixznkduicube.com/]ixznkduicube[/link], http://ryekeapcqnhb.com/
评论人: ZBUTUPqfDAvJKXirCNT     评论时间: 2012-08-13 03:02:39
评论人: http://hb.lehuozaixian.com/club/forum.php?mod=viewthread&tid=3499709     评论时间: 2013-07-03 12:05:46
[url=http://guod.me/hr/misljenje-o-hondrocream-terapeutska-krema-za-bol.html]http://guod.me/hr/misljenje-o-hondrocream-terapeutska-krema-za-bol.html[/url]
评论人: Eugenecaurb     评论时间: 2017-04-30 01:40:09

发表评论:
发表人:
评论: 
验证码:
请输入前面图中的四位验证码,字母不区分大小写
  
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率