yui2 datatable转换至yui3 (2)「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

接下来是第一个高峰，就是把原来的ajax实现，用yui3的io 来写。而datatable 当前使用的是connection。

这里是需要重写的部分。（除非贪图简便，直接引入connection）

下面是直接修改后的代码。io-base是必须要require的。

makeConnection : function(oRequest, oCallback, oCaller) {<br /> var oRawResponse = null;<br /> var tId = DS._nTransactionId++;<br /> this.fireEvent(“requestEvent”, {tId:tId,request:oRequest,callback:oCallback,caller:oCaller});<br /> // Set up the callback object and<br /> // pass the request in as a URL query and<br /> // forward the response to the handler<br /> var oSelf = this;<br /> var oConnMgr = this.connMgr;<br /> var oQueue = this._oQueue;<br /> /**<br /> * Define Connection Manager success handler<br /> *<br /> * @method _xhrSuccess<br /> * @param oResponse {Object} HTTPXMLRequest object<br /> * @private<br /> */<br /> var _xhrSuccess = function(oResponse) {<br /> // If response ID does not match last made request ID,<br /> // silently fail and wait for the next response<br /> if(oResponse && (this.connXhrMode == “ignoreStaleResponses”) &&<br /> (oResponse.tId != oQueue.conn.tId)) {<br /> YAHOO.log(“Ignored stale response”, “warn”, this.toString());<br /> return null;<br /> }<br /> // Error if no response<br /> else if(!oResponse) {<br /> this.fireEvent(“dataErrorEvent”, {request:oRequest, response:null,<br /> callback:oCallback, caller:oCaller,<br /> message:DS.ERROR_DATANULL});<br /> YAHOO.log(DS.ERROR_DATANULL, “error”, this.toString());<br /> // Send error response back to the caller with the error flag on<br /> DS.issueCallback(oCallback,[oRequest, {error:true}], true, oCaller);<br /> return null;<br /> }<br /> // Forward to handler<br /> else {<br /> // Try to sniff data type if it has not been defined<br /> if(this.responseType === DS.TYPE_UNKNOWN) {<br /> var ctype = (oResponse.getResponseHeader) ? oResponse.getResponseHeader[“Content-Type”] : null;<br /> if(ctype) {<br /> // xml<br /> if(ctype.indexOf(“text/xml”) > -1) {<br /> this.responseType = DS.TYPE_XML;<br /> }<br /> else if(ctype.indexOf(“application/json”) > -1) { // json<br /> this.responseType = DS.TYPE_JSON;<br /> }<br /> else if(ctype.indexOf(“text/plain”) > -1) { // text<br /> this.responseType = DS.TYPE_TEXT;<br /> }<br /> }<br /> }<br /> this.scope.handleResponse(oRequest, oResponse, oCallback, oCaller, tId);<br /> }<br /> };<br /> /**<br /> * Define Connection Manager failure handler<br /> *<br /> * @method _xhrFailure<br /> * @param oResponse {Object} HTTPXMLRequest object<br /> * @private<br /> */<br /> var _xhrFailure = function(oResponse) {<br /> this.fireEvent(“dataErrorEvent”, {request:oRequest, response: oResponse,<br /> callback:oCallback, caller:oCaller,<br /> message:DS.ERROR_DATAINVALID});<br /> YAHOO.log(DS.ERROR_DATAINVALID + “: ” +<br /> oResponse.statusText, “error”, this.toString());<br /> // Backward compatibility<br /> if(lang.isString(this.liveData) && lang.isString(oRequest) &&<br /> (this.liveData.lastIndexOf(“?”) !== this.liveData.length-1) &&<br /> (oRequest.indexOf(“?”) !== 0)){<br /> YAHOO.log(“DataSources using XHR no longer automatically supply ” +<br /> “a /”?/” between the host and query parameters” +<br /> ” — please check that the request URL is correct”, “warn”, this.toString());<br /> }<br /> // Send failure response back to the caller with the error flag on<br /> oResponse = oResponse || {};<br /> oResponse.error = true;<br /> DS.issueCallback(oCallback,[oRequest,oResponse],true, oCaller);<br /> return null;<br /> };<br /> /**<br /> * Define Connection Manager callback object<br /> *<br /> * @property _xhrCallback<br /> * @param oResponse {Object} HTTPXMLRequest object<br /> * @private<br /> */<br /> var _xhrCallback = {<br /> success:_xhrSuccess,<br /> failure:_xhrFailure,<br /> scope: this<br /> };<br /> // Apply Connection Manager timeout<br /> if(lang.isNumber(this.connTimeout)) {<br /> _xhrCallback.timeout = this.connTimeout;<br /> }<br /> // Cancel stale requests<br /> if(this.connXhrMode == “cancelStaleRequests”) {<br /> // Look in queue for stale requests<br /> if(oQueue.conn) {<br /> if(oConnMgr.abort) {<br /> oConnMgr.abort(oQueue.conn);<br /> oQueue.conn = null;<br /> YAHOO.log(“Canceled stale request”, “warn”, this.toString());<br /> }<br /> else {<br /> YAHOO.log(“Could not find Connection Manager abort() function”, “error”, this.toString());<br /> }<br /> }<br /> }<br /> // Get ready to send the request URL<br /> if(Y && Y.io) {<br /> var sLiveData = this.liveData;<br /> var isPost = this.connMethodPost;<br /> var sMethod = (isPost) ? “POST” : “GET”;<br /> // Validate request</p> <p> var sUri = (isPost || !lang.isValue(oRequest)) ? sLiveData : sLiveData+”?”+oRequest;<br /> var sRequest = (isPost) ? oRequest : null;<br /> /** hack by tiyi **/<br /> //warpper<br /> var tH = {<br /> success:function (id,o,args){<br /> _xhrCallback.success(o);<br /> },<br /> failure:function (id,o,args){<br /> _xhrCallback.failure(o);<br /> },<br /> }<br /> var tiyi_cfg = {<br /> on:{<br /> success:tH.success,<br /> failure:tH.failure<br /> },<br /> context:this,<br /> method: sMethod,<br /> data: sRequest<br /> };</p> <p> // Send the request right away<br /> if(this.connXhrMode != “queueRequests”) {<br /> //oQueue.conn = oConnMgr.asyncRequest(sMethod, sUri, _xhrCallback, sRequest);<br /> oQueue.conn = Y.io(sUri, tiyi_cfg);<br /> }<br /> // Queue up then send the request<br /> else {<br /> // Found a request already in progress<br /> if(oQueue.conn) {<br /> var allRequests = oQueue.requests;<br /> // Add request to queue<br /> allRequests.push({request:oRequest, callback:tiyi_cfg});<br /> // Interval needs to be started<br /> if(!oQueue.interval) {<br /> oQueue.interval = setInterval(function() {<br /> // Connection is in progress<br /> /*if(oConnMgr.isCallInProgress(oQueue.conn)) {<br /> return;<br /> }*/<br /> if(oQueue.conn.isInProgress()){<br /> return ;<br /> }<br /> else {<br /> // Send next request<br /> if(allRequests.length > 0) {<br /> // Validate request<br /> sUri = (isPost || !lang.isValue(allRequests[0].request)) ? sLiveData : sLiveData+allRequests[0].request;<br /> sRequest = (isPost) ? allRequests[0].request : null;<br /> //oQueue.conn = oConnMgr.asyncRequest(sMethod, sUri, allRequests[0].callback, sRequest);<br /> oQueue.conn = Y.io(sUri, allRequests[0].callback);<br /> // Remove request from queue<br /> allRequests.shift();<br /> }<br /> // No more requests<br /> else {<br /> clearInterval(oQueue.interval);<br /> oQueue.interval = null;<br /> }<br /> }<br /> }, 50);<br /> }<br /> }<br /> // Nothing is in progress<br /> else {<br /> oQueue.conn = Y.io(sUri, tiyi_cfg);<br /> //oQueue.conn = oConnMgr.asyncRequest(sMethod, sUri, _xhrCallback, sRequest);</p> <p> }<br /> }<br /> }<br /> else {<br /> YAHOO.log(“Could not find Connection Manager asyncRequest() function”, “error”, this.toString());<br /> // Send null response back to the caller with the error flag on<br /> DS.issueCallback(oCallback,[oRequest,{error:true}],true,oCaller);<br /> }<br /> return tId;<br />}

大体就是把connection 用了Y.io 来处理。同时把 callback 做了一个转换工作。这么修改完毕后，配合上Datatable的修改。答案来了：

datasource 里面还有一些对connection进行abort的操作，也要对应做转换才算完美，继续投入代码修改……

实际上就在上文代码里面包含了abort。但是我还是把修改后的代码放在下方，体现历史变化：

if(this.connXhrMode == “cancelStaleRequests”) {<br /> // Look in queue for stale requests<br /> if(oQueue.conn) {<br /> /*if(oConnMgr.abort) {<br /> oConnMgr.abort(oQueue.conn);<br /> oQueue.conn = null;<br /> YAHOO.log(“Canceled stale request”, “warn”, this.toString());<br /> }*/<br /> if(oQueue.conn.abort){<br /> oQueue.conn.abort();<br /> oQueue.conn = null;<br /> YAHOO.log(“Canceled stale request”, “warn”, this.toString());<br /> else {<br /> YAHOO.log(“Could not find Connection Manager abort() function”, “error”, this.toString());<br /> }<br /> }<br /> }