AJAX enables
Asynchronous JavaScript And XML
[0] http://adaptivepath.org/ideas/ajax-new-approach-web-applications/
(corrected for modern use)
Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:
standards-based presentation using
XHTMLHTML and CSSdynamic display and interaction using the Document Object Model
data interchange and manipulation using
XML and XSLTJSONasynchronous data retrieval using
XMLHttpRequestFetchand JavaScript binding everything together.
open(), then call send()
readyState property of the request and error checking is cumbersomevar httpRequest;
function sendRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = printResponse;
httpRequest.open('GET', 'https://jsonplaceholder.typicode.com/posts/1');
httpRequest.send();
}
function printResponse() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
console.log(httpRequest.responseText);
} else {
console.log('There was a problem: ' + httpRequest.status);
console.log({httpRequest})
}
}
}
The Fetch interface is concise
https://jsonplaceholder.typicode.com/posts/1
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
console.log(response.status);
return response.text(); // body is not quite ready yet
})
.then(function(text) {
console.log(text); // now the body is ready
});
fetch() takes at least one argument, the URL of the resource to fetchfetch returns a Promise, to which you add a series of callbacks using the then methodfetch then calls the server, just like you did in the address bar abovefetch calls your callbacks in orderthen gets called once the HTTP headers of the response are availableresponse.text(), which returns another promise
then gets called after the entire body has been received
let postNumber = 1;
fetch('https://jsonplaceholder.typicode.com/posts/' + postNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
response.json() is an alternative to response.text()
response.json parses the body of the response as JSON and returns real JavaScript objectsthen receives a proper JavaScript Object which is the result of calling JSON.parse() on the bodyIf you want to request data from a local webserver, use a partial URL
fetch('/city-market.md')
.then(function(response) {
return response.text();
})
.then(function(myText) {
console.log(myText);
});
then function happens to return response.text() because it is a Markdown fileresponse.json()
.catch(function(error) { do_something_here })
catch
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
if (!response.ok) {
console.log('HTTP error: ' + response.status);
} else {
return response.json();
}
})
.then(function(json) {
console.log(json);
})
.catch(function(error) {
console.error('Network error:\n', error);
});
See a more comprehensive JSON lesson here: JSON lesson
{"userId": 1,
"id": 1,
"title": "My most amazing post",
"body": "This is my first post, isn't it great. Maybe I'll write some more."
}
The Fetch API converts text into JSON for you if you call response.json()
but if you want to do it yourself...
JSON.parse converts a string into an object:
let data = JSON.parse(string)
So this would work fine:
fetch('/city-market.json')
.then(function(response) {
return response.text();
})
.then(function(myText) {
let myObject = JSON.parse(myText);
console.log(myObject);
});
1/15