cocosCreator JS 开发 之 HTTP 协议对接

C/S 对接全部换成HTTP协议了。。。

该补课了

1、新建一个http.js脚本

var HttpHelp = {
    //获取用户信息
    login:function(count,password,callback) {
        var url = '你的url格式、协议'
        //console.log(url);
        var request = new XMLHttpRequest();
        console.log("登录:" + url);

        request.onreadystatechange = function () {
            if (request.readyState == 4 && (request.status >= 200 && request.status < 400)) {
                var response = request.responseText;
                var rsp = JSON.parse(response).data;
                //console.log("Status: login GET response! " + response);
                callback(true, rsp);
            }else{
                callback(false, rsp);
            }
        };

        request.open("GET", url, true);
        request.send();
    },
}

module.exports = HttpHelp

url解释：https://blog.csdn.net/vikeyyyy/article/details/80596988

代码  module.exports = HttpHelp  设置该脚本可以被引用。

2、调用

login.js

//头部引用
var HttpHelp = require("http");
var globaluserinfo = require("GlobaluserInfo");

cc.Class({
    extends: cc.Component,

    properties: {
        editbox: cc.EditBox
    },

    onLoad: function () {
        cc.find("Canvas/ground/confir").on('click', this.callback, this);
    },
     
    callback: function (event) {
        var userCount =  cc.find("Canvas/ground/editbox_count").getComponent(cc.EditBox).string;
        var userPassward =  cc.find("Canvas/ground/editbox_passward").getComponent(cc.EditBox).string;
        console.log("用户账号："+userCount+ "用户密码："+ userPassward);
        HttpHelp.login(userCount,userPassward,function(isSuccess,Data){
            var info = Data;
            if(true == isSuccess){
                console.log("login  success!!!");
                console.log(info);
                globaluserinfo.username = info.username;
                globaluserinfo.gamepoint = info.gamepoint;
                globaluserinfo.skey = info.skey;
                globaluserinfo.userid = info.userid;

                globaluserinfo.money = info.money;
                globaluserinfo.userid = info.userid;
                globaluserinfo.password = info.password;
                globaluserinfo.salt = info.salt;

                //登录成功后加载地图资源
                cc.director.loadScene('map');
            }else{
                console.log("login  filed!!!")
            }
        });
        
    },

    start () {

    },

    // update (dt) {},
});


这里GlobaluserInfo是我自己写的一个全局保存用户信息的脚本

注意：在代码中写了一行 垃圾代码  var info = Data;

它的内心独白是这样的：

在http数据获取过程
        request.onreadystatechange = function () {
            if (request.readyState == 4 && (request.status >= 200 && request.status < 400)) {
                var response = request.responseText;
                var rsp = JSON.parse(response).data;
                //console.log("Status: login GET response! " + response);
                callback(true, rsp);
            }else{
                callback(false, rsp);
            }
        };

获取的数据实际是字符串
这里服务器给我回的是

{"data": {"username": "test5", "money": 88888, "userid": 7, "gamepoint": 998280, "skey": "959035e1523fe482be72e73b585da74b"}, "ret": 1}

数据都在data中，所以调用的时候加了后缀 .data;
这个时候需要函数 var rsp = JSON.parse(response).data;
rsp 就是json对象 object

因为前面没有在转换这里添加，而是在使用的时候 使用 var info = Data.data;
这样，会一直报错误。。。

4、JSON 中的详细解释：https://www.w3school.com.cn/js/js_json_intro.asp

5、url编码：在js中，使用encodeURLComponent()

var url = address + '/api?action=changepwd&param=' + encodeURIComponent(JSON.stringify(param));

这样可以防止编码中出现转义。

分享使我快乐！