How does the front-end code execute the back-end code in Web apps?

I understand that yes there is a front-end and a back-end. But how do those two communicate?

So for example,

1. I go to https://www.google.com/
2. Google server responds to me with some minified resources consisting of HTML, CSS, and some JS.
3. I type "How does the front-end talk to the back-end?" into Google
4. I click "Google Search" or press return
5. ???

My lack of understanding comes from the fact that I haven't ever shipped anything to production in terms of web apps I think. I've always just developed locally and so I'd say something like href=/... and it would just be some directory that I have locally. Or maybe I'd call some JS function that is bundled up in the same app.

So at step number 5 is there some JS that already is living in my web browser that is executing an HTTP call using something like XMLHttpRequest which hits Google servers and gets directed towards some service in their backend? Is there a way I can see that in the developer console?

Concrete examples appreciated.