JS/TS发送Get/Post请求的方法

• 前言
• 使用XMLHttpRequest
• 代码
• • Get请求
  • Post请求并设置请求头
  • Post请求发送Json
  • CocosCreator HTTPUtil

前言

使用CocosCreator制作前端小游戏，最后需要把数据以Json形式上传服务器。

使用XMLHttpRequest

主要分三步：

• 第一步：创建需要的对象，这里主要用到的是XMLHttpRequest，注意需要考虑早期的IE
• 第二步：连接和发送
• 第三步：接收

代码

Get请求

var httpRequest = new XMLHttpRequest(); //第一步：建立所需的对象
httpRequest.open('GET', 'url', true); //第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
httpRequest.send(); //第三步：发送请求  将请求参数写在URL中
/**
* 获取数据后的处理程序
*/
httpRequest.onreadystatechange = function () {
	if (httpRequest.readyState == 4 && httpRequest.status == 200) {
		var json = httpRequest.responseText; //获取到json字符串，还需解析
		console.log(json);
	}
};

Post请求并设置请求头

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
httpRequest.open('POST', 'url', true); //第二步：打开连接
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
httpRequest.send('name=teswe&ee=ef');//发送请求 将情头体写在send中
/**
 * 获取数据后的处理程序
 */
httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

Post请求发送Json

var httpRequest = new XMLHttpRequest();//第一步：创建需要的对象
httpRequest.open('POST', 'url', true); //第二步：打开连接

/**
*发送json格式文件必须设置请求头 ；如下 - 
*/
httpRequest.setRequestHeader("Content-type","application/json");//设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）


var obj = { name: 'zhansgan', age: 18 };

httpRequest.send(JSON.stringify(obj));//发送请求 将json写入send中
/**
 * 获取数据后的处理程序
 */
httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
        var json = httpRequest.responseText;//获取到服务端返回的数据
        console.log(json);
    }
};

CocosCreator HTTPUtil

最后分享一个小工具

export class HttpUtil {
    /**
     * 延迟多久没回复就返回False
     *
     * @type {number}
     * @memberof DriveManager
     */
    private static TimeOut:number=200;

    /**
     * GET请求
     *
     * @static
     * @param {*} url
     * @param {object} [params={}]
     * @param {*} callback
     * @memberof HttpUtil
     */
    public static GET(url, params: object = {}, callback) {
        let dataStr = '';
        Object.keys(params).forEach(key => {
            dataStr += key + '=' + encodeURIComponent(params[key]) + '&';
        })
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
        // url = HttpUtil.baseUrl + url;

        let xhr = cc.loader.getXMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let response = xhr.responseText;
                if (xhr.status >= 200 && xhr.status < 300) {
                    let httpStatus = xhr.statusText;
                    // callback(true, JSON.parse(response));
                    callback(true, response);
                } else {
                    callback(false, response);
                }
            }
        };
        xhr.timeout = this.TimeOut;
        xhr.send();
    }
    
    /**
     * POST请求
     *
     * @static
     * @param {*} url
     * @param {object} [param={}]
     * @param {*} callback
     * @memberof HttpUtil
     */
    public static POST(url, param: object = {}, callback) {
        // url = HttpUtil.baseUrl + url;
        var xhr = cc.loader.getXMLHttpRequest();
        let dataStr = '';
        Object.keys(param).forEach(key => {
            dataStr += key + '=' + encodeURIComponent(param[key]) + '&';
        })
        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
        }
        xhr.open("POST", url, true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let response = xhr.responseText;
                if (xhr.status >= 200 && xhr.status < 300) {
                    let httpStatus = xhr.statusText;
                    // callback(true, JSON.parse(response));
                    callback(true, response);

                } else {
                    callback(false, response);
                }
            }
        };
        xhr.send(dataStr);
    }
}