Ext.data.Connection

Carterslam

浏览: 204217 次
性别:
来自: 成都

最近访客更多访客>>

abc1997

gaojingsong

feiyue81

pingbutianxia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

EXT Ajax json 正则表达式 WebService

ExtJs之所以能异步请求数据，全依赖于Ext.data.Connection。而Ext.Ajax只不过是Ext.data.Connection的一个实例罢了。当然Ext.Ajax比Ext.data.Connection多了一个函数：serializeForm(form)，这个函数的作用是把一个表单里面的表单元素序列化。结果形式为：name1=value1&name2=value2……不过，如果是我的话，一般不会用这个东西，因为平常都是传json数据的，当然，如果不是请求WebService，而是请求aspx页面，那么这个东西还是有点用的。
　　先把它的官方文档翻译一下吧。

全　　称:Ext.data.Connection
命名空间:Ext.data
定义　于:Connection.js
类　　名:Connection
子　　类:Ajax
父　　类:Observable

　　这个类封装了到页面所在主机的连接，允许通过一个配置好的URL来请求数据，也可以临时在请求时传递一个URL。

　　通过这个类获得的请求都是异步的，并且马上返回，调用request后，它并不马上返回数据，要处理数据，要在调用request时传入的 options对象中，配置callback或者是success、failure。这三个是回调函数。其区别将在下文具体交待。当然，你也可以使用 Connection的事件处理来做一些事情。

　　注意：如果你是要上传文件，你的回调、事件处理函数将不会获得通常意义上的response对象。上传通过IFrame来捕获，所以就没有 XMLHttpRequest了。这时，response还是被创建，不过，它的responseText等于IFrame的 document.innerHTML，responseXML等于IFrame的document中的xml数据。当然，这个前提是它们存在的时候。

　　这意味着必面回一个合法的XML或HTML document。如果返回的是JSON数据，那么建议你把数据放到<textarea>标记中，返回时通过正则表达式从 responseText中取出来了。如果返回的是XML数据，建议放到CDATA里面，通过标准DOM方法从responseXMl中取得数据。

Options：
autoAbort : Boolean
取消当前请求，不管当前请求是不是存在。默认值为false。

defaultHeaders : Object
默认头部，每个HTTP请求分成两部：头部、数据。数据就是post的部分，头部包含了请求的一些基本属性，此对象定义了用当前connection对象发起的请求的默认头部，默认值为undefined。

disableCaching : Boolean
是否为GET请求加入一个唯一标志的参数缓存。

extraParams : Object
一般情况下，加在encodeURL(params)后面。默认值为：undefined。

method : String
就是http请求的method属性。默认情况下是未定义的(undefined)；如果没有设置，但是调用request时设了params，那么将使用POST方式，否则使用GET。

timeout : Number
请求超时，默认值为：30000。单位是millisecond(毫秒？)。

url : String
用此connection对象发起的请求的默认URL。默认值为：undefined。

无公共属性

公共函数(只讲connection自身的，不包括从Observable中继承来的)：
Connection( Object config )
构造函数，没有悬念。

abort( [Number transactionId] ) : void
取消指定id的请求，如果没有指定则取消当前请求。

isLoading( [Number transactionId] ) : Boolean
判断指定id的请求是不是正在请求中(?)。

request( [Object options] ) : Number
发送一个HTTP请求到远程主机上。
重点：Ajax服务请求都是异步的，并且这个请求将在response(响应)返回之前返回，也就是说，你绝对无法通过此函数来直接返回数据，你得通过定义回调函数来处理返回的数据。

参数：
　　options : Object
　　　　一个可能包含下面属性的对象:

        url : String (Optional)
        请求对应的URL，默认值是connection的options配置的那个url。

　　　　params : Object/String/Function (Optional)
　　　　用于提供url后面的请求参数(俗称查询字符串)，可以是json对象，可以是直接的字符串，可以是一个函数。

　　　　method : String (Optional)
　　　　此 http请求的method。默认值为connection的options中配置的method。如果没有设置它，那么就要看params是否设了，如果设了就以POST方式请求，如果没有就以GET方式请求，注意：method名是大小敏感的，必须全面大写。

　　　　callback : Function (Optional)
　　　　无论请求成功还是失败它都被执行，其参数如下：
　　　　　　　options : Object
　　　　　　　不用说了。
　　　　　　　success : Boolean
　　　　　　　是否请求成功了。
　　　　　　　response : Object
　　　　　　　一个包含响应数据的XMLHttpRequest对象。

　　　　success : Function (Optional)
　　　　请求成功时执行的回调。它的参数如下：
　　　　　　　response : Object
　　　　　　　一个包含响应数据的XMLHttpRequest对象。
　　　　　　　options : Object
　　　　　　　不用说了。

