Skip to content

Latest commit

 

History

History
124 lines (74 loc) · 2.48 KB

71-ajax.md

File metadata and controls

124 lines (74 loc) · 2.48 KB
title
AJAX

Ajax

JSON

JavaScript Object Notation

Task: Create JavaScript Object document that described your favorite book

Sample: {"name": "Roman"}

https://jsoneditoronline.org/

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

AJAX

Asynchronous Javascript And Xml

Task: Where AJAX can be used? Answers: Google search, Lazy page loading

HTTP Request & Response

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

XMLHttpRequest

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

Fetch API

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

Open APIs

https://www.reddit.com/r/funny.json

https://rapidapi.com/collection/list-of-free-apis

https://github.com/toddmotto/public-apis

https://any-api.com/

CORS

Cross-Origin Resource Sharing

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

REST API

HTTP Headers

HTTP Authorization

HTTP Cookies

localStorage