CocosCreator中快速实现HTTP

Cocos Creator中快速实现HTTP

  首先声明，本文并不对HTTP做专业的解释与说明，因为网上肯定有很多专业的解释与说明。解释专业，本文尽量尝试以不那么专业的方式去解释HTTP，并且最重要的是在Cocos Creator中快速实现并且使用。

  对于初学者来说，认为HTTP很复杂，不知道是什么协议。专业名词为超文本传输协议（Hyper Text Transfer Protocol，HTTP），专业解释是一个简单的请求-响应协议。通常情况下，HTTP是一个短连接，就是当你向HTTP服务器的指定URL发送一个请求之后，HTTP服务器会返回给你数据，当你收完数据之后，通讯就结束了，这样就完成了一次HTTP通讯。例如下载一个文件，提交一个表单等等。不像TCP协议，HTTP协议的连接通常(不是所有)是一个短连接，它主要包含三个要素：一个URL地址、一个请求(HttpRequest)、一个回应(HttpResponse)。

Http头 (Http Header)

  HTTP的请求数据包(HttpRequest)和回应数据包(HttpResponse)都包含一个类似于键值对的数据，这部分称为HTTP头(HeaderFields)，可以将这部分的数据类型理解为C++的map<string, string>类型，或者Typescript的{[key: string]: string}类型。

Http Body

  Http Body是数据本身，也是最重要的部分，你可以简单理解为数据正文。Http Body既可以存在于请求中，也可以存在于回应中。

Http状态码(Status Code)

  HTTP状态码存在于回应包中，用来描述服务器处理的结果。通常状态码200代表服务器处理正常，这种状态下的Body数据应该才是想要得到的数据。不同的状态码有不同的含义，可以在网上查询，不做过多解释。

Http请求模式(Method)

  较常见的两种HTTP请求模式(Method)为GET模式和POST模式。它们的主要区别在于，GET模式的Body数据是空的，POST模式的Body数据不为空。如果我们向一个HTTP地址发送请求时，需要附加额外的数据，那么可以使用POST模式，否则使用GET模式就行了。

Cocos Creator需要实现什么

  其实在游戏开发中，一般来说只需要实现GET模式和POST模式的几种数据格式的协议请求就行了。下面实现几个重要函数：

• 以GET方式向一个URL请求，返回一个字符串，结果以异步回调的方式返回：

  export function getString(url: string, callback: (statusCode: number, resp: string, respText: string) => any): XMLHttpRequest {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        let resp: string = xhr.responseText;
        callback && callback(xhr.status, resp, xhr.responseText);
      }
    };
    xhr.onerror = function (err) {
      callback && callback(-1, "", "Network error");
    };
    xhr.send();
    return xhr;
  }
  

• 以GET方式向一个URL请求，返回一个JSON数据，结果以异步的方式返回：

  export function getJson(url: string, callback: (statusCode: number, resp: object | null, respText: string) => any): XMLHttpRequest {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        let resp = null;
        try {
          if (xhr.responseText != "") {
            resp = JSON.parse(xhr.responseText);
          }
        }
        catch (e) {
        }
        callback && callback(xhr.status, resp, xhr.responseText);
      }
    };
    xhr.onerror = function (err) {
      callback && callback(-1, null, "Network error");
    };
    xhr.send();
    return xhr;
  }
  

• 以POST方式向一个URL请求，返回一个JSON数据，结果以异步的方式返回：

  export function postJson(url: string, data: object | string, callback: (statusCode: number, resp: object | null, respText: string) => any): XMLHttpRequest {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "applicationjson;charset=utf-8");
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        let resp = null;
        try {
          if (xhr.responseText != "") {
            resp = JSON.parse(xhr.responseText);
          }
        }
        catch (e) {
        }
        callback && callback(xhr.status, resp, xhr.responseText);
      }
    };
    xhr.onerror = function (err) {
      callback && callback(-1, null, "Network error");
    };
    var text = typeof (data) == "string" ? data :JSON.stringify(data);
    xhr.send(text);
    return xhr;
  }
  

总结

  有了以上几个函数之后，游戏中的大多数HTTP协议都能够应对了。