Detect JSON response in XHR and auto-parse the response.

- Part of the XMLHttpRequest level 2 API.
- Fixes a crash with the Angular2 Http service.

apps/tests/xhr-tests.ts

@@ -124,6 +124,7 @@ export var test_XMLHttpRequest_contentSentAndReceivedProperly = function (done)
             // <hide>
             try {
                 TKUnit.assert(result["json"]["MyVariableOne"] === "ValueOne" && result["json"]["MyVariableTwo"] === "ValueTwo", "Content not sent/received properly!");
+                TKUnit.assert(xhr.response.json.MyVariableOne === "ValueOne" && xhr.response.json.MyVariableTwo === "ValueTwo", "Response content not parsed properly!");
                 done(null);
             }
             catch (err) {
@@ -255,6 +256,44 @@ export function test_xhr_events() {
     TKUnit.assertEqual(errorEventData, 'error data');
 }
 
+export function test_xhr_responseType_text() {
+    const xhr = <any>new XMLHttpRequest();
+    const response = {
+        statusCode: 200,
+        content: {
+            toString: function(){ return this.raw },
+            raw: 'response body'
+        },
+        headers: {
+            "Content-Type": "text/plain"
+        }
+
+    }
+    xhr._loadResponse(response);
+
+    TKUnit.assertEqual(xhr.responseType, "text");
+    TKUnit.assertEqual(xhr.response, 'response body');
+}
+
+export function test_xhr_responseType_switched_to_JSON_if_header_present() {
+    const xhr = <any>new XMLHttpRequest();
+    const response = {
+        statusCode: 200,
+        content: {
+            toString: function(){ return this.raw },
+            raw: '{"data": 42}'
+        },
+        headers: {
+            "Content-Type": "application/json"
+        }
+
+    }
+    xhr._loadResponse(response);
+
+    TKUnit.assertEqual(xhr.responseType, "json");
+    TKUnit.assertEqual(xhr.response.data, 42);
+}
+
 export function test_sets_status_and_statusText(done) {
     let xhr = new XMLHttpRequest();
     xhr.onreadystatechange = () => {

xhr/xhr.ts

@@ -21,7 +21,7 @@ export class XMLHttpRequest {
     private _readyState: number;
     private _status: number;
     private _response: any;
-    private _responseText: Function;
+    private _responseTextReader: Function;
     private _headers: any;
     private _errorFlag: boolean;
     private _responseType: string = "";
@@ -53,7 +53,7 @@ export class XMLHttpRequest {
         this._errorFlag = true;
 
         this._response = null;
-        this._responseText = null;
+        this._responseTextReader = null;
         this._headers = null;
         this._status = null;
 
@@ -67,7 +67,7 @@ export class XMLHttpRequest {
     public send(data?: any) {
         this._errorFlag = false;
         this._response = null;
-        this._responseText = null;
+        this._responseTextReader = null;
         this._headers = null;
         this._status = null;
 
@@ -83,21 +83,7 @@ export class XMLHttpRequest {
 
             http.request(this._options).then(r=> {
                 if (!this._errorFlag) {
-                    this._status = r.statusCode;
-                    this._response = r.content.raw;
-
-                    this._headers = r.headers;
-                    this._setReadyState(this.HEADERS_RECEIVED);
-
-                    this._setReadyState(this.LOADING);
-
-                    if (this.responseType === XMLHttpRequestResponseType.empty ||
-                        this.responseType === XMLHttpRequestResponseType.text ||
-                        this.responseType === XMLHttpRequestResponseType.json) {
-                        this._responseText = r.content.toString;
-                    }
-
-                    this._setReadyState(this.DONE);
+                    this._loadResponse(r);
                 }
 
             }).catch(e => {
@@ -107,6 +93,38 @@ export class XMLHttpRequest {
         }
     }
 
+    private _loadResponse(r) {
+        this._status = r.statusCode;
+        this._response = r.content.raw;
+
+        this._headers = r.headers;
+        this._setReadyState(this.HEADERS_RECEIVED);
+
+        this._setReadyState(this.LOADING);
+
+        this._setResponseType();
+
+        if (this.responseType === XMLHttpRequestResponseType.json) {
+            this._responseTextReader = () => r.content.toString();
+            this._response = JSON.parse(this.responseText);
+        } else if (this.responseType === XMLHttpRequestResponseType.empty ||
+            this.responseType === XMLHttpRequestResponseType.text) {
+            this._responseTextReader = () => r.content.toString();
+        }
+
+        this._setReadyState(this.DONE);
+    }
+
+    private _setResponseType() {
+        const contentType = this.getResponseHeader('Content-Type').toLowerCase();
+
+        if (contentType === 'application/json') {
+            this.responseType = XMLHttpRequestResponseType.json;
+        } else if (contentType === 'text/plain') {
+            this.responseType = XMLHttpRequestResponseType.text;
+        }
+    }
+
     private _listeners: Map<string, Array<Function>> = new Map<string, Array<Function>>();
 
     public addEventListener(eventName: string, handler: Function) {
@@ -211,8 +229,8 @@ export class XMLHttpRequest {
     }
 
     get responseText(): string {
-        if (types.isFunction(this._responseText)) {
-            return this._responseText();
+        if (types.isFunction(this._responseTextReader)) {
+            return this._responseTextReader();
         }
 
         return "";