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);
});
});