Fetch vs. AjaxCall
The Fetch API has built in methods for different datatypes.
For just regular text/html you'd use the text()
method, which returns a promise as well, and chain it with another then call.
fetch('www.testSite').then( x => { return x.text();}).then( y => { console.log(y);});
The built-ins for the returned content is as follows
clone()
- Creates a clone of a Response object.error()
- Returns anew Response object associated with a network error.redirect()
- Creates a new response with a different URL.arrayBuffer()
- Returns a promise that resolves with an ArrayBuffer.blob()
- Returns a promise that resolves with a Blob.formData()
- Returns a promise that resolves with a FormData object.json()
- Returns a promise that resolves with a JSON object.text()
- Returns a promise that resolves with a USVString (text).
It also allows you to send things to the server, or add your own headers etc.
fetch('www.testSite', { method : 'post', headers : new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' }), body : new FormData(document.getElementById('myform'))}).then( response => { return response.json(); // server returned valid JSON}).then( parsed_result => { console.log(parsed_result);});
Your ajaxCall is returning the responseText from the XMLHttpRequest object. It is filtering it out.
You need to read the response Text in the fetch code.
fetch('/foo/').then(x => x.text()).then(console.log)
You can also use x.json()
or x.blob()