title |
---|
AJAX |
JavaScript Object Notation
Task: Create JavaScript Object document that described your favorite book
Sample: {"name": "Roman"}
Task: Write JSON document that described your favorite book
JSON.parse()
– https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse
JSON.stringify()
– https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Random JSON generator: https://www.json-generator.com/, https://next.json-generator.com/
Task2: Write JSON document that describes list of artists
Asynchronous Javascript And Xml
Task: Where AJAX can be used? Answers: Google search, Lazy page loading
https://pipedream.com/ & http://requestbin.com
https://docs.postman-echo.com/
HTTP Methods?
- GET
- POST
- HEAD vs GET
- OPTIONS
- OPTIONS vs HEAD
HTTP Headers?
- Referer
- Accept
- Accept-Encoding
- Cache-Control
- Content-Type
XHR
var xhr = new XMLHttpRequest();
var url = "https://www.quackit.com/json/tutorial/artists.txt";
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var jsonData = JSON.parse(xhr.responseText);
showArtists(jsonData);
}
};
xhr.open("GET", url, true);
xhr.send();
function showArtists(data) {
// ...
}
xhr.open(method, URL, async, user, password)
xhr.send([body])
xhr.abort()
readystatechange
- https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.timeout = 30000; xhr.ontimeout = function() { }
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
let promise = fetch(url[, options]);
https://developers.google.com/web/updates/2015/03/introduction-to-fetch
https://www.reddit.com/r/funny.json
https://rapidapi.com/collection/list-of-free-apis
https://github.com/toddmotto/public-apis
Cross-Origin Resource Sharing