个人浏览器端:css
www.google.com会自动补全为http://www.google.com/,这是个url,他表示网络某个资源(resource)的位置, 通常格式为: protocol :// hostname[:port] / path / ;parameters#fragmenthtml
浏览器拿着这个domain找离你最近的DNS,DNS是网络运营商(电信,联通,移动,verizon,comcast)提供的。DNS服务器返回给我一个IP地址.前端
浏览器向这个IP地址发送一个http/https Request,google的服务器处理这个请求以后返回对应的Response,是一个html文件,浏览器将html文件显示.segmentfault
Google的服务器端:后端
Google的Web Server(硬件)收到request,将这个request递交给正在80端口监听的HTTP Server(跑在Web Server上的软件,常见的有Nginx,Apache,Unicorn,Gunicorn等),80端口是专为http开放的,端口号用来区分这台主机提供的不一样服务,由TCP/IP协议栈规定.浏览器
HTTP拿到request后转发给Web Application(咱们写的程序),常见框架:Django(Python),Ruby on Rails(Ruby),NodeJS(JS),Dropwizard(Java).服务器
咱们把写好的html+css+js经过http协议发回给浏览器,浏览器显示并运行这些文件,以此页面为出发点,开始后续的交互.网络
后续的交互,再也不须要浏览器的地址输入框了。咱们常说的前端和后端,都是程序,前端的程序运行在浏览器里,后端的程序运行在google的服务器里。当前流行的趋势是,先后端经过AJAX(Asynchronous JavaScript and XML)传递信息。咱们在google给咱们的这个网页上再点别的连接,都是经过页面里的JavaScript向后端发送http请求。AJAX虽然X表明XML,但目前数据格式的传输主要以JSON为主了。相应的,后端也要具有接收和发送JSON/XML请求的能力,实现这个通常有两种架构:REST和SOAP,目前REST已是最为流行的架构。架构
参考:
What-happens-when-you-type-a-URL-in-browser
How does a frontend code and a backend code interact with each other?
九章系统设计app