cocos2d-js 中封装HTML5和Native的Http请求

cocos2d-js是一个好引擎，目前版本是3.0beta。我们的游戏网络交互基于HTTP。需要一套代码实现HTML5和Native互通，其他大部分问题引擎本身就已经解决了。不过网络这块需要自己做一些处理。

在Native中，我们使用MinXmlHttpRequest,在JS中使用方法如下：

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
var http = new XMLHttpRequest();  
http.setRequestHeader("Accept-Encoding", "gzip,deflate");  
http.open(type, url, true);  
http.send(data);  
  
// http.timeout = timeout;  
http.onreadystatechange = function() {  
    var status = http.status;  
    SSD.log(status);  
    switch (status) {  
        case 200:  
            SSD.log("200!");  
            if(http.responseText == null || http.responseText == 'undefined' || http.responseText.length <= 0) {  
                onError(status);  
            } else {  
                SSD.log("status:" + http.status + ",ret:" + http.responseText);  
                if(responseType == "json") {  
                    var json = JSON.parse(http.responseText);  
                    if(json == null) {  
                        onError(status);  
                    } else {  
                        onSuccess(json);  
                    }  
                } else if(responseType == "text") {  
                    onSuccess(http.responseText);  
                }  
            }  
            break;  
        default:  
            SSD.log("hq:network error");  
            onError(status);  
            break;  
    }  
};  

而在HTML5中，我们就使用jquery强大的ajax功能了，具体代码如下：
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
var reqid = Network.seq();  
var obj = {  
    type : type.toLowerCase(),  
    async : true,  
    url : url,  
    dataType : "jsonp",  
    jsonp : "jcb",  
    jsonpCallback : "jcb_" + reqid,  
    success : function(result) {  
        SSD.log(JSON.stringify(result));  
        SSD.log(result.code);  
        onSuccess(result);  
    },  
    error : function() {  
        SSD.log("hq:network error");  
        onError();  
    },  
    timeout : timeout  
}  
if(data != null) {  
    obj.data = data;  
}  
try {  
    var retid = $.ajax(obj);  
  
    return retid;  
} catch (e) {  
    SSD.log("_______");  
    return null;  
}  

整合也很简单，判断是否是native，根据具体情况选用相关的调用接口即可
整合后的代码如下：

[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
/** 
 * http请求 
 */  
var Network = {  
    urlGame : function(url) {  
        return HH.cfg.URL_API + url + "?sso=" + HH.data.sso.get() + "&src=" + HH.cfg.CHANNEL_ID + "&ts=" + Date.now();  
    },  
    urlWithTick : function(url) {  
        return HH.cfg.URL_API + url + "?ts=" + Date.now();  
    },  
    _seq : 0,  
    seq : function() {  
        Network._seq = Network._seq + 1;  
        return Network._seq;  
    },  
    /** 
     * HTTP请求 
     * @param param {type,url,data,onSuccess,onError} 
     */  
    http : function(param) {  
        var type = param.type || "POST";  
        var url = param.url;  
        var data = param.data || "";  
  
        data = data + "&ts=" + Date.now();  
  
        SSD.log(cc.sys.isNative);  
        SSD.log("url:" + url);  
        SSD.log("data:" + data);  
  
        var onSuccess = param.onSuccess;  
        var onError = param.onError || Network.onError;  
        var responseType = param.responseType || "json";  
        var timeout = param.timeout || 10000;  
  
        if(!cc.sys.isNative) {  
            var reqid = Network.seq();  
            var obj = {  
                type : type.toLowerCase(),  
                async : true,  
                url : url,  
                dataType : "jsonp",  
                jsonp : "jcb",  
                jsonpCallback : "jcb_" + reqid,  
                success : function(result) {  
                    SSD.log(JSON.stringify(result));  
                    SSD.log(result.code);  
                    onSuccess(result);  
                },  
                error : function() {  
                    SSD.log("hq:network error");  
                    onError();  
                },  
                timeout : timeout  
            }  
            if(data != null) {  
                obj.data = data;  
            }  
            try {  
                var retid = $.ajax(obj);  
  
                return retid;  
            } catch (e) {  
                SSD.log("_______");  
                return null;  
            }  
        } else {  
            var http = new XMLHttpRequest();  
            http.setRequestHeader("Accept-Encoding", "gzip,deflate");  
            http.open(type, url, true);  
            http.send(data);  
  
            // http.timeout = timeout;  
            http.onreadystatechange = function() {  
                var status = http.status;  
                SSD.log(status);  
                switch (status) {  
                    case 200:  
                        SSD.log("200!");  
                        if(http.responseText == null || http.responseText == 'undefined' || http.responseText.length <= 0) {  
                            onError(status);  
                        } else {  
                            SSD.log("status:" + http.status + ",ret:" + http.responseText);  
                            if(responseType == "json") {  
                                var json = JSON.parse(http.responseText);  
                                if(json == null) {  
                                    onError(status);  
                                } else {  
                                    onSuccess(json);  
                                }  
                            } else if(responseType == "text") {  
                                onSuccess(http.responseText);  
                            }  
                        }  
                        break;  
                    default:  
                        SSD.log("hq:network error");  
                        onError(status);  
                        break;  
                }  
            };  
            return http;  
        }  
    },  
    onError : function(status) {  
    }  
};  

这样整合后，使用网络就很容易了，看下面的使用例子：
[javascript] view plain copy 在CODE上查看代码片派生到我的代码片
Network.http({  
    url : Network.urlGame("api/login.do"),  
    data : "",  
    onSuccess : function(result) {  
        SSD.log("success");  
    },  
    onError : function() {  
        SSD.log("error");  
    }  
});