I totally understand your confusion. There are a lot of different concepts that get thrown together under this topic, and I haven’t seen it explained well. Ever. It isn’t so bad once you get your head around it, but that’s like saying “It’s easy to play the piano once you learn how to press some keys”. Let’s try to clear up some confusion:
By “API”, I generally assume you mean the API that we use to access other programs over HTTP. The actual definition is much broader, and API (Application Program[ming] Interface) refers to the code you use to run any other pre-written code. So, the browser has an API that we use constantly with functions like window.onload, setTimeout, and document.getElementById. jQuery has an API, and even JavaScript has an API for things like array manipulation (forEach(), map()) and date objects (new Date().getSeconds). My point here is that you have been using APIs since day 1, and web APIs aren’t much different. Most of the time, we’re just getting data!
Here are some videos that will (hopefully) help clear up some concepts you need to be successful.
What is AJAX?
REST API concepts and examples
CORS: Cross-domain requests with JavaScript
jQuery Ajax Tutorial #1 - Using AJAX & API’s
HTML5 Security Part 1/3 - Same Origin Policy Basics - This will explain a lot, but it’s dense and the presenter speaks very quickly.