cocos creator基础-(二十七)httpclient Get POST

1: 掌握creator http client GET操作;

2: 掌握creator 客户端上传文件;

3: 掌握creator客户端下载文件;

http GET POST

1: Http client: GET POST是http的两种操作;

2: 获取网页数据我们一般使用http Get,GET 传递参数通过?开始每个参数之间使用&来隔开;

3: 上传数据我们一般使用POST协议来上传;

4: download下载一般也用GET来做, xhr.responseType 指的是数据的类型:

　　“” (默认)DOMString 是一个UTF-16字符串, DOMString 直接映射到 一个String

　　"arraybuffer" 对象被用来表示一个通用的，固定长度的二进制数据缓冲区

　　"blob" Blob对象表示不可变的类似文件对象的原始数据

　　"json" JavaScript object, parsed from a JSON string returned by the server

　　“text” DOMString

根据你要获取的数据类型来决定，比如下载一个文件，可以采用arraybuffer模式;

http get

1: 使用http get提交参数请求;

http post

1: 使用http.js里面的post上传文件数据;

http download

1: http Get 下载文件,并保存到本地;

 

客户端代码

// game_scene.js 客户端应用代码
var http = require("http");

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    onLoad: function () {

    },

    on_get_click: function() {
        // 浏览器 http://127.0.0.1:6080/get?uname=blake&phone=123456789
        http.get("http://127.0.0.1:6080", "/get", "uname=blake&phone=123456789", function(err, ret) {
            if(err) {
                console.log(err);
                return;
            }

            console.log(ret);
        });
    },

    // 文件上传
    on_upload_click: function() {
        // 测试只能在native平台
        
        var path = jsb.fileUtils.getWritablePath();
        var fileData = jsb.fileUtils.getDataFromFile(path + "logo.jpg");

        
        http.post("http://127.0.0.1:6080", "/upload", "name=upload.jpg", fileData, function(err, ret) {
            if(err) {
                console.log(err);
                return;
            }

            console.log(ret);
        });
    },

    on_download_bin_click: function() {
        http.download("http://127.0.0.1:6080", "/download.jpg", null, function(err, data) {
            var path = jsb.fileUtils.getWritablePath() + "/download.jpg";
            jsb.fileUtils.writeDataToFile(data, path);
        });
    },
    // called every frame, uncomment this function to activate update callback
    // update: function (dt) {

    // },
});

// http.js 模块代码
var http = {
    // calback(err, data)
    // url 站点: http://www.baidu.com
    // path 子路径 /index.htm
    // params: key1=value1&key2=value2&key3=value3
    // callback: 当这个请求有回应的时候调用这个callback函数;
    // (err, ret) 如果有错误err != null, 如果没有错误error == null
    get: function(url, path, params, callback) {
        var xhr = cc.loader.getXMLHttpRequest();
        xhr.timeout = 5000;
        var requestURL = url + path;
        if (params) {
            requestURL = requestURL + "?" + params;
        }
         
        xhr.open("GET",requestURL, true);
        if (cc.sys.isNative){
            xhr.setRequestHeader("Accept-Encoding","gzip,deflate","text/html;charset=UTF-8");
        }

        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)){
                console.log("http res("+ xhr.responseText.length + "):" + xhr.responseText);
                try {
                    // var ret = JSON.parse(xhr.responseText);
                    var ret = xhr.responseText;
                    if(callback !== null){
                        callback(null, ret);
                    }                        /* code */
                } catch (e) {
                    console.log("err:" + e);
                    callback(e, null);
                }
                finally{
                    if(cc.vv && cc.vv.wc){
                    //       cc.vv.wc.hide();    
                    }
                }
            }
        };
        
        if(cc.vv && cc.vv.wc){
            //cc.vv.wc.show();
        }
        xhr.send();
        return xhr;
    },

    // post和get区别是post能带数据body,其他的和get一样
    post: function(url, path, params, body, callback) {
        var xhr = cc.loader.getXMLHttpRequest();
        xhr.timeout = 5000;
        var requestURL = url + path;
        if (params) {
            requestURL = requestURL + "?" + params;
        }
        xhr.open("POST",requestURL, true);
        if (cc.sys.isNative){
            xhr.setRequestHeader("Accept-Encoding","gzip,deflate","text/html;charset=UTF-8");
        }

        if (body) {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // xhr.setRequestHeader("Content-Length", body.length);
        }
        

        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)){
                console.log("http res("+ xhr.responseText.length + "):" + xhr.responseText);
                try {
                    // var ret = JSON.parse(xhr.responseText);
                    var ret = xhr.responseText;
                    if(callback !== null){
                        callback(null, ret);
                    }                        /* code */
                } catch (e) {
                    console.log("err:" + e);
                    callback(e, null);
                }
                finally{
                    if(cc.vv && cc.vv.wc){
                    //       cc.vv.wc.hide();    
                    }
                }
            }
        };
        
        if(cc.vv && cc.vv.wc){
            //cc.vv.wc.show();
        }
        if (body) {
            xhr.send(body);
        }
        return xhr;
    }, 

    // 下载他是基于get操作，参数也一样，为什么不用get那个函数呢？
    download: function(url, path, params, callback) {
        var xhr = cc.loader.getXMLHttpRequest();
        xhr.timeout = 5000;
        var requestURL = url + path;
        if (params) {
            requestURL = requestURL + "?" + params;
        }

        xhr.responseType = "arraybuffer";  // 指定我们的数据类型

        xhr.open("GET",requestURL, true);
        if (cc.sys.isNative){
            xhr.setRequestHeader("Accept-Encoding","gzip,deflate","text/html;charset=UTF-8");
        }

        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)){
                var buffer = xhr.response;
                var data = new Uint8Array(buffer); // arraybuffer, new Unit8Array
                callback(null, data);
            }
        };
        
        if(cc.vv && cc.vv.wc){
            //cc.vv.wc.show();
        }
        xhr.send();
        return xhr;
    },

    
};

module.exports = http;

服务器代码

// echo_server.js nodejs 服务器代码
var express = require("express");
var path = require("path");
var app = express();
var fs = require("fs");

//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

app.use(express.static(path.join(process.cwd(), "www_root")));
app.listen(6080);

app.get("/get", function (request, respones) {
    console.log(request.query);
    respones.send("HelloWorld!!!!");
});

app.post("/upload", function (request, respones) {
    request.now_len = 0;
    
    var file_name = "./upload/" + request.query.name;    

    var fd = fs.openSync(file_name, "w");

    request.on("data", function(data) {
        request.now_len += data.length;
        fs.write(fd, data, 0, data.length);
    });

    request.on("end", function() {
        console.log("upload file " + request.query.name + " SUCCESS");
        fs.close(fd);

        respones.send("OK");
    });
});

app.get("/download", function(request, respones) {
    var file_name = "./upload/" + request.query.name;

    fs.readFile(file_name, function(err, data) {
        if (err) {
            respones.send("file_err !");
            return;
        }
        respones.send(data);
    });
});