TypeScript - TypeScript中实现Ajax类

Question

我正在尝试使用TypeScript编写Ajax类。 TypeScript代码如下：

class Ajax {
    url: string;
    xmlData: string;
    mode: bool; 
    response: string;
    objHttpReq:any;

    constructor (postUrl: string, postXml: string, postMode: bool) {
        this.url = postUrl;
        this.xmlData = postXml;
        this.mode = postMode;       
        this.objHttpReq = new XMLHttpRequest(); 
        this.objHttpReq.mode = this.mode;   

        this.objHttpReq.onreadystatechange = this.OnRStateChange;

        this.objHttpReq.open("Post", this.url, this.mode);
        this.objHttpReq.send(this.xmlData);         
    }                   

    OnRStateChange(){               
        if (this.readyState==4 && this.status==200)
                    //here this refers to Ajax
        {
            //alert(xmlhttp.status);
            if( this.mode == false)
            {
                alert(this.responseText);
            }
            else
            {
                alert(this.responseText);
            }
        }   
    }
}   

上述代码的编译JavaScript

var Ajax = (function () { 

    function Ajax(postUrl, postXml, postMode) {
        this.url = postUrl;
        this.xmlData = postXml;
        this.mode = postMode;
        this.objHttpReq = new XMLHttpRequest();
        this.objHttpReq.mode = this.mode;
        this.objHttpReq.onreadystatechange = this.OnRStateChange;
        this.objHttpReq.open("Post", this.url, this.mode);
        this.objHttpReq.send(this.xmlData);
    }
    Ajax.prototype.OnRStateChange = function () {
        if(this.readyState == 4 && this.status == 200) {
         //here this refers XMLHttpRequest object – works fine
            if(this.mode == false) {
                alert(this.responseText);
            } else {
                alert(this.responseText);
            }
        }
    };
    return Ajax;
})();

问题是以上的TypeScript代码显示错误，因为Ajax类没有readyState、status和responseText属性。在TypeScript中编写Ajax类的正确代码应该是什么？

- skgyan

---

你解决了这个问题吗？ - Anmol Gupta

Answer 1

您只需要像这样添加适当的属性：

class Ajax {
    url: string;
    xmlData: string;
    mode: bool; 
    response: string;
    objHttpReq:any;
    readyState: number;
    status: number;
    responseText: string;

    constructor (postUrl: string, postXml: string, postMode: bool) {
        this.url = postUrl;
        this.xmlData = postXml;
        this.mode = postMode;       
        this.objHttpReq = new XMLHttpRequest(); 
        this.objHttpReq.mode = this.mode;   

        this.objHttpReq.onreadystatechange = this.OnRStateChange;

        this.objHttpReq.open("Post", this.url, this.mode);
        this.objHttpReq.send(this.xmlData);         
    }                   

    OnRStateChange(){               
        if (this.readyState==4 && this.status==200)
                    //here this refers to Ajax
        {
            //alert(xmlhttp.status);
            if( this.mode == false)
            {
                alert(this.responseText);
            }
            else
            {
                alert(this.responseText);
            }
        }   
    }
}   

- Fenton

---

感谢Steve的回复，但您不觉得Ajax类的对象从未使用readyState、status或responseText属性吗？也许您是正确的，但我对答案并不完全满意。 - skgyan

Answer 2

我建议对您的类进行一些修改：

在构造函数中，您可以按以下方式进行调整：

this.objHttpReq.onreadystatechange = () => this.OnRStateChange();

在函数OnRStateChange中，您可以引用此后的内容。

this.objHttpReq.readyState;
this.objHttpReq.status;
this.objHttpReq.responseText;

最终你的类将如下所示：

class Ajax {
    url: string;
    xmlData: string;
    mode: bool; 
    response: string;
    objHttpReq:any;

    constructor (postUrl: string, postXml: string, postMode: bool) {
        this.url = postUrl;
        this.xmlData = postXml;
        this.mode = postMode;       
        this.objHttpReq = new XMLHttpRequest(); 
        this.objHttpReq.mode = this.mode;   

        this.objHttpReq.onreadystatechange =()=> this.OnRStateChange();

        this.objHttpReq.open("Post", this.url, this.mode);
        this.objHttpReq.send(this.xmlData);         
    }                   

    OnRStateChange(){               
        if (this.objHttpReq.readyState==4 && this.objHttpReq.status==200)
                    //here this refers to Ajax
        {
            //alert(xmlhttp.status);
            if( this.objHttpReq.mode == false)
            {
                alert(this.objHttpReq.responseText);
            }
            else
            {
                alert(this.objHttpReq.responseText);
            }
        }   
    }
}   

亲切的问候 E

- Evgeny