原生JS实现AJAX

2018-10-26  本文已影响0人  深海不蓝丶

原生JS实现AJAX代码,代码如下


var xhr1 = new XMLHttpRequest;
        xhr1.open("POST", 'http://47.92.121.171:17788', true);
        xhr1.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr1.onreadystatechange = function () {
            if (xhr1.readyState == 4 && xhr1.status == 200) {
                console.log("打印用户信息1" + xhr1.responseText);
            }
        }

        xhr1.send("code=p_001&name=aaaaaa&pas=123456&belong=aabbccdd");

如果需要ajax运行方法完成后调用结果的话 需要使用回调函数 或者 promise

回调函数


     private loadXMLDoc(url, sendcode, cfunc) {
        this.xmlhttp = new XMLHttpRequest;
        this.xmlhttp.open("POST", url, true);
        this.xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        this.xmlhttp.onreadystatechange = cfunc;
        this.xmlhttp.send(sendcode);
    }
    private myFunction() {
        this.loadXMLDoc("http://47.92.121.171:17788", "code=p_001&name=aaaaaa&pas=123456&belong=aabbccdd",()=>{
            if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
                console.log("3")
                console.log("打印用户信息1" + this.xmlhttp.responseText) 
            }
        });
    }

使用promise


this.getGameServer().then(function (res) {
            console.log("res" + res);
        }).catch(function (rej) {
            console.log("rej" + rej);
        });

private getGameServer() {
        return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest;
            xhr.open("POST", 'http://47.92.121.171:9002/rout/get_game_servers', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {        
                if (xhr.readyState == 4 && xhr.status == 200) {
                    resolve(xhr.responseText);
                }
            }
            xhr.send("game=1&shang=common");
        });
    }

使用async / await


    //初始化房间
    async  initRoom() {
        var arraycard = [];
        for (var i = 0; i < 5; i++) {
            //创建一个新牌面

            var card = new Laya.Image("img_card_back_small.png");
            card.x = this.cardBack.x;
            card.y = this.cardBack.y;
            Laya.stage.addChild(card);
            //获取box坐标
            var pos = this["play_" + (i + 1)].localToGlobal(new Laya.Point(0, 0));
            //this.play_1          
            console.log("posx", pos.x)
            console.log("posy", pos.y)
            //缓动动画
            await this.ontween(pos.x, pos.y, card); 
        }
    }

    //发牌缓动
    ontween(x, y, card) {
        return new Promise((resolve, reject) => {
            console.log("ontween-posx", x)
            console.log("ontween-posy", y)
            setTimeout(() => {
                resolve(Tween.to(card, { x: x, y: y }, 500, null, Laya.Handler.create(this, () => {
                    console.log("发牌结束");
                    Laya.stage.removeChild(card);
                })))
            }, 500);

        })
    }
上一篇下一篇

猜你喜欢

热点阅读