　　　　failure : Function (Optional)
　　　　请求失败时执行的回调。它的参数如下：
　　　　　　　response : Object
　　　　　　　一个包含响应数据的XMLHttpRequest对象。
　　　　　　　options : Object
　　　　　　　不用说了。

　　　　scope : Object (Optional)
　　　　回调函数执行时所使用的scope。

　　　　form : Object/String (Optional)
　　　　将用于构造查询字符串的form的引用或id。

　　　　isUpload : Boolean (Optional)
　　　　当前请求是否是在上传文件(通常是自动检测的)。
　　　　文件上传不是通过通常的Ajax技术实现，它们通过在form提交时动态插入一个iframe，返回时又移除这个iframe来实现，一通的英文，就是说响应数据是直接交给浏览器的，这时，就有点能理解为什么要用iframe了。因为它返回的东西会被浏览器直接插入到document对象下面，直给放当前页，那么页面当前内容将消失。所以，只有放一个iframe中了。且这个iframe得隐藏起来。
　　　　如果返回结果是json，那么头部要设一下content-type:text/html。

　　　　headers : Object (Optional)
　　　　请求的头部。

　　　　xmlData : Object (Optional)
　　　　如果有它，那么params就不会起作用。

　　　　jsonData : Object/String (Optional)
　　　　如果有它，那么params就不会起作用。

　　　　disableCaching : Boolean (Optional)
　　　　为真时为Get请求创建一个param缓存。

　　　　这个options对象也可以包含其他你需要用于回调的属性，大伙都晓得，这个options最后回被传给回调函数的，所以，也可以加入自己想要的东西。

　　　　返回值：
　　　　一个请求的id。它用于取消请求。。

事件：
　　beforerequest : ( Connection conn, Object options )
　　在请求发生之前触发。

　　requestcomplete : ( Connection conn, Object response, Object options )
　　请求结束时触发。

　　requestexception : ( Connection conn, Object response, Object options )
　　当http请求处于错误状态时触发。

上一篇主要是扎扎实实地翻译了一下Ext.data.Connection的官文档。尽管网上有位大侠也搞了个中文文档，但是，有不少遗漏的地方。这篇主要是研究一下文档中有些语焉不详的地方，这些问题只能透过研究代码来解释了。
　　一、Ext.data.Connection是否有依赖的模块

　　有。它建立在一个适配器类：Ext.lib.Ajax的基础之上，有人看了Ext.js的代码，发现，Ext貌似没有什么底层适配器，事实上，是有的，Ext.lib.Ajax提供了对XMLHttpRequest对象的底层的封装(我直接用ext-base.js)。

　　二、在options中哪些东西会被编码到url后面

　　params、extraParams、form。

　　三、url参数与jsonData、xmlData的关系

　　这是个非常重大的问题，且见Connection的代码：

　　if((method == 'GET' || o.xmlData || o.jsonData) && p){
　　　　url += (url.indexOf('?') != -1 ? '&' : '?') + p;
　　　　p = '';
　　}

　　看这三行代码，觉得实在讲不清啦。但是，至少一件事是明白的：如果定义了xmlData、jsonData，且又定义了params/extraParams/form，那么并不会造成参数无用。还是照样传过去了的。

　　至于xmlData与jsonData的优先级关系，这个要看Ext.lib.Ajax的源码了。源码如下：

                if(options.xmlData){
                    if (!hs || !hs['Content-Type']){
                        this.initHeader('Content-Type', 'text/xml', false);
                    }
                    method = (method ? method : (options.method ? options.method : 'POST'));
                    data = options.xmlData;
                }else if(options.jsonData){
                    if (!hs || !hs['Content-Type']){
                        this.initHeader('Content-Type', 'application/json', false);
                    }
                    method = (method ? method : (options.method ? options.method : 'POST'));
                    data = typeof options.jsonData == 'object' ? Ext.encode(options.jsonData) : options.jsonData;
                }

　　可见，如果同时定义了xmlData和jsonData，那么将按发送xmlData中的数据，jsonData中的数据被忽略。

　　四、那个disableCaching倒底有什么鸟用？

　　貌似是否使用缓存的意思？文档让人郁闷，且见代码：

　　if(method == 'GET' && (this.disableCaching && o.disableCaching !== false) || o.disableCaching === true){
　　　　url += (url.indexOf('?') != -1 ? '&' : '?') + '_dc=' + (new Date().getTime());
　　}

　　原来是加个时间参数。拜托了。搞得我们一头的雾水啊。

　　至此，关于Ext.data.Connection的相关问题都差不多扫清，它的使用例子，前面的“通信篇”中有代码。可以参见。

来自:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662902.aspx

分享到：