4

TypeScript を使用して Ajax クラスを作成しようとしています。TypeScript コード –</p> 

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

上記の問題は、Ajax クラスに readyState、status、および responseText プロパティがないため、TypeScript コードにエラーが表示されることです。TypeScriptでAjaxクラスを書くための正しいコードは何ですか?

4

2 に答える 2

2

次のように適切なプロパティを追加するだけです。

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);
            }
        }   
    }
}
于 2013-01-21T14:47:00.623 に答える
1

あなたのクラスを少し修正することを提案します：

コンストラクターでは、次のように調整できます。

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

于 2015-10-21T08:56:58.187 に答える