在实际应用中,网页填充的数据大部分是来自服务端。网页在加载或运行过程中,会发送http请求到服务端,服务端接收客户端发送的http请求,对请求进行处理并返回数据给客户端。

客户端与服务端的交互需要下面四个步骤:
(1)建立客户端与服务端的连接通道,当客户端通过Ajax技术向服务端发送请求时,JS会自动连接在请求URL中指定的服务端;
(2)客户端与服务端连接成功后,客户端发送HTTP请求到服务端;
(3)服务端接收到客户端发送的HTTP请求后,对请求进行处理,并将处理后的数据返回给客户端;
(4)客户端关闭与服务端的连接。
1、 HTTP请求信息
当用户在浏览器的地址栏中输入一个URL并按回车键之后,浏览器会向HTTP服务器发送HTTP请 求。
客户端通过发送 HTTP 请求向服务器请求对资源的访问,它向服务器传递了一个数据块,也就是请求信息,HTTP 请求由三部分组成:请求行、请求头和请求正文。
下面是一个HTTP请求的数据:
GET https://www.baidu.com HTTP/1.1 Host: www.baidu.com Connection:keep-alive User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:10.0.2) Gecko/20100101 Firefox/10.0.2 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip, deflate Referer: https://www.baidu.com
请求空行 标志着请求头结束,请求正文的开始
username=Petter
在上面的请求数据中,第1行是请求行,由请求方法、URL和HTTP协议版本号构成。
GET和POST是最常见的HTTP方法,GET方法多用于获取和查询服务器资源信息;POST方法一般用于更新服务器资源信息。URL指定了要访问的网络资源,通常只要给出相对于服务器的根目录的相对目录即可,HTTP/1.1声明了通信过程中使用的HTTP的版本。
请求行后面是请求头,请求头由多个键值对构成,每个键值对由键名称,冒号(:)和值三部分组成。键名称是一个预定义的字符串,并且大小写无关,值是键名称对应的值,在值的前面可以添加任何数量的空格符,每个键值对为一行。
例如键值对:
Connection:keep-alive
Connection是键的名称,keep-alive是键的值。Connection表示是否需要持久连接,值keep-alive表示保持连接,若值是close表示请求完成后关闭当前连接。
Host用于指定被请求资源的主机地址和端口号。
User-Agent用于传递客户端浏览器信息给服务器。
Accept表示浏览器可以接受的文件类型。
Accept-Language表示浏览器支持的语言。
Accept-Encoding表示浏览器支持的压缩格式。
请求头以一个空行结束,接下来的是请求正文,请求正文中可以包含客户提交的查询字符串信息:
username=Petter
2、 HTTP响应信息
服务端接收到客户端发送的请求信息后,对请求信息进行处理,并返回一个 HTTP 响应信息。与HTTP请求信息类似,HTTP 响应也是由三个部分组成,分别是:状态行、消息报头和响应正文。
下面是一个HTTP响应信息的数据:
HTTP/1.1 200 OK Server: Tengine Connection: keep-alive Date: Wed, 30 Nov 2016 07:58:21 GMT Cache-Control: no-cache Content-Type: text/html;charset=UTF-8 Keep-Alive: timeout=20 Vary: Accept-Encoding Pragma: no-cache X-NWS-LOG-UUID: bd27210a-24e5-4740-8f6c-25dbafa9c395 Content-Length: 180945
响应空行 标志着消息报头结束,响应正文的开始
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ....
在上面的请求数据中,第1行是状态行,由HTTP协议版本号、状态码、响应字符串构成。状态码表示响应状态,值为200表示服务器成功接收请求并已完成整个处理过程。若值在400至499范围内,表示客户端请求错误,若值在500至599范围内,表示服务端出现错误。
状态行后面是消息报头,消息报头也是由多个键值对构成,每个键值对占一行。
Server用于指定服务器的名称。
Connection作为回应客户端的Connection:keep-alive,告诉客户端服务器的tcp连接也是一个长连接,客户端可以继续使用这个tcp连接发送http请求。
Keep-Alive用于指定长连接可以保持的时间,值为timeout=20表示该长连接可以保持20秒。
Content-Length表示请求资源的大小(即响应正文的大小),客户端可以根据Content-Length来判断返回的数据长度。
Content-Type表示响应正文的MIME类型。
消息报头以一个空行结束,接下来的是响应正文,响应正文为客户端请求的资源数据。