It's definitely worth mentioning JSONP - which worked by setting up a function in the global scope and using JavaScript inserting a new script tag that would hopefully call that function with the data. It was the ultimate trust exercise, as your target data vendor could execute any JavaScript it desired. Despite the name, JSONP could of course contain non-json data, like functions or class definitions.
TLDR of JSONP for those who are fortunate enough not to have dealt with it: you’d make an API call with
var script = document.createElement('script')
script.src = 'http://api.example.com/foo?bar=baz&callback=myFunction'
document.head.appendChild(script)
and then the server would (hopefully) return a JavaScript response, wrapping the JSON in the (global!) function of your choosing:
myFunction({...JSON here...})
In addition to the risk of a malicious API server being able to execute whatever code it wanted on your page, this also caused architectural headaches: the callback function had to be on `window` so that the JSONP response would have access to it when it loaded. In addition to the immediately obvious problems with globals, you also had to think very carefully about how to structure things so that the callback knew what it was supposed to do when called. (Woe betide you if some important state could change and the response didn’t have enough context to tell whether it was still relevant.)
