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