Cocos-JS HTTP网络请求

网络结构

网络结构是网络构建方式，目前流行的有客户端服务器结构（C/S结构）和点对点（P2P）结构网络。

客户端服务器结构（C/S结构）

这种结构又被称为Clicent/Server结构，它是一种主从结构。服务器一直处于等待状态，如果客户端请求，服务器响应请求，建立连接，提供服务。服务器是被动的，客户端是主动的。类似于在豪华餐厅点餐，客人是主动的，服务员是被动的。

点对点结构（P2P结构）

这种结构也叫做对等结构网络，每个节点之间是对等的。网络分布范围比较少，通常在一间办公室或者一个家庭内，适用于移动设备之间的通讯，网络链路层由蓝牙和Wifi实现。类似于在吃豪华自助餐，所有的客人都是对等的。

 

考虑到跨平台的需要，Cocos-JS引擎主要采用C/S网络结构。这种结构主要采用HTTP和HTTPS等传输协议。

 

HTTP

HTTP是超文本传输协议，Interent的基本协议是TCP/IP，目前使用广泛使用的是HTTP、HTTPS、FTP、Archie Gopher等是简历在TCP/IP之上的应用层协议，不同的协议对应不同的应用。

HTTP是一个属于应用层的面向对象的协议，由于其简洁，快速的方式，适用于分布式超文本信息传输。

HTTP定义了8中请求方法，OPTIONS，HEAD，GET，POST，PUT，DELETE，TRACE和CONNECT作为Web服务器，至少需实现GET和HEAD方法，其他方法是可选的。

GET方法是向指定的资源发送请求，发送的信息在URL后面。像是使用明信片给别人写信，“信内容”写在外面，接触到的人都可以看到，不安全。

POST方法是向指定的资源提交数据，请求服务器进行处理。像是把“信内容”装入信封寄出去，接触到的人都看不到，因此是安全的。

 

HTTPS

HTTPS是安全的超文本传输协议，是超文本传输协议和SSL加密的结合。提供加密通信对网络服务器身份的鉴定。

HTTPS是HTTP的升级版。与HTTP的区别是，HTTPS使用https：//代替http：//，HTTPS使用端口443，而HTTP使用端口80和TCP/IP金星通信。SSL使用40位关键字作为RC4流加密算法。这对于商业信息的加密是合适的。

 

使用XMLHttpResquest对象

在web前端开发有一种异步刷新技术AJAX。它的核心技术就是JavaScript对象的XMLHttpResquest，他是一种异步请求技术。

1. open（）与服务器连接，创建新的连接请求。

2. send（）向服务器发送请求。

3. abort（）退出当前请求。

4. readyState属性，提供当前请求的状态，其中4表示准备就绪。

5. status属性，提供当前的HTTP请求状态吗，其中200表示请求成功。

6. responseText属性，服务器返回的响应文本。

7. onreadystatechange属性，设置回调函数。

其中，open和send函数，以及onreadystatechange属性是http请求的关键。

 

open函数有5个参数可以使用。（method，url，async，user，password）

method是指发送请求的类型，一般为GET或POSt

url是指请求的链接

async是否异步请求，该参数可选，默认为true

user如果该请求需要身份认证，这里指定用户名，无默认值

password如果该请求需要身份验证，这里指定密码，无默认值

XMLHttpResquest有5中就绪状态

0：请求没有发出，在调用open（）函数之前为改状态

1：请求已经建立但还没有发出，在调用send（）函数之前为改状态

2：请求已经发出正在处理中

3：请求已经处理，响应中通常有部分数据可用，但是服务器没有完成响应

4：响应已经完成，可以访问服务器响应并使用它

 

常见的HTTP状态码

401：表示所访问数据禁止访问

403：表示所访问数据受到保护

404：表示错误的URL请求，服务器资源不存在

200：表示请求成功

 

如果就是状态是4，并且状态码是200，表示请求完成可以处理服务器数据

Get请求方式

var XMLHttpResquestGet = function (url, callback) {
    var request = cc.loader.getXMLHttpRequest();
    request.open("GET", url, true);

    request.onreadystatechange = function () {
        //如果就绪状态是4，状态码是200则表示请求成功
        if(request.readyState === 4 && request.status === 200) {
            try{
                console.log("XMLHttpResquestGet     Status:" + request.statusText);
                if(callback) callback(true, request.responseText);
            }
            catch (e) {
                if(callback) callback(false, e);
            }
        }
        else{
            if(callback) callback(false, );
        }
    };
    request.send();
};

 

POST请求方式

var XMLHttpResquestPost = function (url, params, callback) {
    var xhr = cc.loader.getXMLHttpRequest();
    xhr.open("POST", url);

    xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
    xhr.onreadystatechange = function () {
        //如果就绪状态是4，状态码是200则表示请求成功
        if(xhr.readyState === 4 && xhr.status === 200) {
            try{
                console.log("XMLHttpResquestPost     Status:" + xhr.statusText);
                if(callback) callback(true, xhr.responseText);
            }
            catch (e) {
                if(callback) callback(false, e);
            }
        }
        else{
            if(callback) callback(false);
        }
    };
    xhr.send(params);
};