TypeScript - Ajax class that implements TypeScript

Question

I am trying to write an Ajax class using TypeScript. TypeScript Code -

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

Relevant javascript above code

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

The problem above TypeScript code shows an error because the Ajax class does not have the readyState, status, and responseText properties. What should be the correct code for writing an Ajax class in TypeScript?

Answer 1

You just need to add the appropriate properties as follows:

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

Answer 2

I suggest changing my class a bit:

In the constructor, you can configure the following:

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

And after that, in the OnRStateChange function, you can call

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

So your class will look like this:

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

Regards E